在App包的構成中圖片資源是比較佔大小的，所以我們可以利用Iconfont來替代原來的png或者jpg單色圖示，iconfont的優點是佔Size小、支援任意大小不失真、支援任意顏色設定、平臺化管理icon等等。

當App專案的大小達到一定規模時，App包的Size也會隨之增大，這個時候我們一般會對App包的Size做分析優化來達到減少包大小的目的，利用iconfont來替代專案中原有的png單色圖示是你的一種選擇，這個之後會專門出一篇文章來記錄減包大小的相關東西。

    這篇文章要分享的是在React Native開發中如何使用自定義的Iconfont圖示，並提供一鍵自動生成對應對映檔案的指令碼。

Demo及指令碼地址：RNIconfont【歡迎issue/star/follow~】

本文主要分為三部分：

• react-native-vector-icons庫的整合與使用
• 如何使用任意自定義的iconfont
• 編寫指令碼來快捷生成iconfont對映檔案

1.react-native-vector-icons庫的整合與使用

react-native-vector-icons是ReactNative開發中十分好用的一個用來展示iconfont圖示的庫。

整合只要兩步：
1.引入依賴

Run: npm install --save react-native-vector-icons
 

2.連結原生庫

Run: react-native link react-native-vector-icons

如果第二步連結失敗或者執行錯誤，可以自己手動連結，具體可以參考react-native-vector-icons說的比較清楚了。

整合完畢後，可以看到這個庫預設引入了幾個ttf檔案（android專案在assets/fonts下）：

也就是說這些ttf檔案中所有icon都可以直接使用，下面就說一下如何使用。

使用非常簡單，如下：

import Icon from "react-native-vector-icons/Ionicons";

<Icon name
 
='md-pricetag' size={16} color='#cccccc'></Icon>

2.如何使用任意自定義的iconfont

    上面介紹了react-native-vector-icons庫的使用，但是目前為止你能使用的iconfont只有上面說的預設引入的那些ttf檔案中的icon,因為上面所使用的< Icon>< /Icon>只支援預設引入的那些icon。

    這樣顯然不能滿足我們的要求，我們想要使用自己的iconfont,那麼我們該如何做呢，這裡以從阿里iconfont平臺上選擇自己想要的icon為例做介紹。

一、從阿里iconfont平臺上挑選自己想要的icon，打包下載到本地並解壓，如下：

二、將iconfont.ttf檔案copy到android專案的assets/fonts目錄下

三、自定義圖示庫
CXIcon.js

import createIconSet from 'react-native-vector-icons/lib/create-icon-set';
import glyphMap from './iconfont.json';

const iconSet = createIconSet(glyphMap, 'CXIcon', 'iconfont.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;

看到import glyphMap from ‘./iconfont.json’了嗎，所以這裡我們還需要一個iconfont.json，也就是對映map。

iconfont.json:

{
  "biscuit": 58983,
  "pizza": 59024,
  "dangao": 59080
}

這是我們在阿里iconfont上下載的三個icon對應的Unicode碼。

ok，到這裡我們就可以使用來展示我們自定義下載的幾個icon了，使用如下：

import React, {Component} from 'react';
import {
    Text,
    View
} from 'react-native';
import CXIcon from "./components/cxicon/CXIcon";

type Props = {};
export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <Text>展示來自自定義的ttf檔案的icon</Text>
                <CXIcon name='biscuit' size={50} color='#226688'></CXIcon>
            </View>
        );
    }
}

3.編寫指令碼自動生成上面的iconfont.json對映檔案

    看完第二步 其實你就已經可以自由的使用自己選擇的icon圖示了，但是你會發現一個問題，上面我們需要一個iconfont.json對映檔案，這個對映檔案是我們手寫的，如果只有3個圖示那我們可以手寫，那如果是300個圖示，如果還手寫，那就不是程式設計師的風格了，我們的風格是什麼？沒錯，是懶惰，不可能做重複的工作的，這輩子都不可能做重複的工作的。

    回到上面，我們從阿里iconfont平臺下載到的zip壓縮包解壓縮后里面有一個iconfont.svg檔案，我們就根據這個檔案來解析生成我們想要的iconfont.json對映檔案，擼起袖子，寫個shell指令碼。

iconfont_mapper.sh:

#!/bin/sh

if [ $# != 1 ] ; then

    echo "usage: $0 iconfont.svg(your svg file name)  "
    exit
fi

#OutputFile path,you can customize your path
OutputFileName=`echo iconfont.json`

mapper=` awk '{ if($0 ~ /glyph-name/) print $0;  if($0 ~ /unicode/)  print $0"|split|" }'  $1| tr '[:upper:]' '[:lower:]'| awk '{print $0}'  RS='\='| tr "\n\"&#;" " "| awk  '{ if ($1!="split"&&$1!=""){ printf ("\""$3"\":"); printf ($5","); print "\r " }}' RS="|split|" | sed "s/-/_/g"`

rm $OutputFileName
echo "{" >> $OutputFileName
echo $mapper >> $OutputFileName
echo "}" >> $OutputFileName

#usage:
# ./iconfont_mapper.sh svg_file_path

使用：
命令列執行： ./iconfont_mapper.sh iconfont.svg 即可。

注意：如果你的iconfont_mapper.sh指令碼和iconfont.svg檔案沒有放在同一個檔案目錄下，則iconfont.svg需要拼全路徑。

    執行完這個指令碼你就會發現在指令碼所在的目錄下自動生成了我們需要的iconfont.json對映檔案。將它放到專案中即可。

Demo及指令碼地址：RNIconfont【歡迎issue/star/follow~】

最後，希望世界上的每個icon都可大可小，高清無瑕~