????在App包的構(gòu)成中圖片資源是比較占大小的，所以我們可以利用Iconfont來替代原來的png或者jpg單色圖標(biāo)，iconfont的優(yōu)點是占Size小、支持任意大小不失真、支持任意顏色設(shè)置、平臺化管理icon等等。
當(dāng)App項目的大小達到一定規(guī)模時，App包的Size也會隨之增大，這個時候我們一般會對App包的Size做分析優(yōu)化來達到減少包大小的目的，利用iconfont來替代項目中原有的png單色圖標(biāo)是你的一種選擇，這個之后會專門出一篇文章來記錄減包大小的相關(guān)東西。
????這篇文章要分享的是在React Native開發(fā)中如何使用自定義的Iconfont圖標(biāo)，并提供一鍵自動生成對應(yīng)映射文件的腳本。
Demo及腳本地址：RNIconfont【歡迎issue/star/follow~】
本文主要分為三部分：
- react-native-vector-icons庫的集成與使用
- 如何使用任意自定義的iconfont
- 編寫腳本來快捷生成iconfont映射文件
1.react-native-vector-icons庫的集成與使用
react-native-vector-icons是ReactNative開發(fā)中十分好用的一個用來展示iconfont圖標(biāo)的庫。
集成只要兩步：
1.引入依賴
Run: npm install --save react-native-vector-icons
2.鏈接原生庫
Run: react-native link react-native-vector-icons
如果第二步鏈接失敗或者運行錯誤，可以自己手動鏈接，具體可以參考react-native-vector-icons說的比較清楚了。
集成完畢后，可以看到這個庫默認(rèn)引入了幾個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只有上面說的默認(rèn)引入的那些ttf文件中的icon,因為上面所使用的< Icon>< /Icon>只支持默認(rèn)引入的那些icon。
????這樣顯然不能滿足我們的要求，我們想要使用自己的iconfont,那么我們該如何做呢，這里以從阿里iconfont平臺上選擇自己想要的icon為例做介紹。
一、從阿里iconfont平臺上挑選自己想要的icon，打包下載到本地并解壓，如下：
二、將iconfont.ttf文件copy到android項目的assets/fonts目錄下
三、自定義圖標(biāo)庫
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對應(yīng)的Unicode碼。
ok，到這里我們就可以使用<CXIcon></CXIcon>來展示我們自定義下載的幾個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映射文件
????看完第二步 其實你就已經(jīng)可以自由的使用自己選擇的icon圖標(biāo)了，但是你會發(fā)現(xiàn)一個問題，上面我們需要一個iconfont.json映射文件，這個映射文件是我們手寫的，如果只有3個圖標(biāo)那我們可以手寫，那如果是300個圖標(biāo)，如果還手寫，那就不是程序員的風(fēng)格了，我們的風(fēng)格是什么？沒錯，是懶惰，不可能做重復(fù)的工作的，這輩子都不可能做重復(fù)的工作的。
????回到上面，我們從阿里iconfont平臺下載到的zip壓縮包解壓縮后里面有一個iconfont.svg文件，我們就根據(jù)這個文件來解析生成我們想要的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
使用：
命令行執(zhí)行： ./iconfont_mapper.sh iconfont.svg 即可。
注意：如果你的iconfont_mapper.sh腳本和iconfont.svg文件沒有放在同一個文件目錄下，則iconfont.svg需要拼全路徑。
????執(zhí)行完這個腳本你就會發(fā)現(xiàn)在腳本所在的目錄下自動生成了我們需要的iconfont.json映射文件。將它放到項目中即可。
Demo及腳本地址：RNIconfont【歡迎issue/star/follow~】
最后，希望世界上的每個icon都可大可小，高清無瑕~
