Discourse のデフォルトの SVG アイコンは、テーマまたはテーマコンポーネント内で個別に、または全体をカスタム SVG に置き換えて上書きできます。こちらを参照してください。
ステップ 1 - SVG スプライトシートの作成
始めるには、SVG スプライトシートを作成する必要があります。これには、単一の追加のカスタム SVG アイコンから、何百もの完全な置き換えセットまで、あらゆるものを格納できます。
スプライトシートは SVG ファイルとして保存する必要があります。原則として、元の SVG アイコンファイルから <svg> タグの内容を <symbol> タグ内にネストし、それらに適切な識別子を付けます。
<?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> タグ間のすべてです
(ただし、上記の <symbol> に置き換えられる SVG タグ自体は除く)
ViewBox="0 0 0 0" などの属性はすべて <symbol> タグに転送できます
-->
</symbol>
<symbol id="my-theme-icon-2">
<!-- ここに SVG コード。必要に応じて <symbol> ブロックを追加します。
-->
</symbol>
</svg>
-
スプライトシート内の各シンボルにカスタム ID を追加するようにしてください。テーマ名をプレフィックスとして ID に付けると、わかりやすくなるでしょう（例:
my-theme-icon）。 -
アイコンの色を既存のアイコンのように動的にするには、ハードコードされた色（#333 など）ではなく、
currentColorにfillを設定します。 -
アイコンのサイズ変更や正確な中央揃えを行うには、
<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 です。Discourse のアイコンの ID を見つける最も簡単な方法は、ブラウザでそのアイコンを調べることです。
ここでは、アイコン名は d-icon- プレフィックスに従います。したがって、この例では d-unliked です。
ほとんどのアイコンは https://fontawesome.com/ のアイコン名に従いますが、例外もあります（そのため、インスペクタで ID を確認するのが最も信頼できる方法です）。例外はすべて、こちらの github の const REPLACEMENTS ブロックで確認できます。
これで完了です。独自のカスタムアイコンで Discourse をスタイル設定できるようになりました！
このドキュメントはバージョン管理されています - 変更の提案はgithub で行えます。
