美文网首页
php生成react-native的iconfont.json配

php生成react-native的iconfont.json配

作者: isszz | 来源:发表于2018-05-21 00:50 被阅读0次

在使用react-native的react-native-vector-icons组件时,需要自己生成unicode编码的iconfont.json配置文件,图标少时自己手写可以,但是几十个上百的时候就哈哈了,这里为大家写了一个php生成的程序,可直接使用

1.将下面代码保存为任意php后缀文件
<?php
/**
 * iconfont的图标转换为react-native-vector-icon的icon映射集合
 * http://www.iconfont.cn/下载的项目文件解压丢在当前目录访问这个php文件即可下载生成好的js文件
 * 2018-02-13
 */
$path = dirname(__FILE__);

$css = GetIconFontMap::get($path);

header('Content-Type:text/javascript; charset=UTF-8');
header('Content-Disposition: attachment; filename=IconFont.js');
echo $css;exit;

class GetIconFontMap {

    public static $delimiter = '|#@#|';

    public static function get($path = '', $isBuild = true) {
        $css = self::scandir($path);
        if (empty($css)) {
            exit('Not find iconfont.css');
        }

        $icons = self::getIcons($css);

        return self::build($icons, $isBuild);
    }

    public static function getIcons($css) {
        // .icon-wxbdingwei:before { content: "\e624"; }
        $css = preg_replace_callback("/\.icon-([a-zA-Z0-9-]+):before { content: \"(.+?)\"; }/is", function($matches) {
            if (!empty($matches[1]) && !empty($matches[2])) {
                return $matches[1] . self::$delimiter . trim($matches[2], '\/');
            }
        }, $css);

        if (empty($css) || strpos($css, self::$delimiter) === false) {
            exit('Not find icon');
        }
        $icons = array_filter(explode("\n", $css));

        if (empty($icons) || !is_array($icons)) {
            exit('Not find icon');
        }
        return $icons;
    }

    private static function build($icons = [], $isBuild = true) {
        $glyphMap = [];
        if ($isBuild) {
            $glyphMap = "import {createIconSet} from 'react-native-vector-icons';\n\nconst glyphMap = {\n";
        }
        foreach ($icons as $value) {
            if (strpos($value, self::$delimiter) === false) {
                continue;
            }
            list($key, $val) = explode(self::$delimiter, $value);
            if (!is_numeric($val)) {
                $val = hexdec($val);
            }
            if (strpos($key, '-') !== false) {
                $key = str_replace('-', '_', $key);
            }
            if ($isBuild) {
                $glyphMap .=  '    ' . $key . ': ' . $val . ",\n";
            } else {
                $glyphMap[$key] = $val;
            }
        }
        if ($isBuild) {
            $glyphMap = rtrim($glyphMap, ",\n");
            $glyphMap .= "\n}\n\nconst iconFont = createIconSet(glyphMap, 'iconfont', 'iconfont.ttf');\r\n\nexport {iconFont}\r\n";
        }
        return $glyphMap;
    }

    private static function scandir($path = '', $filename = '') {
        if (!is_dir($path)) {
            return false;
        }
        foreach(scandir($path) as $file) {
            if ($file != '.' && $file != '..') {

                $_path = $path . DIRECTORY_SEPARATOR . $file;

                if (is_dir($_path)) {

                    $data = self::scandir($_path, $filename);
                    if (!empty($data)) {
                        return $data;
                    }
                } else {
                    if (strpos($_path, 'iconfont.css') !== false) {
                        return file_get_contents($_path);
                    }
                }
            }
        }
        return false;
    }
}
2.解压iconfont的图标文件放进转换文件根目录访问下载
  • 上面代码是在php7的环境下测试正常工作

相关文章

网友评论

      本文标题:php生成react-native的iconfont.json配

      本文链接:https://www.haomeiwen.com/subject/yfmxjftx.html