<div data-theme-toc="true"> </div>
你好 
此主题包含两个主题组件。
Discourse Easy SVG Icon CSS
此主题组件可作为模板使用，请在 Github 上分叉或将代码用于您的项目。您可以从 SCSS 中删除图标 SVG 代码，只保留您实际使用的代码……我已将
mixin文件导入common.scss文件，因此您可以在该行下方或单独添加到桌面或移动部分。
该主题组件增加了在 CSS 中维护和轻松编辑 SVG 图标的功能。该组件包含此处找到的所有 SVG 图标：discourse/vendor/assets/svg-icons/fontawesome at main · discourse/discourse · GitHub
如何使用？
固定参数：
$icon-set: brands, regular, solid
$icon-name: 图标名称
$icon-color: 图标颜色（currentColor、十六进制或颜色变量）
$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);
}
}
}
}
}
你最终成功了吗？你有什么想使用它的特定用例吗？如果你分享一些细节，我可以基于此创建一个单独的主题组件，可以轻松地通过设置进行修改。
。
