Í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.
Ícones é a segunda categoria sob a raiz Ativos: 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 Fluent UI System Icons completo mais ícones SVG seguros, de propriedade do 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
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 casa 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
| Linha | O que mostra |
|---|---|
| O glifo | Desenhado a 112 px |
| Endereço | Assets.Icons.<segment> |
| 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 de usuário
O verbo sobre a linha Ícones abre "Novo ícone de 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 <svg viewBox="0 0 24 24">…</svg>. |
Higienizada enquanto você digita; a prévia à direita mostra o resultado higienizado a 112 px, ou "Uma prévia segura aparece quando o SVG é válido." |
Uma linha de erro abaixo dos campos diz o que falta ("Um nome e a marcação SVG são obrigatórios.", "Um nome é obrigatório.") 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
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, e relata como reparo, 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. Ele recusa de saída uma marcação vazia, que não seja XML bem formado, sem uma raiz <svg>, 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
O Editar abre "Editar <name>" ("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 lugares 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
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 lista. O feed diz "Ícone excluído."
Onde um ícone é usado
Uma variável de saída Ícone devolve Assets.Icons.<name> e o componente Ícone 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
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.