# Ícones > A biblioteca de Ícones: o catálogo Fluent UI System Icons e os seus próprios ícones SVG, a busca por nome ou etiqueta, o inspetor, criar e editar um ícone a partir de marcação SVG, o que o higienizador mantém e remove, e onde um ícone é usado. **Icons** é a segunda categoria sob a raiz Assets: todo glifo do catálogo Fluent UI System Icons que o produto empacota, mais os ícones que você compõe a partir de marcação SVG. O painel tem o título "Ícones", com a frase "O catálogo completo Fluent UI System Icons mais os ícones SVG seguros do próprio operador." e a pílula de contagem. Lê-la exige **Ver a lógica**; criar, editar e excluir os seus próprios ícones exigem **Configurar a lógica**. ## O catálogo {#the-catalog} Acima dos cartões: **Buscar** ("Nome ou etiqueta"), **Origem** e **Por página**. A busca casa, sem diferenciar maiúsculas de minúsculas, o nome de qualquer ícone e as etiquetas de busca de um glifo do catálogo (um glifo é achado por uma etiqueta que não faz parte do nome dele); cada tecla digitada reconstrói a lista a partir da primeira página dela e descarta uma seleção que a lista não mostra mais. Os cartões mostram o glifo, o nome e a origem (**Sistema** num glifo do catálogo, **Meus** nos seus); um resultado vazio diz "Nenhum ícone combina com estes filtros." com **Limpar filtros**. O catálogo é ordenado por nome; quando um ícone seu compartilha um segmento com um glifo do catálogo, os dois cartões são listados e o seu vence no endereço. ## O inspetor {#the-inspector} | Linha | O que mostra | | --- | --- | | O glifo | Desenhado a 112 px | | Endereço | `Assets.Icons.` | | Origem | Fluent UI System Icons, ou Minha biblioteca | | Formato | Glifo empacotado, ou SVG higienizado | | Etiquetas de busca | Num glifo do catálogo, as palavras que a busca casa além do nome | Um glifo do catálogo mostra "Os ícones de sistema são somente leitura." Um ícone seu oferece **Editar** e **Excluir** a um papel que configura. ## Novo ícone do usuário {#new-user-icon} O verbo sobre a linha Icons abre "Novo ícone do usuário" no lugar da grade ("Crie um ícone endereçável a partir de marcação SVG inerte."). | Campo | O que é | Valores / padrão | Efeito | | --- | --- | --- | --- | | Nome | O nome de exibição; o segmento dele é o endereço. | Obrigatório, vazio por padrão. | O endereço que dashboards e variáveis guardam. O Editar renomeia depois, e toda referência ao endereço antigo vai junto. | | Marcação SVG | A marcação do ícone, colada como texto. | Obrigatória; o texto de exemplo mostra `…`. | Higienizada enquanto você digita; a prévia à direita mostra o resultado higienizado a 112 px, ou "Uma prévia segura aparece quando o SVG estiver válido." | Uma linha de erro abaixo dos campos diz o que falta ("Um nome e a marcação SVG são obrigatórios.", "É preciso dar um nome.") ou o que o higienizador recusou; o **Criar ícone** continua esmaecido até os dois campos serem válidos. O **Cancelar** ou o **Voltar** sai sem criar. Quando dá certo, o cartão é revelado (os filtros de busca e de origem são limpos quando esconderiam o cartão) e o feed diz "Ícone criado." ### O que o higienizador mantém e recusa {#what-the-sanitizer-keeps-and-refuses} A marcação de ícone é um formato de dados validado, nunca conteúdo executável. O higienizador mantém SVG inerte: `svg`, `g`, `defs`, `symbol`, `use`, as formas (`path`, `rect`, `circle`, `ellipse`, `line`, `polyline`, `polygon`), `text` e `tspan`, `title` e `desc`, gradientes e `stop`, `pattern`, `mask`, `clipPath` e `marker`, com os atributos de geometria, de pintura e de texto deles, um atributo `style` limitado a essas mesmas propriedades, e referências internas (`href="#id"`, `url(#id)`). Ele remove todo o resto: elementos `script` e `style`, `foreignObject`, atributos de evento, URLs externas e `data:`, atributos desconhecidos, ids inválidos e referências a ids que não existem. A remoção não é relatada: o editor de ícone mostra apenas a prévia higienizada, sem nenhuma linha de reparos, e o ícone é guardado como a marcação higienizada. Só a [importação de um símbolo](assets-symbols#import-symbol) conta os reparos que faz. Ele recusa de saída uma marcação vazia, que não seja XML bem formado, sem uma raiz ``, com mais de 512 KB, com mais de 4.096 elementos, ou que carregue um id duplicado. A prévia nunca mostra marcação não higienizada, e um ícone guardado é higienizado de novo toda vez que é lido. ## Editar {#edit} O Editar abre "Editar ``" ("A renomeação é salva com Enter ou quando o foco sai do campo e leva as referências junto; mudanças válidas de SVG são salvas automaticamente."): um campo **Nome** que é um campo de renomeação, e a marcação abaixo dele. Enquanto você digita um nome, uma linha mostra a prévia do impacto ("Renomear atualiza os 2 locais que leem este endereço.", "Nenhuma referência usa o endereço atual.", ou "O endereço efetivo não muda; nenhuma referência precisa ser atualizada." quando o nome novo higieniza para o mesmo segmento). Enter, ou sair do campo, confirma: o ícone mantém o id e a marcação dele, toda referência enraizada ao endereço antigo é reescrita, e o feed diz "Ícone renomeado e N referências atualizadas." Um nome já ocupado é recusado no lugar, abaixo do campo. Uma mudança válida de marcação é salva meio segundo depois de você parar de digitar ("Ícone salvo."); um rascunho inválido não é salvo e diz por quê. O **Voltar** devolve ao catálogo, mantendo a última marcação válida. ## Excluir {#delete} O **Excluir** pergunta "Excluir 'X'? As referências ao endereço dele ficarão sem resolução. Isso não pode ser desfeito." Uma variável que devolve aquele endereço passa então a resolver para nada, o que a [Validação](validation) lista. O feed diz "Ícone excluído." ## Onde um ícone é usado {#where-an-icon-is-used} Uma [variável](logic-variables#output-types) de saída Ícone devolve `Assets.Icons.` e o componente [Ícone](component-icon) de dashboard vinculado a ela o desenha: um glifo do catálogo como o glifo da fonte, um ícone seu como a marcação dele. ## O que a biblioteca não faz {#what-the-library-does-not-do} Ela não importa um arquivo SVG (cole a marcação), não etiqueta os seus ícones, não os colore (o componente que desenha um ícone decide a cor dele), não edita nem esconde um glifo do catálogo, e não exporta.