为每一个svg图标创建一个vue组件是不是错了？

Question

我喜欢在我的项目中使用 inline svg，因为它让我可以很好地控制 宽度、高度、填充颜色、描边宽度和描边颜色 使用 css 和 js（道具）。我通常为每个 SVG 图标创建一个 vue.js SFC (single file component)。这是一个例子：

<!-- IconsArrowRight.vue -->
<template>
  <svg
    viewBox="0 0 14 14"
    fill="currentColor"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M7.57026 0.888947L5.98842 2.46006L9.4199 5.89117L0.333374 5.89117L0.333374 8.10895H9.4199L5.98842 11.5401L7.57026 13.1112L13.6681 7.00006L7.57026 0.888947Z"
    />
  </svg>
</template>

然后我会像这样使用它（我正在使用 tailwindCSS 进行样式设置）：

<template>
  <div>
    <IconsArrowRight class="w-8 h-8 text-blue-500" />
  </div>
</template>

我在我的项目中使用了 50 多个图标，并且我为每个图标创建了一个 vue.js 组件；仅针对图标拥有如此多的组件对于生产性能来说是一种不好的做法吗？我应该改用 font-icons 还是其他替代方法？

Answer 1

最有可能从性能方面使用 svg 作为组件或字体图标，我根本不会考虑任何问题。 Vue.js 是一个可用于大型应用程序的框架，您的组件一点也不重，它们只是使用 SVG。

我个人的偏好是像您提到的那样用作字体图标，并使用一个组件作为道具传递给字体图标，因此通过这种方式，所有 svg 将拥有 1 个组件。

关于样式，再次使用道具传递所有样式并将该道具与 :class

绑定

我认为这样会更干净，

干杯

Answer 2

将一个 .vue 文件用于一个 .svg 在我看来完全没问题。它不会产生任何大的影响 performance-wise，只是在构建您的应用程序时可能需要更长的时间，但在我看来没有那么重要。
此外，以这种方式使用它可以在某些关于 HTML 规范方面具有相当大的灵活性。

现在，关于有史以来最好的方法，我可能会说使用 @unocss/preset-icons or any package based on Iconify 只是因为它会为您提供所有可用的和可以想象的图标，没有缺点并且非常灵活 +不错的DX.
这里 an article 分为 4 个部分，将解释此方法背后的所有推理以及如何将其普遍集成到任何解决方案（即使不使用 Antfu 的解决方案）。

为每一个svg图标创建一个vue组件是不是错了？

Is it wrong to create a vue component for every svg icon?

vue.js

svg

nuxt.js