DiscourseのデフォルトのSVGアイコンは、1つずつ、または全体として、独自のカスタムSVGに置き換えることができます。これらはテーマまたはテーマコンポーネント内でオーバーライドできます。
ステップ 1 - SVGスプライトシートの作成
始めるにあたり、まずSVGスプライトシートを作成する必要があります。これには、1つの追加カスタムSVGアイコンから、数百個に及ぶ完全な置き換えセットまで、何でも含めることができます。
スプライトシートはSVGファイルとして保存してください。基本的には、元のSVGアイコンファイルの<svg>タグの内容を<symbol>タグにネストし、適切な識別子（ID）を付与します。
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="my-theme-icon-1">
<!--
ソースSVGアイコンファイルの<svg>タグ内のコード
通常、これは<svg>タグの間にあるすべての要素です
（ただし、<svg>タグ自体は除外し、上記の<symbol>に置き換えられます）
属性（例: ViewBox="0 0 0 0"）を<symbol>タグに移すことができます
-->
</symbol>
<symbol id="my-theme-icon-2">
<!-- ここにSVGコードを記述します。必要に応じて<symbol>ブロックを追加してください。
-->
</symbol>
</svg>
-
スプライトシート内の各シンボルにカスタムIDを追加してください。精神衛生のため、IDにテーマ名（例:
my-theme-icon）をプレフィックスとして付けるのがおすすめです。 -
既存のアイコンと同様に、アイコンの色を動的に変更できるようにするには、ハードコードされた色（例: #333）ではなく、fillを
currentColorに設定してください。 -
アイコンをスケーリングしたり、正しく中央揃えにしたりするには、
<symbol>タグにviewBox属性を使用してください。詳細は How to Scale SVG | CSS-Tricks を参照してください。 -
SVG内のスタイルの競合に注意してください。例えば、SVGには
.st0{fill:#FF0000;}のようなインラインスタイルが定義されていることがよくあります。複数のSVGが同じクラスを使用している場合、問題が発生する可能性があります（これらの問題を修正するには、各アイコン固有のユニークなクラス名に変更してください）。 -
アイコンが多い場合、これを自動化する方法があります。 https://www.npmjs.com/package/svg-sprite-generator は、SVGをスプライトシートに結合するためのシンプルなコマンドラインツールです。
例 - 単一のカスタムアイコンのスプライトシート
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="bat-icon" viewBox="6 6 36 36">
<path
fill="currentColor"
d="M24,18.2c0.7,0,0.9,0.2,0.9,0.2l0.4-1.7c0,0,0.4,1.5,0.4,2.8c0.2,1.1,2.2,0.4,3.9,0C31.4,19.1,32,16,32,16h16c0,0-9.4,3.5-7,10c0,0-14.8-2-17,7l0,0c-2.2-9-17-7-17-7c2.4-6.5-7-10-7-10h16c0,0,0.6,3.1,2.3,3.5c1.7,0.4,3.9,1.1,3.9,0c0.2-1.1,0.4-2.8,0.4-2.8l0.4,1.7C23.1,18.4,23.4,18.2,24,18.2L24,18.2L24,18.2z"
/>
</symbol>
</svg>
ステップ 2 - スプライトシートをテーマに追加
スプライトシートが作成できたら、SVGファイルをコンポーネント/テーマに追加する必要があります。UI経由で行うことも、コンポーネント/テーマにハードコードすることも可能です。
インストールされているコンポーネント/テーマにアップロードすると、
<symbol>タグのIDを使用してインスタンス全体で使用できるようになります。
UI経由
テーマ/コンポーネント設定の「アップロード」セクションに移動し、SCSS変数名をicons-spriteとしてスプライトファイルを追加してください：
テーマ/コンポーネントにハードコード
スプライトシートファイルをテーマの/assetsフォルダに追加します。次に、ルートフォルダのassets.jsonファイルを更新してください。
my-icons.svgというSVGスプライトの場合、about.jsonには以下を含める必要があります：
"assets": {
"icons-sprite": "/assets/my-icons.svg"
}
ステップ 3（任意） - デフォルトアイコンのオーバーライド
スプライトシートが設定されたら、Discourseにアイコンの置き換えを指示できます。api-initializerから実行する方法は以下の通りです：
// {theme}/javascripts/discourse/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
api.replaceIcon("bars", "my-theme-icon-bars");
api.replaceIcon("link", "my-theme-icon-link");
// 以下同様に
});
最初のID（bars）はDiscourseのデフォルトアイコンIDであり、2番目は置き換えアイコンのIDです。アイコンのIDを見つける最も簡単な方法は、ブラウザでアイコンを検査することです。
ここでは、アイコン名がd-icon-プレフィックスに従っています。したがって、この例ではd-unlikedになります。
私たちのアイコンの多くは https://fontawesome.com/ のアイコン名に従っていますが、例外もあります（そのため、インスペクタでIDを確認するのが最も信頼できる方法です）。すべての例外は、GitHub上の const REPLACEMENTS ブロックで確認できます。
以上です。これで、Discourseを独自のカスタムアイコンでスタイル化できます！
このドキュメントはバージョン管理されています - 変更提案は GitHub でお願いします。
