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

配置react-native-vector-icons

https://ionicons.com/

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'
/>