React Native添加自定義圖標庫

(1).準備好你的素材，最好是SVG格式

(2).進入網址：HTTPS：//icomoon.io/app/#/select

點擊導入圖標按鈕，將圖標批量導入，如圖下所示：

(3).點擊Generate Font按鈕。

(4).點擊下載按鈕。

這時候，你會下載到如圖所示結構的ZIP文件，將其解壓，拷貝到項目根目錄。

(5).在Xcode中中添加壓縮包裡的icomoon.ttf文件。

用Xcode中打開工程文件，將icomoon.ttf文件複製一份，並拖動到資源目錄中，如圖所示

第六步，點開Info.plist，在應用程序提供的字體屬性中添加這個字體的名稱icomoon.ttf的鍵值。

React-Native 使用自訂義 customize iconfont

1.方法(一)
在React-Native裡
iconfont module 組成元素
必要有

react-native-vector-icons 存在 node_modules


react-native-vector-icons/font/Icomoon.ttf (圖形檔)
react-native-vector-icons/glyphmaps/Icomoon.json (位置描述檔)
react-native-vector-icons/Icomoon.js (定義圖形與位置描述檔 )
一般人大多都是漏了後二者

所以我們馬上就來為這兩個未建立的檔案製作它們

//react-native-vector-icons/glyphmaps/Icomoon.json

{
  "icon-ico-collect"   : 59041,
  "icon-live-animation": 59051

   //icon-ico-collect英文名稱是可自定義,
   //後面的數字必須跟隨你網路上取得的 json 原檔內 defaultCode or Code
}

定義圖形與位置描述檔

//react-native-vector-icons/Icomoon.js
//新增時,照抄其他內建iconfont描述檔即可

import createIconSet from './lib/create-icon-set';
import glyphMap from './glyphmaps/Icomoon.json';

const iconSet = createIconSet(glyphMap, 'Icomoon', 'Icomoon.ttf');

export default iconSet;

export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;

這時我們便可以像匯入內建Vector元素一般來匯入我們自定義的iconfont

import Icon from 'react-native-vector-icons/Icomoon';
const myIcon = (<Icon color="#900" name="rocket" size="{30}">)

2.方法(2)

ios

import { createIconSet } from 'react-native-vector-icons';
const glyphMap = {
  'mui-nav-right': 58755,
  'mui-nav-left': 58481,
};
const MuiIcon = createIconSet(glyphMap, 'iconfont');

function ExampleView(props) {
    return (<MuiIcon size={20} name={'mui-nav-left'} color={'#E5E5E5'}/>);
}

android

import { createIconSet } from 'react-native-vector-icons';
const glyphMap = {
  'mui-nav-right': 58755,
  'mui-android-nav-left': 58481,
  'mui-voicer': 58162,
};
const MuiIcon = createIconSet(glyphMap, 'iconfont', 'mui.ttf');

function ExampleView(props) {
    return (<MuiIcon size={20} name={'mui-android-nav-left'} color={'#E5E5E5'}/>);
}

(參考網站1)
(參考網站2)