<div data-theme-toc="true"> </div>
こんにちは 
このトピックには2つのテーマコンポーネントが含まれています。
Discourse Easy SVG Icon CSS
このテーマコンポーネントはテンプレートとして機能します。Githubでフォークするか、コードをプロジェクトで使用してください。SCSSからSVGアイコンコードを削除し、実際に使用するものだけを残すことができます…
mixinファイルをcommon.scssファイルにインポートしたので、その行の下、またはデスクトップまたはモバイルセクションに個別にコードを追加できます。
このコンポーネントは、SVGアイコンを保守可能でCSSで簡単に編集できるようにする機能を追加します。コンポーネントには、ここで見つかるすべてのSVGアイコンが含まれています: discourse/vendor/assets/svg-icons/fontawesome at main · discourse/discourse · GitHub
使用方法？
固定パラメータ：
$icon-set: brands, regular, solid
$icon-name: アイコン名
$icon-color: アイコンの色 (currentColor、16進数またはカラー変数)
$width および $height: 追加するアイコンのサイズ
次のように表示されます：
@include svg-icon($icon-set, $icon-name, $icon-color, $width, $height);
currentColor を使用する
以下は、Latest ナビゲーションバー項目の前にソリッドロケットアイコンを追加する例です。
#navigation-bar {
li.nav-item {
&_latest {
a {
gap: 0.5em;
&:before {
content: "";
@include svg-icon(solid, rocket, currentColor, 1em, 1em);
}
}
}
}
}
var(--gold) カラー変数を使用する
以下は、Top ナビゲーションバー項目の前にレギュラーゴールドスターアイコンを追加する例です。
#navigation-bar {
li.nav-item {
&_top {
a {
gap: 0.5em;
&:before {
content: "";
@include svg-icon(regular, star, var(--gold), 1em, 1em);
}
}
}
}
}
アイコンセット、色、さらにはホバー時のアイコンなども簡単に変更できます…見てみましょう！
ここで、ボタンをホバーしたときにレギュラーアイコンをソリッドに変更します。
#navigation-bar {
li.nav-item {
&_top {
a {
gap: 0.5em;
&:hover,
&:focus,
&.active {
&:before {
@include svg-icon(solid, star, currentColor, 1em, 1em);
}
}
&:before {
content: "";
@include svg-icon(regular, star, currentColor, 1em, 1em);
}
}
}
}
}
Discourse Easy Emoji CSS
mixinファイルをcommon.scssファイルにインポートしたので、その行の下、またはデスクトップまたはモバイルセクションに個別にコードを追加できます。
使用方法？
使い方はSVGバージョンと似ています。
固定パラメータ：
$emoji-set: apple, google, twitter, win10, google_classic, facebook_messenger
$emoji-name: 絵文字名
$width および $height: 追加する絵文字のサイズ
@include emoji($emoji-set, $emoji-name, $width, $height);
以下は、Latest の前に facebook_messenger の rocket 絵文字を、Top の前に twitter の star 絵文字を追加する例です。
#navigation-bar {
li.nav-item {
&_latest {
a {
gap: 0.5em;
&:before {
content: "";
@include emoji(facebook_messenger, rocket, 1em, 1em);
}
}
}
&_top {
a {
gap: 0.5em;
&:before {
content: "";
@include emoji(twitter, star, 1em, 1em);
}
}
}
}
}
最終的にうまくいきましたか？ これを使用したい特定のユースケースはありますか？ 詳細を共有していただければ、設定で簡単に変更できるテーマコンポーネントを別途作成できます。
