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

 

 

posted @ 2020-02-23 17:48  simple-love  阅读(909)  评论(0)  编辑  收藏  举报