Привет 
Эта тема содержит два компонента темы.
Discourse Easy SVG Icon CSS
Этот компонент темы работает как шаблон; пожалуйста, форкните его на GitHub или используйте код в своем проекте. Вы можете удалить коды SVG иконок из SCSS и оставить только те, которые вы действительно используете… Я импортировал файл
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, hex или переменная цвета)
$width и $height: размер добавляемой иконки
Это выглядит так:
@include svg-icon($icon-set, $icon-name, $icon-color, $width, $height);
Использование currentColor
Вот пример добавления твердой иконки ракеты перед элементом навигационной панели Последние.
#navigation-bar {
li.nav-item {
&_latest {
a {
gap: 0.5em;
&:before {
content: "";
@include svg-icon(solid, rocket, currentColor, 1em, 1em);
}
}
}
}
}
Использование переменной цвета var(--gold)
Вот пример добавления обычной иконки золотой звезды перед элементом навигационной панели Лучшие.
#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);
Вот пример добавления эмодзи rocket из набора facebook_messenger перед элементом Последние и эмодзи star из набора twitter перед элементом Лучшие навигационной панели.
#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);
}
}
}
}
}
У тебя наконец-то всё получилось? Есть ли какой-то конкретный сценарий использования, для которого ты хочешь это применить? Если ты поделится деталями, я могу создать отдельный компонент темы на основе этого, который будет легко настраиваться через параметры.
.
