expo 下react native 使用 iconfont 自定義圖標筆錄

效果圖展現

步驟以下

1. www.iconfont.cn 內下載我的iconfont.zip 目錄內容爲：

2. 利用腳本 setting.sh 文件調整 iconfont.json 文件格式

提取 iconfont.json 的 name 值和 unicode_decimal 值組成新的鍵值對 json文件,
與 expo createIconSet 指望格式達成一致
複製代碼

在 iconfont.zip 解壓文件夾下添加 setting.sh 文件，添加以下：

#!/bin/sh 
if [ $# != 1 ] ; then

    echo "usage: $0 iconfont.svg(iconfont.svg) "
    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

複製代碼

保存退出並在當前目錄下執行 ./setting.sh iconfont.json

(若遇權限問題，可先執行 chmod 777 setting.sh )

成功後 iconfont.json 文件內容格式改變

修改前格式:

{
  "id": "1265309",
  "name": "diary",
  "font_family": "iconfont",
  "css_prefix_text": "icon-",
  "description": "",
  "glyphs": [
    {
      "icon_id": "58330",
      "name": "delete",
      "font_class": "delete",
      "unicode": "e621",
      "unicode_decimal": 58913
    },
    ...
    ]
}
複製代碼

修改後格式:

{
 "delete":58913,
 "mobile":59140,
 "to_left":58880,
 "to_right":58881,
 "hourglass":58960,
 "upload":59004,
 "sey_write_a":58988,
 "feedback":59003,
 "delete1":58888,
 "refresh":59345,
 "praise":59077,
  ...
 }

複製代碼

3. 文件保存到項目目錄內備用

iconfont.tff文件：iconfont.zip 解壓後的文件夾內
iconfont.json：上一步驟中生成的新格式文件
好比放入項目根目錄下的 assets/fonts/ 文件夾內
複製代碼

4. npm install --save react-native-vector-icons

   node_modules/@expo/...內會加入 create-icon-set.js 文件
   複製代碼

5. 新建組件Icon.js

// 根據我的 create-icon-set.js 文件路徑引入
import createIconSet from "@expo/vector-icons/build/vendor/react-native-vector-icons/lib/create-icon-set.js";
import glyphMap from "../assets/fonts/iconfont.json";

const iconSet = createIconSet(
  glyphMap,
  "MixIcon",
  "../assets/fonts/iconfont.ttf"
);

export default iconSet;
複製代碼

5. 項目App.js初始頁面預加載 iconfont.ttf 文件

import * as Font from "expo-font";

export default function App(props) {

    // 根據我的狀況在適當位置調用該方法，如 componentDidMount() 內
    function loadResourcesAsync() {
        Font.loadAsync({
          MixIcon: require("./assets/fonts/iconfont.ttf")
        })
    }
    
}
複製代碼

6. 頁面使用

import MixIcon from "../../components/Icon";
   
   ...
   
<MixIcon name="mobile" size={24} color="#226688" />
<MixIcon name="refresh" size={24} color="#226688" />
<MixIcon name="praise" size={24} color="#226688" />
<MixIcon name="homemin" size={24} color="#226688" />

複製代碼

(END)