使用自定义图标时遇到 Tag Icons 问题

[kristof_mulier]

你好 @pmusaraj，
我已安装了 Tag 图标主题组件。这是我当前的设置：

我已定义了三个标签，分别关联到 Font Awesome 图标：

• bug-showstopper 关联到 skull-crossbone
• bug-major 关联到 exclamation-triangle
• bug-minor 关联到 exclamation-circle

这些都能正常工作。然而，当我尝试将第四个标签 beetle 关联到我上传的 SVG 文件 beetle-face.svg 时，却无法成功。

我该如何正确地将自己的 SVG 文件关联到标签？请逐步指导我。我确实是 Discourse 的新手（今天刚注册），并且在 Web 技术方面的背景有限。
非常感谢

[pmusaraj (Penar Musaraj)]

你好 @kristof_mulier，欢迎加入 Discourse！

以下是添加自定义图标的方法：

@pmusaraj

添加自定义图标

如果您需要比 FontAwesome 中提供的更多图标，可以在插件或主题中添加自己的 SVG 图标。请参阅 此 SVG 精灵图 以了解如何构建您的精灵图。（它本质上是一个包含各自唯一 ID 的 <symbol> 元素列表。）

在主题和组件中：将 SVG 精灵图添加到 /assets 文件夹中，并在 about.json 中使用变量名 icons-sprite 进行引用。对于一个名为 my-icons.svg 的精灵图，您的 assets.json 应包含以下内容：

"assets": {
   "icons-sprite": "/assets/my-icons.svg"
}

您也可以通过 UI 将 SVG 精灵图添加到主题或组件中。这样做时，请确保 SCSS 变量名设置为 icons-sprite。截图如下：

基本上，您需要将 SVG 图标添加到精灵图中，为其分配一个 ID，然后将该精灵图添加到主题中，并将其变量名设置为 icons-sprite。完成后，您就可以像使用 FA 图标 ID 一样使用该图标的 ID（请勿使用 $ 符号）。

[kristof_mulier]

太棒了，这效果非常好！
感谢 @pmusaraj！
你太棒了