<div data-theme-toc="true"> </div>
Hola 
Este tema contiene dos componentes temáticos.
Discourse Easy SVG Icon CSS
Este componente temático funciona como una plantilla, por favor, hazle fork en Github o usa el código en tu proyecto. Puedes eliminar los códigos SVG de los iconos del SCSS y quedarte solo con los que realmente uses… He importado el archivo
mixinal archivocommon.scsspara que puedas añadir tu código debajo de esa línea o por separado en la sección de escritorio o móvil.
El componente temático añade la capacidad de mantener los iconos SVG de forma mantenible y fácilmente editable en tu CSS. El componente contiene todos los iconos SVG que se encuentran aquí: discourse/vendor/assets/svg-icons/fontawesome at main · discourse/discourse · GitHub
¿Cómo usar?
Parámetros fijos:
$icon-set: brands, regular, solid
$icon-name: nombre del icono
$icon-color: color del icono (currentColor, hexadecimal o variable de color)
$width y $height: el tamaño del icono añadido
Se ve así:
@include svg-icon($icon-set, $icon-name, $icon-color, $width, $height);
Usando currentColor
Aquí tienes un ejemplo para añadir un icono de cohete sólido antes del elemento de navegación Latest.
#navigation-bar {
li.nav-item {
&_latest {
a {
gap: 0.5em;
&:before {
content: "";
@include svg-icon(solid, rocket, currentColor, 1em, 1em);
}
}
}
}
}
Usando la variable de color var(--gold)
Aquí tienes un ejemplo para añadir un icono de estrella regular dorado antes del elemento de navegación Top.
#navigation-bar {
li.nav-item {
&_top {
a {
gap: 0.5em;
&:before {
content: "";
@include svg-icon(regular, star, var(--gold), 1em, 1em);
}
}
}
}
}
Podemos cambiar fácilmente el conjunto de iconos, el color o incluso el icono al pasar el ratón por encima, etc… ¡Veamos!
Ahora cambiamos el icono regular a sólido cuando pasamos el ratón por encima del botón.
#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
mixinal archivocommon.scsspara que puedas añadir tu código debajo de esa línea o por separado en la sección de escritorio o móvil.
¿Cómo usar?
El uso es similar a la versión SVG.
Parámetros fijos:
$emoji-set: apple, google, twitter, win10, google_classic, facebook_messenger
$emoji-name: nombre del emoji
$width y $height: el tamaño del emoji añadido
@include emoji($emoji-set, $emoji-name, $width, $height);
Aquí tienes un ejemplo para añadir un emoji de cohete facebook_messenger antes del elemento de navegación Latest y un emoji de estrella twitter antes del elemento de navegación 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);
}
}
}
}
}
¿Funcionó finalmente para ti? ¿Hay algún caso de uso específico en el que quieras usar esto? Si compartes algunos detalles, puedo crear un componente temático separado basado en esto, donde se pueda modificar fácilmente con la configuración.
.
