美文网首页
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