ReactNative — 引入彩色图标iconfont

最近遇到的问题，记一笔
文档：https://github.com/iconfont-cli/react-native-iconfont-cli

通常地，在RN里使用iconfont，我们借助react-native-vector-icons导入ttf字体文件。

使用ttf字体有一个弊端，就是每次更新图标，都要相应的更新ttf文件，然后再次打包发布APP。而且ttf不支持多种色彩的图标，导致所有图标都是单色。如果你是借助react-native-vector-icons，该库内置了10多套ttf文件，合起来有2M左右；你可能用不到它们，但是它们仍然会被打包进你的APP里。

Step 1

安装插件

# Yarn
yarn add react-native-svg
yarn add react-native-iconfont-cli --dev

Step 2

静态链接

# RN < 0.60
react-native link react-native-svg

Step 3 生成配置文件

npx iconfont-init

此时项目根目录会生成一个iconfont.json的文件，内容如下：

{
    "symbol_url": "iconfont官网提供的项目symbol链接",
    "use_typescript": false,
    "save_dir": "./src/iconfont",
    "generate_mode": "all-in-one",
    "trim_icon_prefix": "icon",
    "default_icon_size": 18,
    "summary_component_name": "Icon"
}

Step 4

开始生成React-Native标准组件

npx iconfont-rn

使用

1、使用汇总Icon组件：

import Icon from '../src/iconfont/Icon';

export const App = () => {
  return (
    <View>
      <Icon name="alipay" size={20} />
      <Icon name="wechat" />
    </View>
  );
};

2、当generate_mode = depends-on, 每个图标都会生成一个组件

import IconAlipay from '../src/iconfont/IconAlipay';
import IconWechat from '../src/iconfont/IconWechat';

export const App = () => {
  return (
    <View>
      <IconAlipay size={20} />
      <IconWechat />
    </View>
  );
};