????在App包的構(gòu)成中圖片資源是比較占大小的，所以我們可以利用Iconfont來替代原來的png或者jpg單色圖標(biāo)石景，iconfont的優(yōu)點(diǎn)是占Size小劈猿、支持任意大小不失真、支持任意顏色設(shè)置潮孽、平臺(tái)化管理icon等等揪荣。
當(dāng)App項(xiàng)目的大小達(dá)到一定規(guī)模時(shí)，App包的Size也會(huì)隨之增大往史，這個(gè)時(shí)候我們一般會(huì)對(duì)App包的Size做分析優(yōu)化來達(dá)到減少包大小的目的仗颈，利用iconfont來替代項(xiàng)目中原有的png單色圖標(biāo)是你的一種選擇，這個(gè)之后會(huì)專門出一篇文章來記錄減包大小的相關(guān)東西椎例。
????這篇文章要分享的是在React Native開發(fā)中如何使用自定義的Iconfont圖標(biāo)挨决，并提供一鍵自動(dòng)生成對(duì)應(yīng)映射文件的腳本。
Demo及腳本地址：RNIconfont【歡迎issue/star/follow~】
本文主要分為三部分：
- react-native-vector-icons庫的集成與使用
- 如何使用任意自定義的iconfont
- 編寫腳本來快捷生成iconfont映射文件
1.react-native-vector-icons庫的集成與使用
react-native-vector-icons是ReactNative開發(fā)中十分好用的一個(gè)用來展示iconfont圖標(biāo)的庫订歪。
集成只要兩步：
1.引入依賴
Run: npm install --save react-native-vector-icons
2.鏈接原生庫
Run: react-native link react-native-vector-icons
如果第二步鏈接失敗或者運(yùn)行錯(cuò)誤脖祈，可以自己手動(dòng)鏈接，具體可以參考react-native-vector-icons說的比較清楚了刷晋。
集成完畢后盖高，可以看到這個(gè)庫默認(rèn)引入了幾個(gè)ttf文件（android項(xiàng)目在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,因?yàn)樯厦嫠褂玫?lt; Icon>< /Icon>只支持默認(rèn)引入的那些icon。
????這樣顯然不能滿足我們的要求映凳，我們想要使用自己的iconfont,那么我們該如何做呢胆筒，這里以從阿里iconfont平臺(tái)上選擇自己想要的icon為例做介紹。
一诈豌、從阿里iconfont平臺(tái)上挑選自己想要的icon仆救，打包下載到本地并解壓，如下：
二矫渔、將iconfont.ttf文件copy到android項(xiàng)目的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'了嗎，所以這里我們還需要一個(gè)iconfont.json庙洼，也就是映射map顿痪。
iconfont.json:
{
"biscuit": 58983,
"pizza": 59024,
"dangao": 59080
}
這是我們在阿里iconfont上下載的三個(gè)icon對(duì)應(yīng)的Unicode碼。
ok油够，到這里我們就可以使用<CXIcon></CXIcon>來展示我們自定義下載的幾個(gè)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.編寫腳本自動(dòng)生成上面的iconfont.json映射文件
????看完第二步 其實(shí)你就已經(jīng)可以自由的使用自己選擇的icon圖標(biāo)了，但是你會(huì)發(fā)現(xiàn)一個(gè)問題石咬，上面我們需要一個(gè)iconfont.json映射文件揩悄，這個(gè)映射文件是我們手寫的，如果只有3個(gè)圖標(biāo)那我們可以手寫鬼悠，那如果是300個(gè)圖標(biāo)删性，如果還手寫，那就不是程序員的風(fēng)格了焕窝，我們的風(fēng)格是什么蹬挺？沒錯(cuò)，是懶惰它掂，不可能做重復(fù)的工作的巴帮，這輩子都不可能做重復(fù)的工作的。
????回到上面虐秋，我們從阿里iconfont平臺(tái)下載到的zip壓縮包解壓縮后里面有一個(gè)iconfont.svg文件晰韵，我們就根據(jù)這個(gè)文件來解析生成我們想要的iconfont.json映射文件，擼起袖子熟妓，寫個(gè)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文件沒有放在同一個(gè)文件目錄下起愈，則iconfont.svg需要拼全路徑。
????執(zhí)行完這個(gè)腳本你就會(huì)發(fā)現(xiàn)在腳本所在的目錄下自動(dòng)生成了我們需要的iconfont.json映射文件。將它放到項(xiàng)目中即可抬虽。
Demo及腳本地址：RNIconfont【歡迎issue/star/follow~】
最后官觅，希望世界上的每個(gè)icon都可大可小，高清無瑕~
