Ir al contenido
Menú
Idioma, actualmente Español
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

sistema de diseño de rastrillo

Un resumen de todo lo que ofrece el sistema de diseño. Tema: day. Idioma: Español.

Iconos

12 slugs, incorporados como SVG en línea y compilados en el binario: sin paso de compilación, sin un segundo origen, y funcionan sin red alguna. Cada uno toma su tamaño del texto de al lado según la propia regla .icon de tokens.css, que es el tamaño que estás viendo aquí. Un slug que nadie responde no dibuja nada, así que una errata cuesta un icono que falta y no una página muerta a media respuesta.

  • alert-triangle{{icon "alert-triangle"}}lucide.dev/icons/triangle-alert
  • check{{icon "check"}}lucide.dev/icons/check
  • check-circle{{icon "check-circle"}}lucide.dev/icons/circle-check
  • chevron-down{{icon "chevron-down"}}lucide.dev/icons/chevron-down
  • help-circle{{icon "help-circle"}}lucide.dev/icons/circle-help
  • info{{icon "info"}}lucide.dev/icons/info
  • kebab{{icon "kebab"}}lucide.dev/icons/ellipsis-vertical
  • menu{{icon "menu"}}lucide.dev/icons/menu
  • plus{{icon "plus"}}lucide.dev/icons/plus
  • x{{icon "x"}}lucide.dev/icons/x
  • x-circle{{icon "x-circle"}}lucide.dev/icons/circle-x

Los nombres son de rastrillo

5 de los 12 difieren del nombre que publica lucide.dev, así que incluso el conjunto Lucide lleva su propia traducción. Cuando la última línea bajo un icono no repite su nombre, ese es uno de ellos. La ganancia es que una misma llamada significa el mismo glifo sea cual sea el conjunto que la app genere, y los partials entregados nunca cambian cuando cambia el conjunto.

kebab y menu son el par que conviene no confundir: kebab son los tres puntos que significan más acciones en esta fila, y menu las tres líneas que significan navegación. Los shells usan menu cuando se pliegan.

De dónde vienen los glifos

Lucide, incorporado bajo licencia ISC y fijado en el código en vez de descargarse en tiempo de ejecución. rastrillo new --icons=font-awesome genera en su lugar Font Awesome Free: una fuente de la que una app puede beber, no una dependencia que tenga este framework. Aquí nada lo descarga, y Pro es un producto de pago que rastrillo no puede incorporar en tu nombre.

El conjunto completo está en lucide.dev (se abre en una pestaña nueva).

Un icono que el framework no trae

El paquete icons que escribe rastrillo new es código propiedad de la app: añade ahí el glifo y llámalo como a cualquier otro. ui.WithIcons es la costura que pone tu conjunto por delante del propio del framework.

tmpl := template.Must(template.New("").
	Funcs(ui.Funcs(ui.WithIcons(icons.Icon, icons.Assets))).
	ParseFS(ui.Templates(), "*.html"))

La trampa, y es silenciosa: ui.FuncsWith vuelve a enlazar icon e iconAssets al conjunto incorporado. Una app que generó sus propios iconos tiene que pasar las dos costuras en cada llamada, o sus iconos vuelven a Lucide en cada petición mientras siguen dibujando algo perfectamente verosímil.

ui.Funcs(ui.WithT(t), ui.WithIcons(icons.Icon, icons.Assets))