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

1.将下面代码保存为任意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+环境下测试正常工作