Iconos
La biblioteca de Iconos: el catálogo Fluent UI System Icons y sus propios iconos SVG, la búsqueda por nombre o etiqueta, el inspector, crear y editar un icono a partir de marcado SVG, qué conserva y qué quita el depurador, y dónde se usa un icono.
Iconos es la segunda categoría bajo la raíz Recursos: todos los glifos del catálogo Fluent UI System Icons que empaqueta el producto, más los iconos que usted componga a partir de marcado SVG. El panel se encabeza "Iconos", con la línea "El catálogo completo de Fluent UI System Icons más los iconos SVG seguros del operador." y la insignia del recuento. Leerla necesita Ver Logic; crear, editar y eliminar sus propios iconos necesitan Configurar Logic.
El catálogo
Sobre las tarjetas: Búsqueda ("Nombre o etiqueta"), Origen y Por página. La búsqueda compara, sin distinguir mayúsculas de minúsculas, el nombre de cualquier icono y las etiquetas de búsqueda de un glifo del catálogo (un glifo se encuentra por una etiqueta que no forma parte de su nombre); cada pulsación de tecla reconstruye la lista desde su primera página y suelta una selección que la lista ya no muestra. Las tarjetas muestran el glifo, el nombre y el origen (Sistema en un glifo del catálogo, Míos en los suyos); un resultado vacío dice "Ningún icono coincide con estos filtros." con Borrar los filtros. El catálogo se ordena por nombre; cuando uno de sus iconos comparte segmento con un glifo del catálogo, las dos tarjetas se listan y el suyo gana en esa dirección.
El inspector
| Fila | Qué muestra |
|---|---|
| El glifo | Dibujado a 112 px |
| Dirección | Assets.Icons.<segment> |
| Origen | Catálogo Fluent UI System Icons, o Mi biblioteca |
| Formato | Glifo incluido, o SVG depurado |
| Etiquetas de búsqueda | En un glifo del catálogo, las palabras con las que la búsqueda lo encuentra más allá del nombre |
Un glifo del catálogo muestra "Los iconos del sistema son de solo lectura." Un icono suyo ofrece Editar y Eliminar a un rol que configura.
Nuevo icono de usuario
El verbo sobre la fila Iconos abre "Nuevo icono de usuario" en lugar de la rejilla ("Cree un icono direccionable a partir de marcado SVG inerte.").
| Campo | Qué es | Valores / por defecto | Efecto |
|---|---|---|---|
| Nombre | El nombre visible; su segmento es la dirección. | Obligatorio, vacío por defecto. | La dirección que guardan los paneles de control y las variables. Editar la renombra después, y toda referencia a la dirección antigua le sigue. |
| Marcado SVG | El marcado del icono, pegado como texto. | Obligatorio; el texto de ejemplo muestra <svg viewBox="0 0 24 24">…</svg>. |
Se depura mientras se escribe; la vista previa de la derecha muestra el resultado depurado a 112 px, o "Cuando el SVG sea válido aparecerá una vista previa segura." |
Una línea de error bajo los campos dice qué falta ("Se necesitan un nombre y marcado SVG.", "Se necesita un nombre.") o qué rechazó el depurador; Crear icono se queda en gris hasta que los dos campos son válidos. Cancelar o Atrás sale sin crear nada. Si sale bien, la tarjeta se revela (los filtros de búsqueda y de origen se borran cuando la esconderían) y el registro de acciones dice "Icono creado."
Qué conserva y qué rechaza el depurador
El marcado de un icono es un formato de datos validado, nunca contenido ejecutable. El depurador conserva el SVG inerte: svg, g, defs, symbol, use, las formas (path, rect, circle, ellipse, line, polyline, polygon), text y tspan, title y desc, los degradados y stop, pattern, mask, clipPath y marker, con sus atributos de geometría, de pintura y de texto, un atributo style limitado a esas mismas propiedades, y las referencias internas (href="#id", url(#id)). Quita, e informa como reparación, todo lo demás: los elementos script y style, foreignObject, los atributos de evento, las URL externas y las data:, los atributos desconocidos, los ids no válidos y las referencias a ids que no existen. Rechaza de plano el marcado que está vacío, que no es XML bien formado, que no tiene una raíz <svg>, que pasa de 512 KB, que pasa de 4.096 elementos, o que lleva un id duplicado. La vista previa nunca muestra marcado sin depurar, y un icono guardado se vuelve a depurar cada vez que se lee.
Editar
Editar abre "Editar <name>" ("El cambio de nombre se guarda al pulsar Intro o al salir del campo y se lleva consigo las referencias; los cambios de SVG válidos se guardan automáticamente."): un campo Nombre que es un campo de cambio de nombre, y el marcado debajo. Mientras se escribe un nombre, una línea previsualiza el impacto ("Cambiar el nombre actualiza las 2 ubicaciones que leen esta dirección.", "Ninguna referencia usa la dirección actual." o "La dirección efectiva no cambia; no hay referencias que actualizar." cuando el nombre nuevo se sanea hasta el mismo segmento). Intro, o salir del campo, lo confirma: el icono conserva su id y su marcado, todas las referencias enraizadas a la dirección antigua se reescriben, y el registro de acciones dice "Icono renombrado y N referencias actualizadas." Un nombre ya ocupado se rechaza en el sitio, bajo el campo. Un cambio de marcado válido se guarda medio segundo después de dejar de escribir ("Icono guardado."); un borrador no válido no se guarda y dice por qué. Atrás vuelve al catálogo, conservando el último marcado válido.
Eliminar
Eliminar pregunta "¿Eliminar 'X'? Las referencias a su dirección quedarán sin resolver. Esta acción no se puede deshacer." Una variable que devuelva esa dirección no resuelve entonces nada, que es lo que lista Validación. El registro de acciones dice "Icono eliminado."
Dónde se usa un icono
Una variable con salida de icono devuelve Assets.Icons.<name> y el componente Icono de panel de control vinculado lo dibuja: un glifo del catálogo como glifo de fuente, y un icono suyo como su marcado.
Lo que la biblioteca no hace
No importa un archivo SVG (pegue el marcado), no etiqueta sus iconos, no los colorea (el color lo decide el componente que dibuja el icono), no edita ni esconde un glifo del catálogo, y no exporta.