react-native-vector-icons自定义图标

配置react-native-vector-icons

npm install react-native-vector-icons --save
react-native link react-native-vector-icons

获取图标资源

• 在阿里巴巴矢量图标库 下载你需要的图标，下载格式选择svg下载
  
   

  

  点击下载
  
  
   

  

  选择 SVG下载
• 打开IcoMoon， 将svg转化为字体图标
  
   

  

  导入svg图标
  
  
   

  

  选择你需要转成字体的图标，点击右下角的 Generate font 按钮
  
  下载的包文件结构如下：
  
   

  

  文件结构

项目引入字体

• 在刚刚下载的文件包里，讲fonts文件夹和selection.json文件拷贝到项目的assets目录下
• 新建一个文件icomoon.js, 内容如下：

import { createIconSetFromIcoMoon } from 'react-native-vector-icons'
import icoMoonConfig from './fonts/selection.json'

const Icon = createIconSetFromIcoMoon(icoMoonConfig, 'Icomoon', 'icomoon.ttf')
export default Icon

export const Button = Icon.Button
export const TabBarItem = Icon.TabBarItem
export const TabBarItemIOS = Icon.TabBarItemIOS
export const ToolbarAndroid = Icon.ToolbarAndroid
export const getImageSource = Icon.getImageSource

• 安卓端：将icomoon.ttf字体文件拷贝到android/app/src/main/assets/fonts目录下

使用

import IcoMoonIcon from '../../assets/icomoon'

// name就是svg生成字体图标时的文件名, 在selection.json里有定义
<IcoMoonIcon
   name='user'
   size={25}
   color='#fff'
/>