react-universal-vector-icons 是一个使用 React 构建应用程序时，让你轻松使用矢量图标的 npm 包。在这篇文章中，我们将介绍如何安装和使用 react-universal-vector-icons。
安装 react-universal-vector-icons
安装 react-universal-vector-icons 的最简单的方法是使用 npm。在终端运行以下命令即可：
npm install react-universal-vector-icons --save
导入 react-universal-vector-icons
在你的项目中导入 react-universal-vector-icons：
import Icon from 'react-universal-vector-icons';
使用 react-universal-vector-icons
react-universal-vector-icons 包含了多个矢量图标库，您可以在 https://oblador.github.io/react-native-vector-icons/ 中查找支持的图标库和图标名称。
下面是一个示例代码片段，展示如何使用 react-universal-vector-icons：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ---- - ---- ---------------
------ ---- ---- -------------------------------
----- --- ------- --------- -
-------- -
------ -
------
----- ----------- --
-------
--
-
-
------ ------- ----运行应用程序，您将在屏幕上看到一个家的图标。
自定义样式
您可以使用 style 属性来自定义图标的样式，例如：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---------- - ---- ---------------
------ ---- ---- -------------------------------
----- --- ------- --------- -
-------- -
------ -
----- -------------------------
----- ----------- ------------------- --
-------
--
-
-
----- ------ - -------------------
---------- -
---------------- -------
-------- ---
------------- --
------------ -------
------------- -
------ --
------- --
--
-------------- ----
------------- --
---------- --
--
----- -
--------- ---
------ -------
-
---
------ ------- ----运行应用程序，您将在屏幕上看到一个蓝色的带阴影的家的图标。
总结
现在您已经知道如何使用 react-universal-vector-icons，让你可以轻松使用矢量图标来美化你的 React 应用程序。它也可以让你大幅减小应用程序的大小，在某些情况下，甚至可以更快地加载应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562b381e8991b448dff32