配置react-native-vector-icons

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

獲取圖標(biāo)資源

• 在阿里巴巴矢量圖標(biāo)庫 下載你需要的圖標(biāo)，下載格式選擇svg下載
  
  點擊下載
  
  
  選擇 SVG下載
• 打開IcoMoon， 將svg轉(zhuǎn)化為字體圖標(biāo)
  
  導(dǎo)入svg圖標(biāo)
  
  
  選擇你需要轉(zhuǎn)成字體的圖標(biāo)，點擊右下角的 Generate font 按鈕
  
  下載的包文件結(jié)構(gòu)如下：
  
  文件結(jié)構(gòu)

項目引入字體

• 在剛剛下載的文件包里，講fonts文件夾和selection.json文件拷貝到項目的assets目錄下
• 新建一個文件icomoon.js, 內(nèi)容如下：

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生成字體圖標(biāo)時的文件名, 在selection.json里有定義
<IcoMoonIcon
   name='user'
   size={25}
   color='#fff'
/>