react-native優雅的使用iconfont字體圖標

引言

在此以前已經有不少前輩分享自定義圖標的經驗，在這裏我分享一種我的以爲比較優雅的使用icnfont字體圖標的方案。

一步一個腳印

項目目錄

• root
  • ...
  • android
  • font
  • App.js

安裝依賴

• 首先局部安裝 react-native-vector-icons

  yarn add react-native-vector-icons
  react-native link react-native-vector-icons
  複製代碼

• 全局安裝 iconfont-to-json

  npm i iconfont-to-json -g
  複製代碼

下載iconfont的字體

iconfont下載目錄

這裏咱們只須要 iconfont.css 和 iconfont.ttf 兩個文件

放置字體文件

• 把 iconfont.ttf 拷貝到 /android/app/src/main/assets/fonts 目錄下
• 把 iconfont.css 拷貝到 /font 目錄下

生成字體map

在package.json添加代碼

...
    "scripts": {
        ...
        "build:iconfont": "iconfonttojson ./font/iconfont.css"
    }
    ...
複製代碼

執行 npm run build:iconfont 就會在字體目錄生成 iconfont.js

這裏的key對應字體名稱

export default {
  "icon-bqxin": 59019,
  "icon-sousuo-copy": 58923,
  "icon-pinglun": 58938,
  "icon-jia": 58930,
  "icon-camera_icon": 58967,
  "icon-tiaoguofenxiang": 59260
}
複製代碼

在字體目錄新建 index.js 拋出自定義字體組件

/font/index.js

import { createIconSet } from 'react-native-vector-icons'

import fontJson from './iconfont'

export const Iconfont = createIconSet(fontJson, 'Iconfont', 'iconfont.ttf');
複製代碼

使用

/App.js

import React, {Component} from 'react';
import {View} from 'react-native';
import { Iconfont } from "./font/index";

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Iconfont name="icon-bqxin" size={68} color="#E00"></Iconfont> </View>
    );
  }
}

複製代碼

效果

demo github: github.com/verydog/dem…