Icônes

La bibliothèque Icônes : le catalogue Fluent UI System Icons et vos propres icônes SVG, la recherche par nom ou mot-clé, l'inspecteur, la création et la modification d'une icône à partir de balisage SVG, ce que l'assainissement garde et retire, et où une icône est utilisée.

Icônes est la deuxième catégorie sous la racine Ressources : chaque glyphe du catalogue Fluent UI System Icons livré avec le produit, plus les icônes que vous composez à partir de balisage SVG. Le volet est intitulé « Icônes », avec la ligne « Le catalogue complet Fluent UI System Icons, plus les icônes SVG sûres de l'opérateur. » et le badge de comptage. La lecture demande Voir Logic ; créer, modifier et supprimer vos propres icônes demandent Configurer Logic.

Le catalogue

Au-dessus des cartes : Rechercher (« Nom ou mot-clé »), Origine et Par page. La recherche compare, sans tenir compte de la casse, le nom de n'importe quelle icône et les mots-clés de recherche d'un glyphe du catalogue (un glyphe se trouve par un mot-clé qui ne fait pas partie de son nom) ; chaque frappe reconstruit la liste depuis sa première page et abandonne une sélection que la liste ne montre plus. Les cartes montrent le glyphe, le nom et l'origine (Système pour un glyphe du catalogue, Les miens pour les vôtres) ; un résultat vide indique « Aucune icône ne correspond à ces filtres. » avec Effacer les filtres. Le catalogue est trié par nom ; quand l'une de vos icônes partage un segment avec un glyphe du catalogue, les deux cartes sont listées et la vôtre l'emporte à l'adresse.

L'inspecteur

Un glyphe du catalogue indique « Les icônes système sont en lecture seule. » Votre icône propose Modifier et Supprimer à un rôle qui configure.

Nouvelle icône utilisateur

Le verbe placé au-dessus de la ligne Icônes ouvre « Nouvelle icône utilisateur » à la place de la grille (« Créez une icône adressable à partir de balisage SVG inerte. »).

Une ligne d'erreur sous les champs dit ce qui manque (« Un nom et du balisage SVG sont obligatoires. », « Un nom est obligatoire. ») ou ce que l'assainissement a refusé ; Créer l'icône reste grisé tant que les deux champs ne sont pas valides. Annuler ou Retour quitte sans créer. En cas de succès la carte est révélée (les filtres de recherche et d'origine sont effacés lorsqu'ils la masqueraient) et le journal des actions indique « Icône créée. »

Ce que l'assainissement garde et refuse

Le balisage d'une icône est un format de données validé, jamais du contenu exécutable. L'assainissement garde le SVG inerte : svg, g, defs, symbol, use, les formes (path, rect, circle, ellipse, line, polyline, polygon), text et tspan, title et desc, les dégradés et stop, pattern, mask, clipPath et marker, avec leurs attributs de géométrie, de peinture et de texte, un attribut style limité à ces mêmes propriétés, et les références internes (href="#id", url(#id)). Il retire, en le signalant comme une réparation, tout le reste : les éléments script et style, foreignObject, les attributs d'événement, les URL externes et data:, les attributs inconnus, les identifiants invalides et les références à des identifiants qui n'existent pas. Il refuse d'emblée un balisage vide, mal formé en XML, sans racine <svg>, de plus de 512 KB, de plus de 4 096 éléments, ou porteur d'un identifiant en double. L'aperçu ne montre jamais de balisage non assaini, et une icône enregistrée est assainie de nouveau à chaque lecture.

Modifier

Modifier ouvre « Modifier <nom> » (« Le renommage est enregistré à la touche Entrée ou quand le champ perd le focus, et il emporte les références avec lui ; les changements de SVG valides sont enregistrés automatiquement. ») : un champ Nom qui est un champ de renommage, et le balisage en dessous. Pendant que vous tapez un nom, une ligne annonce l'effet (« Le changement de nom met à jour les 2 emplacements qui lisent cette adresse. », « Aucune référence n'utilise l'adresse actuelle. », ou « L'adresse effective ne change pas ; aucune référence n'est à mettre à jour. » quand le nouveau nom s'assainit en le même segment). Entrée, ou la sortie du champ, valide : l'icône garde son identifiant et son balisage, chaque référence enracinée à l'ancienne adresse est réécrite, et le journal des actions indique « Icône renommée et N références mises à jour. » Un nom déjà pris est refusé sur place sous le champ. Un changement de balisage valide est enregistré une demi-seconde après la fin de la frappe (« Icône enregistrée. ») ; un brouillon invalide n'est pas enregistré et dit pourquoi. Retour ramène au catalogue en conservant le dernier balisage valide.

Supprimer

Supprimer demande : Supprimer « X » ? Les références à son adresse ne se résoudront plus. Cette action est irréversible. Une variable qui renvoie cette adresse ne se résout alors plus en rien, ce que la Vérification liste. Le journal des actions indique « Icône supprimée. »

Où une icône est utilisée

Une variable à sortie Icône renvoie Assets.Icons.<nom> et le composant de tableau de bord Icône qui y est lié la dessine : un glyphe du catalogue comme glyphe de police, la vôtre comme son balisage.

Ce que la bibliothèque ne fait pas

Elle n'importe pas de fichier SVG (collez le balisage), n'étiquette pas vos icônes, ne les colore pas (le composant qui dessine une icône décide de sa couleur), ne modifie ni ne masque un glyphe du catalogue, et n'exporte pas.