在使用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的环境下测试正常工作