# Icone > La libreria Icone: il catalogo Fluent UI System Icons e le icone SVG dell'operatore, 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. **Icons** è la seconda categoria sotto la radice Assets: ogni glifo del catalogo Fluent UI System Icons che il prodotto include, più le icone che l'operatore compone dal markup SVG. Il pannello è intitolato « Icone », con la riga « Il catalogo completo Fluent UI System Icons più le icone SVG sicure dell'operatore. » e la pillola di conteggio. Per leggerlo serve **Visualizzare Logic**; creare, modificare ed eliminare le icone dell'operatore richiedono **Configurare Logic**. ## Il catalogo {#the-catalog} 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 quelle dell'operatore); un risultato vuoto dice « Nessuna icona corrisponde a questi filtri. » con **Azzera i filtri**. Il catalogo è ordinato per nome; quando un'icona dell'operatore condivide il segmento con un glifo del catalogo, sono elencate entrambe le schede e all'indirizzo vince quella dell'operatore. ## L'ispettore {#the-inspector} | Riga | Che cosa mostra | | --- | --- | | Il glifo | Disegnato a 112 px | | Indirizzo | `Assets.Icons.` | | 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 di sola lettura. » Un'icona dell'operatore offre **Modifica** ed **Elimina** a un ruolo che configura. ## Nuova icona utente {#new-user-icon} Il verbo sopra la riga Icons apre « Nuova icona utente » al posto della griglia (« Creare un'icona indirizzabile 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 `…`. | 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 (« Sono obbligatori 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 {#what-the-sanitizer-keeps-and-refuses} 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 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. La rimozione non viene segnalata: l'editor dell'icona mostra solo l'anteprima depurata, senza alcuna riga di correzioni, e l'icona viene salvata come il markup depurato. Solo l'[importazione di un simbolo](assets-symbols#import-symbol) conta le correzioni che fa. Rifiuta del tutto un markup vuoto, non ben formato come XML, senza radice ``, 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 {#edit} Modifica apre « Modifica `` » (« La rinomina 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 rinomina 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 {#delete} **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](validation) elenca. Il registro delle azioni dice « Icona eliminata. » ## Dove si usa un'icona {#where-an-icon-is-used} Una [variabile](logic-variables#output-types) con uscita Icona restituisce `Assets.Icons.` e il componente di dashboard [Icona](component-icon) collegato a essa la disegna: un glifo del catalogo come glifo di carattere, un'icona dell'operatore come suo markup. ## Che cosa non fa la libreria {#what-the-library-does-not-do} Non importa un file SVG (incolla il markup), non etichetta le icone dell'operatore, non le colora (il colore lo decide il componente che disegna l'icona), non modifica né nasconde un glifo del catalogo e non esporta.