Skip to content
Getting StartedComponentsStylesClamp Codeberg

Icon

Icon Component

Le composant Icon affiche des icônes SVG à partir de bibliothèques enregistrées avec registerIconLibrary(). L’attribut library choisit la bibliothèque (par défaut default) ; name est le nom d’icône passé au resolver.

Usage

<sh-icon name="chevron-down"></sh-icon>

Attributs

  • name (requis) : nom de l’icône
  • library (optionnel) : identifiant de bibliothèque (défaut : default). Un identifiant inconnu retombe sur default.
  • label (optionnel) : nom accessible de l’icône

name et library sont aussi exposés en propriétés JavaScript, pour les liaisons de framework qui écrivent la propriété plutôt que l’attribut.

Accessibilité

Sans label, l’icône est décorative : elle est marquée aria-hidden="true" et ne porte pas de rôle. C’est le bon défaut quand un texte adjacent porte déjà le sens.

Avec label, elle devient une image nommée (role="img" + aria-label) et reste nommée même si le chargement échoue — comme une <img> cassée conserve son alt.

<!-- décorative : le libellé du bouton porte le sens --> <sh-button>Supprimer <sh-icon name="trash"></sh-icon></sh-button> <!-- porteuse de sens : l'icône est seule --> <sh-icon name="trash" label="Supprimer"></sh-icon>

Un role ou un aria-label posé directement par l’auteur n’est jamais écrasé.

Sécurité

Le contenu résolu par une bibliothèque est injecté dans la page. sh-icon en retire donc ce qui peut exécuter du code — <script>, <foreignObject>, les attributs on* et les URL javascript: — avant l’affichage. Une bibliothèque dont les icônes ont réellement besoin de contenu actif peut s’en exclure avec allowScripts: true à l’enregistrement ; elle est alors aussi fiable que vos propres scripts.

Exemples

JavaScript

import { registerIconLibrary } from "@shachi-ui/components"; registerIconLibrary("default", { svgIcons: { star: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>', heart: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>', }, }); // Création programmatique const icon = document.createElement("sh-icon"); icon.setAttribute("name", "star"); document.body.appendChild(icon); // Modification de l'icône icon.setAttribute("name", "heart");

Événements

  • error — échec de chargement ; detail.error contient une Error. L'évènement ne bubble pas et ne franchit pas le Shadow DOM (mimique l'évènement natif error de <img>).

CSS Custom Properties

  • --icon-size — largeur et hauteur de l’icône (défaut : 1em, donc alignée sur le texte environnant)
sh-icon { --icon-size: 24px; }

La couleur se règle avec color : les icônes du set système utilisent currentColor.