配置react-native-vector-icons
npm install react-native-vector-icons --save
react-native link react-native-vector-icons
获取图标资源
- 在阿里巴巴矢量图标库 下载你需要的图标，下载格式选择
svg下载
- 打开IcoMoon， 将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'
/>
