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