反应原生矢量图标 - Javascript

在React应用程序中使用矢量图标非常常见,反应原生矢量图标为React应用程序提供了一种使用矢量图标的简便方法。它允许您 在不使用图像文件的情况下使用由字体绘制的图标，因此这些图标的大小和颜色可以很容易地更改。

安装

您可以使用npm安装React-Native-Vector-Icons

npm install react-native-vector-icons

还可以使用Yarn安装它

yarn add react-native-vector-icons

如何使用

导入所需的图标

import Icon from 'react-native-vector-icons/FontAwesome';

在组件中使用图标

<Icon name='github' size={30} color='#000' />

字体文件

React Native Vector Icons内置了多个字体集合的图标。您可以在这里找到完整的字体清单。为了减小包的大小，只导入需要使用的字体集合。例如，为了使用FontAwesome，您应该在app.js或index.js或任何其他您想要的地方导入它并配置它:

import FontAwesome from 'react-native-vector-icons/FontAwesome';
FontAwesome.loadFont();

注意

在iOS模拟器上，矢量图标将正常显示，但在安装到实际设备上后可能会因字体未加载而丢失。为了避免这种情况，请按照上面提到的步骤手动加载所需的字体。