在前端开发中，图标的使用很常见。为了避免每次都要手写 SVG，我们可以使用 npm 包 react-easy-svgs，它可以帮助我们更便捷地使用 SVG 图标。本文将详细介绍这个 npm 包的使用方法，并提供代码示例。
安装
我们可以使用 npm 或 yarn 进行安装。打开命令行工具，输入以下命令：
--- ------- ---------------
或
---- --- ---------------
基本用法
在使用前，我们需要先导入组件：
------ - ------- - ---- ------------------
然后，我们就可以在 JSX 中使用 <SvgIcon> 组件了。例如：
-------- -------------- ---------- ----------- --
这会在页面上显示一个名为 example 的 SVG 图标，宽度为 64px，高度为 64px。具体的实现过程是：react-easy-svgs 会从 node_modules 中的 react-easy-svgs/icons 文件夹中查找名为 example.svg 的图标。如果找到，就使用该图标，否则会在控制台输出警告信息。
我们也可以通过 color 属性来设置图标颜色：
-------- -------------- ---------- ----------- ----------- --
此时，图标的颜色将被设置为红色。
高级用法
自定义图标
如果 react-easy-svgs 中没有我们需要的图标，那么就需要自己编写 SVG 代码并将其导入为一个自定义图标。打开 node_modules/react-easy-svgs/icons/index.js 文件，我们可以在该文件中查看所有默认支持的图标列表，并了解它们的引用方式。
例如，我们可以自己手动添加一个名为 custom 的图标。在 node_modules/react-easy-svgs/icons 文件夹中添加一个名为 custom.svg 的 SVG 文件，然后在 index.js 文件中增加一行代码：
------ - -------------- -- ---------- - ---- ---------------
这里使用了 React 的内置组件 ReactComponent 来导入 SVG 文件，这样即可将其作为 React 组件使用。
然后，我们就可以在 JSX 中使用 <SvgIcon> 组件，并将 name 属性设置为 custom：
-------- ------------- ---------- ----------- --
自定义图标属性
如果我们想要为 SVG 图标添加自定义属性，可以将这些属性传递给 <SvgIcon> 组件。例如：
-------- -------------- ---------- ----------- ----------- ------------------------- -------------------------- --
如上代码将会添加以下属性：
className: CSS 类名aria-label: 可访问性标签
示例代码
下面是一个完整的示例，展示了如何使用 react-easy-svgs 包。该示例将在页面上显示两个图标，一个是 example，颜色为绿色，另一个是自定义图标 custom，使用了自定义属性 aria-label。
------ ----- ---- --------
------ - ------- - ---- ------------------
------ - -------------- -- ---------- - ---- ---------------
-------- ----- -
------ -
-----
-------- -------------- ---------- ----------- ------------- --
--------
----------------------
----------
-----------
-------------------------
--
------
--
-
------ ------- ----结论
react-easy-svgs 可以为我们节省编写 SVG 代码的时间，使我们在开发中更便捷地使用 SVG 图标。在使用时，我们需要学会如何导入组件、使用基本属性和自定义属性、添加自定义图标等。掌握这些，可以让我们快速地使用 SVG 图标，并在前端开发中取得更好的效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005725781e8991b448e8717