react-native-vector-icons的使用

使用 阿里字库+react-native-vector-icons自带字库

1. 阿里字库

网址: https://www.iconfont.cn/

1.在阿里字库中创建一个项目, 选择需要的字

image.png

2.选好后, 点击下载, 解压

image.png

把此文件拖入rn项目

3.创建js文件

  import createIconSet from 'react-native-vector-icons/lib/create-icon-set';

  const glyphMap = {
     tb_campus: 58911, // 阿里字库中(&#xe61f) 16进制 e61f 转为 10进制;
     tb_circle: 58881,
     tb_plus:   58925,
     tb_edu:    58911,
     tb_me:     58880
  };

  // iconfont.ttf: 是阿里字库选择需要的字库后 点击下载下来其中包括名称为 iconfont.ttf 的文件
  const ALLibIcon = createIconSet(glyphMap, 'iconfont', 'iconfont.ttf');

  export {
     ALLibIcon
  }

4. 使用

<ALLibIcon name={font} size={size} color={color}/>