<div data-theme-toc="true"> </div>
Olá 
Este tópico contém dois componentes de tema.
Discourse Easy SVG Icon CSS
Este componente de tema funciona como um modelo, por favor, faça um fork no Github ou use o código em seu projeto. Você pode remover os códigos svg dos ícones do SCSS e manter apenas aqueles que você realmente usa… Importei o arquivo
mixinpara o arquivocommon.scss, então você pode adicionar seu código abaixo dessa linha ou separadamente na seção desktop ou mobile.
O componente de tema adiciona a capacidade de manter o ícone SVG de forma sustentável e facilmente editável em seu CSS. O componente contém todos os ícones svg encontrados aqui: discourse/vendor/assets/svg-icons/fontawesome at main · discourse/discourse · GitHub
Como usar?
Parâmetros fixos:
$icon-set: brands, regular, solid
$icon-name: nome do ícone
$icon-color: cor do ícone (currentColor, hex ou variável de cor)
$width e $height: o tamanho do ícone adicionado
Parece com isto:
@include svg-icon($icon-set, $icon-name, $icon-color, $width, $height);
Usando currentColor
Aqui está um exemplo de como adicionar um ícone de foguete sólido antes do item de navegação Latest.
#navigation-bar {
li.nav-item {
&_latest {
a {
gap: 0.5em;
&:before {
content: "";
@include svg-icon(solid, rocket, currentColor, 1em, 1em);
}
}
}
}
}
Usando a variável de cor var(--gold)
Aqui está um exemplo de como adicionar um ícone de estrela regular dourada antes do item de navegação Top.
#navigation-bar {
li.nav-item {
&_top {
a {
gap: 0.5em;
&:before {
content: "";
@include svg-icon(regular, star, var(--gold), 1em, 1em);
}
}
}
}
}
Podemos facilmente mudar o conjunto de ícones, a cor ou até mesmo o ícone em hover, etc… Vamos ver!
Agora mudamos o ícone regular para sólido quando passamos o mouse sobre o botão.
#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
mixinpara o arquivocommon.scss, então você pode adicionar seu código abaixo dessa linha ou separadamente na seção desktop ou mobile.
Como usar?
O uso é semelhante à versão SVG.
Parâmetros fixos:
$emoji-set: apple, google, twitter, win10, google_classic, facebook_messenger
$emoji-name: nome do emoji
$width e $height: o tamanho do emoji adicionado
@include emoji($emoji-set, $emoji-name, $width, $height);
Aqui está um exemplo de como adicionar um emoji rocket do facebook_messenger antes do item de navegação Latest e um emoji star do twitter antes do item de navegação Top.
#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);
}
}
}
}
}
Funcionou finalmente para você? Existe algum caso de uso específico em que você queira usar isso? Se você compartilhar alguns detalhes, posso criar um componente de tema separado com base nisso, onde ele pode ser facilmente modificado com configurações.
.
