如何创建可重用的 SVG 图标 React 组件

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第22天，点击查看活动详情。

我们在构建前端应用程序时一直使用图标——用于指示、指针等。以下是如何为图标创建可重用的 React 组件。

对于图标，你可以使用 PNG 或 SVG 图像。PNG 带有固定颜色，但允许更改尺寸（如常规图像）。在某些情况下，这会改变图像的质量。

另一方面，无论大小如何，SVG 都具有更好的质量，并且即使在下载后颜色也可以自定义。

但是你可能同意我的观点，即 SVG 在可定制性方面可能会很痛苦。

在本文中，我将向你展示我目前如何将可自定义的 SVG 图标创建为 React 组件。

如何下载图标

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

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

在 Remixicon 上，我选择一个我选择的图标，选择 size 18px，然后选择Copy SVG。

我将颜色保留为黑色。如果你选择不同的颜色，可能会与你稍后提供的指定颜色发生冲突。所以最好让它保持黑色，这是 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 的默认颜色和大小。我将添加两个道具来修改这个组件：size和color.

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

这是更新的组件：``` 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="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 > ) }

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

```

如果你使用非方形图标，则必须专门提供widthandheight属性以相应地更改这两个属性。

结论

希望可以帮助到你