原文：How to Create Reusable SVG Icon React Components，作者：Dillion Megida

我们在构建前端应用程序时经常使用图标——用于指示、指针等。这篇文章会介绍如何为图标创建一个可重用的 React 组件。

谈到图标，你可以使用 PNG 或 SVG 图像。PNG 有固定的颜色，但允许改变尺寸（像普通的图片）。在某些情况下，这改变了图像的质量。

另一方面，SVG 无论大小都有更好的质量，而且即使在下载后，颜色也是可以定制的。

但你可能同意我的观点，即当涉及到可定制性时，SVG 可能是一种痛苦。

在这篇文章中，我将向你展示我目前如何去创建可定制的 SVG 图标作为 React 组件。

如何下载图标

我通常从 Remixicon 下载我使用的图标。我还没有试过其他的图标库，所以如果你使用不同的库，本文中的步骤可能适用也可能不适用。

我过去曾与一位客户合作，他在 Figma 上创建了自定义图标。我应用了这一步骤中分享的解决方案，它也适用于大多数图标。所以，即使你不使用 Remixicon，也可以跟着做 :)

在 Remixicon 上，我选择一个我喜欢的图标，选择大小为 18px，并选择复制 SVG。

image-154

我把颜色定为黑色。如果你选择一个不同的颜色，它可能会与你以后提供的指定颜色发生冲突。所以最好让它保持黑色，这是 SVG 的默认颜色。

如何创建 React 组件

然后我把 SVG 粘贴到一个文件中，比如说，带有以下代码的 home-line.js：

import React from 'react'

export default function HomeLine() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18">
      <path fill="none" d="M0 0h24v24H0z"/>
      <path d="M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.49a1 1 0 0 1 .386-.79l8-6.222a1 1 0 0 1 1.228 0l8 6.222a1 1 0 0 1 .386.79V20zm-2-1V9.978l-7-5.444-7 5.444V19h14z"/>
    </svg>
  )
}

现在，它使用来自 Remixicon 的默认颜色和尺寸。我将添加两个 prop 来修改这个组件：size 和 color。

svg 元素有四个属性：xmlns、viewBox、width 和 height。我将使用 size prop 来修改 width 和 height 的值。然后，我将添加一个额外的属性，fill，我将用它来做 color prop。

下面是更新后的组件：

import React from 'react'

export default function HomeLine({
  size = 18, // or any default size of your choice
  color = "black" // or any color of your choice
}) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width={size} // added size here
      height={size} // added size here
      fill={color} // added color here
    >
      <path fill="none" d="M0 0h24v24H0z"/>
      <path d="M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.49a1 1 0 0 1 .386-.79l8-6.222a1 1 0 0 1 1.228 0l8 6.222a1 1 0 0 1 .386.79V20zm-2-1V9.978l-7-5.444-7 5.444V19h14z"/>
    </svg>
  )
}

我让 viewBox 保持原样。现在我可以像这样使用这个组件：

<HomeLine size={100} color="purple" />
<HomeLine size={50} color="red" />
<HomeLine size={30} color="green" />
image-155

如果你使用一个非正方形的图标，你需要特别提供 width 和 height prop 来相应地改变这两个属性。

总结

我知道 Remixicon 没有你可能需要的每一个图标，当你在使用设计系统时，你可能会得到一些自定义的图标。

但这里分享的想法是你可以在你工作的任何库中尝试的。如果你这样做，我很想听听你尝试的经验。

如果你喜欢这篇文章并认为它有帮助，请分享给朋友们 :)