React Native

react-native-vector-icons如何使用自己的iconfont

react-native-vector-icons的git地址

如何使用自己的iconfont呢?

首先将你的定义的iconfont.css放到你的RN项目根目录下，然后在根目录下执行
./node_modules/.bin/generate-icon ./iconfont.css --componentName=MyIcon --fontFamily=myicon > MyIcon.js

执行完成之后你会发现在根目录多了一个MyIcon.js，生成的MyIcon.js内容如下:

1
2
3
4
5
6
7
8
import createIconSet from './lib/create-icon-set';
const glyphMap = {
  "icabout": 58881,
  "btnclose": 58882,
};
let MyIcon = createIconSet(glyphMap, 'myicon', 'MyIcon.ttf');
module.exports = MyIcon;
module.exports.glyphMap = glyphMap;

将生成的MyIcon.js放到node_modules/react-native-vector-icons,并且将你的.ttf文件放入node_modules/react-native-vector-icons/Fonts文件夹中