react-native优雅的使用iconfont字体图标-白红宇

引言

在此之前已经有很多前辈分享自定义图标的经验，在这里我分享一种个人觉得比较优雅的使用icnfont字体图标的方案。

一步一个脚印

项目目录

root
- ...
- android
- font
- App.js

安装依赖

首先局部安装 react-native-vector-icons

yarn add react-native-vector-iconsreact-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
    
      {  render() {    return (      
             
            
         );  }}复制代码

效果

demo github:

引言