在前端开发中，使用图标是非常常见的。而在 React Native 开发中，使用图标也是必不可少的一部分。但是，如何方便地添加和修改图标，同时又不会过度增加 bundle 文件大小呢？这时，npm 包 reactx-icons-native 就派上了用场。本文将详细介绍该包的使用教程。
1. 概述
reactx-icons-native 是一个基于 React Native 开发的图标库。与其他的图标库不同的是，reactx-icons-native 的图标可由用户自行定制，而且并不会影响 bundle 文件大小。这是因为 reactx-icons-native 不会把所有图标都打包在一起，而只是将用户选择的图标进行打包。
2. 安装
reactx-icons-native 包可以通过 npm 包管理工具进行下载和安装。打开终端并在项目目录下运行以下命令：
npm install reactx-icons-native --save
3. 使用
3.1 导入
在代码中导入图标需要使用 react-native-vector-icons 包中提供的 createIconSetFromIcoMoon 方法：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ----- ---- ---------------
------ ---- ---- -------------------------------------
------ - ------------------------ - ---- ----------------------------
------ ------------- ---- -----------------
----- ------- - ----------------------------------------
----- --- - -- -- -
------ -
------
----------- ------------
----- ----------------------------- --------- --------------- --
-------- ---------------- --------- --------------- --
-------
--
--
------ ------- ----3.2 图标定制
使用 reactx-icons-native 包需要进行以下几个步骤：
编辑
icomoon.json文件。在 icomoon.io 中上传自定义图标库，并下载生成的
icomoon.json文件。将下载的
icomoon.json文件复制到项目中，并将其引入到项目中。运行以下命令：
npx icon-font-generator icomoon.json -o ./src/assets/fonts -n my-icon-set -p myicon
其中：
-o参数指定了输出文件夹路径。-n参数指定了 iconSet 的名称。-p参数指定了 icon 的前缀。
此时，iconSet 就生成了，我们可以在代码中使用它了。
例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ----- ---- ---------------
------ - ------------------------ - ---- ----------------------------
------ ------ ---- -------------------------------------
------ ------------- ---- ----------------------------------
----- ------- - --------------------------------------- -------------- --------
----- --- - -- -- -
------ -
------
----------- ------------
-------- ------------------ --------- --------------- --
-------
--
--
------ ------- ----4. 结语
reactx-icons-native 是一款比较实用的 React Native 图标库。使用它能够方便地对图标进行定制，而且并不会增加过多的 bundle 文件大小。如果你正在开发基于 React Native 的应用，并需要使用图标，那么不妨尝试一下 reactx-icons-native。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bda81e8991b448e5836