Icone
La libreria Icone: il catalogo Fluent UI System Icons e le tue icone SVG, la ricerca per nome o etichetta, l'ispettore, creare e modificare un'icona dal markup SVG, che cosa il depuratore conserva e rimuove, e dove si usa un'icona.
Icone è la seconda categoria sotto la radice Risorse: ogni glifo del catalogo Fluent UI System Icons che il prodotto include, più le icone che componi tu dal markup SVG. Il pannello è intitolato « Icone », con la riga « Il catalogo completo Fluent UI System Icons più icone SVG sicure di proprietà dell'operatore. » e la pillola di conteggio. Per leggerlo serve Visualizzare Logic; creare, modificare ed eliminare le tue icone richiedono Configurare Logic.
Il catalogo
Sopra le schede: Cerca (« Nome o etichetta »), Origine e Per pagina. La ricerca confronta, senza distinguere maiuscole e minuscole, il nome di qualunque icona e le etichette di ricerca di un glifo del catalogo (un glifo si trova anche per un'etichetta che non fa parte del suo nome); ogni tasto ricostruisce l'elenco dalla prima pagina e lascia cadere una selezione che l'elenco non mostra più. Le schede mostrano il glifo, il nome e l'origine (Sistema per un glifo del catalogo, Mie per le tue); un risultato vuoto dice « Nessuna icona corrisponde a questi filtri. » con Azzera filtri. Il catalogo è ordinato per nome; quando una tua icona condivide il segmento con un glifo del catalogo, sono elencate entrambe le schede e all'indirizzo vince la tua.
L'ispettore
| Riga | Che cosa mostra |
|---|---|
| Il glifo | Disegnato a 112 px |
| Indirizzo | Assets.Icons.<segment> |
| Origine | Fluent UI System Icons, oppure La mia libreria |
| Formato | Glifo incluso, oppure SVG depurato |
| Etichette di ricerca | Per un glifo del catalogo, le parole che la ricerca confronta oltre al nome |
Un glifo del catalogo mostra « Le icone di sistema sono in sola lettura. » La tua icona offre Modifica ed Elimina a un ruolo che configura.
Nuova icona utente
Il verbo sopra la riga Icone apre « Nuova icona utente » al posto della griglia (« Creare un'icona indirizzabile a partire da markup SVG inerte. »).
| Campo | Che cos'è | Valori e valore predefinito | Effetto |
|---|---|---|---|
| Nome | Il nome visualizzato; il suo segmento è l'indirizzo. | Obbligatorio, vuoto all'inizio. | L'indirizzo che dashboard e variabili conservano. Modifica lo rinomina poi, e ogni riferimento al vecchio indirizzo lo segue. |
| Markup SVG | Il markup dell'icona, incollato come testo. | Obbligatorio; il testo segnaposto mostra <svg viewBox="0 0 24 24">…</svg>. |
Depurato mentre scrivi; l'anteprima a destra mostra il risultato depurato a 112 px, oppure « Un'anteprima sicura compare quando l'SVG è valido. » |
Una riga di errore sotto i campi dice che cosa manca (« Servono un nome e il markup SVG. », « Serve un nome. ») oppure che cosa il depuratore ha rifiutato; Crea icona resta grigio finché entrambi i campi non sono validi. Annulla o Indietro esce senza creare nulla. Al buon esito la scheda viene rivelata (i filtri di ricerca e di origine vengono azzerati quando la nasconderebbero) e il registro delle azioni dice « Icona creata. »
Che cosa il depuratore conserva e che cosa rifiuta
Il markup di un'icona è un formato di dati convalidato, mai contenuto eseguibile. Il depuratore conserva l'SVG inerte: svg, g, defs, symbol, use, le forme (path, rect, circle, ellipse, line, polyline, polygon), text e tspan, title e desc, i gradienti e stop, pattern, mask, clipPath e marker, con i loro attributi di geometria, di colore e di testo, un attributo style limitato a quelle stesse proprietà, e i riferimenti interni (href="#id", url(#id)). Rimuove, e segnala come correzione, tutto il resto: gli elementi script e style, foreignObject, gli attributi di evento, gli URL esterni e data:, gli attributi sconosciuti, gli id non validi e i riferimenti a id che non esistono. Rifiuta del tutto un markup vuoto, non ben formato come XML, senza radice <svg>, oltre 512 KB, oltre 4.096 elementi, oppure che porta un id duplicato. L'anteprima non mostra mai markup non depurato, e un'icona salvata viene depurata di nuovo a ogni lettura.
Modifica
Modifica apre « Modifica <name> » (« La ridenominazione viene salvata premendo Invio o quando il campo perde il fuoco e porta con sé i riferimenti; le modifiche SVG valide vengono salvate automaticamente. »): un campo Nome che è un campo di ridenominazione, e sotto il markup. Mentre scrivi un nome, una riga anticipa l'effetto (« La ridenominazione aggiorna i 2 punti che leggono questo indirizzo. », « Nessun riferimento usa l'indirizzo attuale. », oppure « L'indirizzo effettivo non cambia; nessun riferimento deve essere aggiornato. » quando il nuovo nome dà lo stesso segmento). Invio, o uscire dal campo, conferma: l'icona conserva il suo id e il suo markup, ogni riferimento radicato al vecchio indirizzo viene riscritto e il registro delle azioni dice « Icona rinominata e N riferimenti aggiornati. » Un nome già preso viene rifiutato lì sotto il campo. Una modifica valida del markup viene salvata mezzo secondo dopo che smetti di scrivere (« Icona salvata. »); una bozza non valida non viene salvata e dice perché. Indietro riporta al catalogo, conservando l'ultimo markup valido.
Elimina
Elimina chiede « Eliminare 'X'? I riferimenti al suo indirizzo resteranno irrisolti. L'operazione non è reversibile. » Una variabile che restituisce quell'indirizzo non risolve più nulla, cosa che Convalida elenca. Il registro delle azioni dice « Icona eliminata. »
Dove si usa un'icona
Una variabile con uscita Icona restituisce Assets.Icons.<name> e il componente di dashboard Icona collegato a essa la disegna: un glifo del catalogo come glifo di carattere, la tua icona come suo markup.
Che cosa non fa la libreria
Non importa un file SVG (incolla il markup), non etichetta le tue icone, non le colora (il colore lo decide il componente che disegna l'icona), non modifica né nasconde un glifo del catalogo e non esporta.