Tag Iconsでのカスタムアイコン使用時の問題

[kristof_mulier]

@pmusaraj さん、こんにちは。

Tag icons theme コンポーネントをインストールしました。現在の設定は以下の通りです：

Font Awesome アイコンを紐付けた 3 つのタグを定義しました：

• bug-showstopper を skull-crossbone に紐付け
• bug-major を exclamation-triangle に紐付け
• bug-minor を exclamation-circle に紐付け

これらは問題なく動作しています。しかし、4 つ目のタグ 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 さん、ありがとうございます！
あなたは最高です