npm 包 react-easy-svgs 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，图标的使用很常见。为了避免每次都要手写 SVG，我们可以使用 npm 包 react-easy-svgs，它可以帮助我们更便捷地使用 SVG 图标。本文将详细介绍这个 npm 包的使用方法，并提供代码示例。

安装

我们可以使用 npm 或 yarn 进行安装。打开命令行工具，输入以下命令：

npm install react-easy-svgs

或

yarn add react-easy-svgs

基本用法

在使用前，我们需要先导入组件：

import { SvgIcon } from 'react-easy-svgs';

然后，我们就可以在 JSX 中使用 <SvgIcon> 组件了。例如：

<SvgIcon name="example" width={64} height={64} />

这会在页面上显示一个名为 example 的 SVG 图标，宽度为 64px，高度为 64px。具体的实现过程是：react-easy-svgs 会从 node_modules 中的 react-easy-svgs/icons 文件夹中查找名为 example.svg 的图标。如果找到，就使用该图标，否则会在控制台输出警告信息。

我们也可以通过 color 属性来设置图标颜色：

<SvgIcon name="example" width={64} height={64} color="red" />

此时，图标的颜色将被设置为红色。

高级用法

自定义图标

如果 react-easy-svgs 中没有我们需要的图标，那么就需要自己编写 SVG 代码并将其导入为一个自定义图标。打开 node_modules/react-easy-svgs/icons/index.js 文件，我们可以在该文件中查看所有默认支持的图标列表，并了解它们的引用方式。

例如，我们可以自己手动添加一个名为 custom 的图标。在 node_modules/react-easy-svgs/icons 文件夹中添加一个名为 custom.svg 的 SVG 文件，然后在 index.js 文件中增加一行代码：

import { ReactComponent as CustomIcon } from './custom.svg';

这里使用了 React 的内置组件 ReactComponent 来导入 SVG 文件，这样即可将其作为 React 组件使用。

然后，我们就可以在 JSX 中使用 <SvgIcon> 组件，并将 name 属性设置为 custom：

<SvgIcon name="custom" width={64} height={64} />

自定义图标属性

如果我们想要为 SVG 图标添加自定义属性，可以将这些属性传递给 <SvgIcon> 组件。例如：

<SvgIcon
  name="example"
  width={64}
  height={64}
  color="red"
  className="example-class"
  aria-label="example-label"
/>

如上代码将会添加以下属性：

className: CSS 类名
aria-label: 可访问性标签

示例代码

下面是一个完整的示例，展示了如何使用 react-easy-svgs 包。该示例将在页面上显示两个图标，一个是 example，颜色为绿色，另一个是自定义图标 custom，使用了自定义属性 aria-label。

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ------------------
------ - -------------- -- ---------- - ---- ---------------

-------- ----- -
  ------ -
    -----
      -------- -------------- ---------- ----------- ------------- --
      --------
        ----------------------
        ----------
        -----------
        -------------------------
      --
    ------
  --
-

------ ------- ----

结论

react-easy-svgs 可以为我们节省编写 SVG 代码的时间，使我们在开发中更便捷地使用 SVG 图标。在使用时，我们需要学会如何导入组件、使用基本属性和自定义属性、添加自定义图标等。掌握这些，可以让我们快速地使用 SVG 图标，并在前端开发中取得更好的效果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005725781e8991b448e8717