如何使用 react-svg 创建高度可重用的 Icon 组件

有更好的方法

赋予它一些风格

您知道， SVG 的速度非常快，而且易于访问。

SVG 在 webdev 中最酷的事情是 CSS 可以简单地与它协同工作，因此你可以执行以下操作：

path {
  fill: red;
}

然后，你的图标就变成红色了。

需要放大或缩小吗？SVG 中的 S 代表“可缩放”，所以你可以直接把图标放大到浏览器可以处理的大小。

svg {
  width: 33554400px;
  height: 33554400px;
}

然而，我们可能在这里遇到了一个问题，这篇文章是关于 React 的，但在 React 中单独导入 SVG 文件很麻烦……😩

有更好的方法

您可以使用名为 的库，将 SVG 的 CSS 样式功能与 React 组件结合使用react-svg。该库的工作原理是获取、缓存和内联 SVG 图标，因此您只需担心它们的样式设置。

这是有关如何创建图标组件的分步指南，相信我，使用它真的很愉快。

1 - 创建一个 /icons 文件夹，并将所有你喜欢的图标塞进去

2 - 创建一个包装 ReactSVG 的 Icon 组件：

import React from "react";
import ReactSVG from "react-svg";

const Icon = (props) => {
  return <ReactSVG src="YOUR_PATH/icons/${props.name}.svg" />;
}

export default Icon;

3-导入您的 Icon 组件并像这样使用它：

import React from "react";
import Icon from "./Icon";

const IconList = () {
  return (
    <div>
      <Icon name="user" />
      <Icon name="calendar" />
      <Icon name="phone" />
      <Icon name="email" />
    </div>
  );
}

export default IconList;

你能体会到它的美妙之处吗？每次需要新图标时，再也不用费力地导入图标了。只需将文件添加到图标文件夹，将其名称作为 prop 传递给全新的 Icon 组件，一切就绪了。

现在，让我们进一步了解这个 Icon 组件，并使其更加有用。

赋予它一些风格

你看到我们是如何使用nameprop 来获取正确的图标文件的了吗？我们也可以做同样的事情来选择正确的图标颜色和大小。

我们所需要的是一个 CSS-in-JS 库来充当我们的 SVG 文件和 Icon 组件之间的粘合剂，在下面的示例中使用 Styled Components，但任何其他库都可以。

来，看看吧。嵌入空间非常有限，所以请随意点击“打开沙盒”按钮，玩一会儿，记得回来。🙂

是不是很棒？我最喜欢这种方法的地方在于，经过一些初始设置后，添加新图标就像将 SVG 文件拖到图标文件夹一样简单。而且，能够直接在组件属性中设置样式，这绝对是一大亮点。

就这样！感谢Unsplash 上Harpal Singh提供的封面照片。

如果您对该示例有任何疑问，请在评论中分享！

嘿，我们联系吧👋

在 Twitter 上关注我并告诉我您喜欢这篇文章！

如果你真的喜欢它，请务必与你的朋友分享，这会对我有很大帮助😄