Ver también: We're upgrading our icons to Font Awesome 6!
Pronto fusionaremos en master una rama que actualiza Discourse a Font Awesome 5.5.0 (la versión gratuita) y cambia al uso de iconos SVG en lugar de una fuente de iconos. Este es un cambio sustancial, con muchos beneficios y un cambio significativo para los desarrolladores.
Aquí tienes un resumen rápido de los cambios:
- El uso de iconos SVG proporcionará iconos más nítidos, mejorará la accesibilidad y facilitará la personalización; consulta este artículo de GitHub para más detalles.
- Dado que el conjunto de iconos de Font Awesome ha crecido a más de 1300 iconos en la versión 5, hemos creado una API interna que entrega a los clientes un subconjunto de todos los iconos de FA, es decir, solo aquellos iconos utilizados por esa instancia de Discourse.
- Afortunadamente, el subconjunto tiene un tamaño de archivo menor: ya se está ejecutando aquí en Meta y tiene solo 27.5 kb, frente a los 75.7 kb de la fuente de iconos FA 4.7.
- Los complementos y temas (incluidos los componentes de tema) pueden agregar iconos FA adicionales al conjunto.
- Los iconos de insignias y de grupo se incluirán automáticamente en el conjunto, y los administradores del sitio también pueden usar una nueva configuración del sitio llamada
svg icon subsetpara registrar sus iconos elegidos y agregarlos al subconjunto de su sitio. - Cambio disruptivo: los desarrolladores de complementos y temas ya no pueden usar
<i class="fa fa-icon"></i>ni anular los selectores pseudo:beforepara referenciar o reemplazar iconos; ahora deben reemplazarse usando funciones de Discourse que inyectan SVG en la página.
A continuación, encontrarás instrucciones sobre cómo actualizar los complementos y temas para usar iconos del nuevo conjunto.
¿Qué hay de nuevo en Font Awesome 5?
Font Awesome 5 ha introducido muchos nuevos iconos, pero también algunos cambios en la nomenclatura. Para una discusión completa de los cambios, consulta la documentación de actualización de Font Awesome. El cambio principal es que los iconos en FA ahora vienen en estilos separados. Hay tres estilos:
- sólido (predeterminado) –
fas - regular –
far - marcas –
fab
Para los estilos regular o de marcas, FA 5 introduce nuevos prefijos de clase: “far” y “fab”, respectivamente. Para usar un icono de los estilos regular o de marcas, debemos usar esta nueva convención de nomenclatura: "far fa-address-book" o "fab fa-facebook". (Los iconos sólidos pueden referenciarse simplemente como antes: “fa-nombre-del-icono”).
Para permitir agrupar los tres estilos en un solo sprite SVG, los iconos en los estilos regular y de marcas en Discourse se convierten internamente a far-nombre-del-icono y fab-nombre-del-icono. Los complementos, temas, insignias de grupo y medallas pueden usar la convención de nomenclatura estándar de FontAwesome 5. Los administradores del sitio que agreguen iconos al conjunto mediante la configuración del sitio svg icon subset deben usar la convención de nomenclatura interna.
Desarrolladores: cómo usar o agregar un icono SVG a tu complemento o tema
-
Agregar nuevos iconos
Complementos:
Registra el icono en el archivo
plugin.rbde tu complemento:register_svg_icon "user-times" if respond_to?(:register_svg_icon)(Nota: debes reiniciar tu servidor Rails en tu entorno de desarrollo para que este cambio surta efecto.)
Temas o componentes:
Agrega una configuración de cadena o lista con un nombre que contenga
_icon, por ejemplo:svg_icons: default: 'question-circle|wallet' type: 'list' list_type: 'compact'Y Discourse incluirá el(los) icono(s) definidos en esa configuración del tema en el subconjunto.
-
Usar iconos en tu JavaScript
Complementos:
import { iconNode } from "discourse-common/lib/icon-library"; ... let icon = iconNode('user-times');o usa el helper
iconHTMLimport { iconHTML } from "discourse-common/lib/icon-library"; ... let icon = iconHTML('user-times');Temas o componentes:
const { iconNode } = require("discourse-common/lib/icon-library"); ... let icon = iconNode('user-times');o usa el helper
iconHTMLconst { iconHTML } = require("discourse-common/lib/icon-library"); ... let icon = iconHTML('user-times');Los helpers también pueden aceptar un segundo parámetro con propiedades como título o clase. Esto funciona de la misma manera en complementos y temas/componentes, por ejemplo:
iconHTML('user-times', { class: "reply-to-glyph" }) -
Usar iconos en tus plantillas Handlebars
En las plantillas Handlebars, puedes usar
d-icon, así:{{d-icon 'user-times'}}Esto también funciona de la misma manera en complementos y temas/componentes.
Agregar iconos personalizados
Si deseas tener más iconos de los disponibles en FontAwesome, puedes agregar tus propios iconos SVG en un complemento o un tema. Consulta este sprite SVG como ejemplo de cómo estructurar tu sprite. (Es esencialmente una lista de elementos <symbol>, cada uno con su propio ID único.)
En temas y componentes: agrega el sprite SVG en la carpeta /assets y refiérete a él en about.json usando el nombre de variable icons-sprite. Para un sprite llamado my-icons.svg, tu assets.json debería incluir esto:
"assets": {
"icons-sprite": "/assets/my-icons.svg"
}
También puedes agregar el sprite SVG a un tema o componente mediante la interfaz de usuario; al hacerlo, asegúrate de que el nombre de la variable SCSS esté establecido en icons-sprite. Captura de pantalla:
En complementos: simplemente incluye un archivo de sprite SVG en la carpeta plugins/your-plugin-name/svg-icons. Reinicia tu servidor (si estás en desarrollo) o reconstruye el sitio si estás en un contenedor Docker, y tus iconos personalizados deberían estar disponibles automáticamente.
Para evitar posibles conflictos con los IDs de iconos de FontAwesome, debes anteponer un prefijo a los IDs de los iconos personalizados en tu complemento o tema.
)
