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 trae el producto, más los iconos que usted componga a partir de marcado SVG. El panel se titula "Iconos", con la línea "El catálogo completo de Fluent UI System Icons más los iconos SVG seguros del operador." y la pastilla del conteo. Leerla necesita Ver Logic; crear, editar y eliminar sus propios iconos necesitan Configurar Logic.
El catálogo
Arriba de las tarjetas: Buscar ("Nombre o etiqueta"), Origen y Por página. La búsqueda coincide, sin distinguir mayúsculas, con el nombre de cualquier icono y con 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 tecla vuelve a armar 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 para un glifo del catálogo, Míos para 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 la dirección.
El inspector
| Fila | Qué muestra |
|---|---|
| El glifo | Dibujado a 112 px |
| Dirección | Assets.Icons.<segmento> |
| Origen | Fluent UI System Icons, o Mi biblioteca |
| Formato | Glifo incluido, o SVG depurado |
| Etiquetas de búsqueda | Para un glifo del catálogo, las palabras con las que coincide la búsqueda más allá del nombre |
Un glifo del catálogo muestra "Los iconos del sistema son de solo lectura." Su icono le 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 cuadrícula ("Cree un icono direccionable a partir de marcado SVG inerte.").
| Campo | Qué es | Valores / valor inicial | Efecto |
|---|---|---|---|
| Nombre | El nombre visible; su segmento es la dirección. | Obligatorio, vacío al inicio. | La dirección que guardan los paneles de control y las variables. Editar la renombra después, y toda referencia a la dirección anterior lo acompaña. |
| Marcado SVG | El marcado del icono, pegado como texto. | Obligatorio; el texto de ejemplo muestra <svg viewBox="0 0 24 24">…</svg>. |
Se depura conforme usted 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 debajo de 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 sean válidos. Cancelar o Atrás salen sin crear nada. Cuando 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 figuras (path, rect, circle, ellipse, line, polyline, polygon), text y tspan, title y desc, los gradientes 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, y lo reporta como una 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 <nombre>" ("El cambio de nombre se guarda al presionar Enter 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. Conforme usted escribe un nombre, una línea muestra de antemano 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 higieniza al mismo segmento). Entrar, o salir del campo, lo confirma: el icono conserva su id y su marcado, todas las referencias con raíz a la dirección anterior se reescriben, y el registro de acciones dice "El icono cambió de nombre y se actualizaron N referencias." Un nombre ya tomado se rechaza ahí mismo, debajo del campo. Un cambio de marcado válido se guarda medio segundo después de que usted deja de escribir ("Icono guardado."); un borrador no válido no se guarda y dice por qué. Atrás regresa al catálogo y conserva 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 resuelve entonces a 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.<nombre> y el componente Icono de panel de control vinculado lo dibuja: un glifo del catálogo como el glifo de la fuente, y su icono 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 componente que dibuja un icono decide su color), no edita ni esconde un glifo del catálogo, y no exporta.