在前端开发中，我们经常需要使用图标来装饰设计和界面，@expo/vector-icons 是一个十分便捷的 npm 包，它包含了众多优美的图标库，而且使用非常简单，本文将详细介绍它的使用方法。
安装 @expo/vector-icons
在使用之前我们需要先安装它：
npm install @expo/vector-icons --save
注意： 这个包是基于 React Native 的，如果你的项目不是 RN 的话，需要再次安装 react-native-vector-icons 包。
导入图标库
在我们想要使用图标的组件中导入所需图标库，在导入之前，我们先要在 Expo Vector Icons 上选择需要的图标。
例如我们选择了 FontAwesome 图标库，它的名字为 fa-heart-o。
在 App.js 中导入所需图标库：
import { FontAwesome } from '@expo/vector-icons';渲染图标
接着我们可以在组件中渲染出所需要的图标：
<FontAwesome name="heart-o" size={24} color="red" />这里的 name 属性就是图标库中的名称，可以根据不同的库进行更改，size 属性是图标的大小，color 属性是图标的颜色。
添加自定义图标库
如果项目的图标库中没有我们需要的图标库，我们可以自定义添加，具体步骤如下：
- 在
app.json中添加expo标签：
-- -------------------- ---- -------
------- -
------- --------------------
--------- -
-------- ----------------------
------------- ----------
------------------ ---------
--
-------- -
-------- -
--------------- ---------------------------
-
-
-这里我们在 extra 中添加了 custom-icons 图标库，并且图标文件为 custom-icons.ttf
- 在组件中导入自定义库
import { createIconSetFromFontello } from '@expo/vector-icons';
import fontelloConfig from './assets/custom-icons.json';
const CustomIcons = createIconSetFromFontello(fontelloConfig, 'custom-icons');这里我们引入了 custom-icons.ttf 文件，并创建一个名为 CustomIcons 的自定义库。
- 渲染自定义图标
最后，我们可以像渲染普通图标一样来渲染自定义图标：
<CustomIcons name="my-custom-icon" size={24} color="blue" />至此，我们就完成了 @expo/vector-icons 的基本使用，我希望本文能够对您有所帮助，Happy Coding！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/expo-vector-icons