Iconos
Iconos
El propio frontmatter icon de una página (mostrado junto a su título, y
junto a su entrada en la barra lateral de navegación) acepta ya sea un
emoji/texto corto simple - la forma original, todavía totalmente
compatible - o un icono con nombre de una de las ocho bibliotecas
autoalojadas, todas con licencia MIT/ISC e incluidas con este módulo
(~16.200 iconos combinados, sin CDN, sin nada añadido al peso de una
página construida más allá de los pocos iconos que realmente usa -
consulta IconResolver.bx):
---
icon: rocket
---
---
icon: lucide:rocket
---
---
icon: phosphor-bold:rocket
---
El rocket sin prefijo usa por defecto Phosphor,
peso regular. Phosphor incluye sus seis pesos propios, cada uno con su
propio prefijo: phosphor-thin:, phosphor-light:, phosphor: (regular,
igual que el nombre sin prefijo), phosphor-bold:, phosphor-fill: y
phosphor-duotone:. Usa el prefijo lucide: para
Lucide, o tabler: para
Tabler en su lugar. Explora la propia galería
de cada sitio para el nombre exacto - coincide exactamente con el propio
nombre de archivo incluido en este módulo (minúsculas, con guiones, por
ejemplo book-open, arrow-up-right; el propio sitio de Phosphor
muestra un selector de peso - cada una de sus seis opciones allí es uno
de los seis prefijos phosphor[-weight]: de este módulo).
Font Awesome deliberadamente no es una de ellas - su estilo Duotone (y la mayor parte de su conjunto de iconos desde la v6 en adelante) es exclusivo de la versión Pro, no disponible bajo una licencia que este módulo pudiera incluir y redistribuir de forma gratuita.
El propio SVG de un proyecto también funciona - colócalo en
docs/assets/icons/my-icon.svg y referéncialo como icon: custom:my-icon.
Una entrada de nav.json también puede definir
su propio icon, sobrescribiendo el propio frontmatter de la página de
destino solo para esa entrada:
{ "title": "Guides", "path": "guides/index.md", "icon": "lucide:book-open" }
Los mismos valores [library:]name/emoji funcionan en cualquier otro
lugar donde se acepte un icon, como una tarjeta de bloque de
contenido - resuelto de la misma forma, a
través de la misma caché compartida, de modo que referenciar el mismo
icono dos veces a lo largo de una compilación solo lee su archivo SVG una
vez.