使用 阿里字庫(kù)+react-native-vector-icons自帶字庫(kù)
1. 阿里字庫(kù)
網(wǎng)址: https://www.iconfont.cn/
1.在阿里字庫(kù)中創(chuàng)建一個(gè)項(xiàng)目, 選擇需要的字
類似:
image.png
2.選好后, 點(diǎn)擊下載, 解壓
image.png
把此文件拖入rn項(xiàng)目
3.創(chuàng)建js文件
import createIconSet from 'react-native-vector-icons/lib/create-icon-set';
const glyphMap = {
tb_campus: 58911, // 阿里字庫(kù)中() 16進(jìn)制 e61f 轉(zhuǎn)為 10進(jìn)制;
tb_circle: 58881,
tb_plus: 58925,
tb_edu: 58911,
tb_me: 58880
};
// iconfont.ttf: 是阿里字庫(kù)選擇需要的字庫(kù)后 點(diǎn)擊下載下來(lái)其中包括名稱為 iconfont.ttf 的文件
const ALLibIcon = createIconSet(glyphMap, 'iconfont', 'iconfont.ttf');
export {
ALLibIcon
}
4. 使用
<ALLibIcon name={font} size={size} color={color}/>
