在 react native expo 中使用 iconfont 自定义图标
1. 下载 iconfont 文件
把在 https://www.iconfont.cn/ 上下载好的图标解压
2. 用 node.js 生成 iconfont.json 映射
在解压好的文件夹里增加一个新文件 genJson.js
在 genJson.js 中写入以下内容
const fs = require('fs')
const path = require('path')
const lineReader = require('readline').createInterface({
input: require('fs').createReadStream(path.join(__dirname, './iconfont.svg')),
})
const names = []
console.log('create...')
lineReader.on('line', function (line) {
let words = line.split(' ')
if (words[4] === '
运行命令 node genJson.js 生成 iconfont.json
生成后的 iconfont.json 文件内容如下格式：
3. 配置 自定义图标
在 components 文件夹下新建文件夹 iconfont, 复制 步骤1 中 iconfont.ttf 和 步骤2 中的 iconfont.json, 并新建 index.ts
在 index.ts 中写入以下内容：
import { createIconSet } from '@expo/vector-icons';
import glyphMap from './iconfont.json';
export default createIconSet(glyphMap, "iconfont", require('./iconfont.ttf'));
4. 使用方法
import Icon from '../components/iconfont';
export default function TabHot() {
return (
Tab Hot
);
}
图标name的名字，打开步骤1中下载的 demo_index.html 查看
以后图标有删改的，只需重新生成 iconfont.json， 然后 替换 components\iconfont 下的 iconfont.ttf 和 iconfont.json 即可。
相关