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…