Icon Icône - Docs - Artefact

Icon Icône

Data Display

Tier 3

Introduction

Un wrapper léger, sensible à la taille et aux couleurs pour les icônes SVG. Il applique un dimensionnement cohérent (2xs–xl) et hérite de currentcolor afin que les icônes correspondent par défaut au texte/à la couleur de l'icône environnante, sans nécessiter aucune dépendance à la bibliothèque d'icônes.

Icon compose de deux manières, décidées automatiquement à partir de ses enfants :

Wrap — si children est du contenu SVG nu (<path>, <circle>, <g>, …), du texte ou plus plus d'un élément, Icon restitue son propre <svg> autour de lui.
Fusionner (asChild, par défaut true) — si children est un élément unique qui n'est pas un simple SVG contenu (par exemple un <svg>…</svg> écrit à la main), Icon fusionne sa classe (et tout autre passé props) directement sur cet élément au lieu de l'envelopper dans un second <svg>. Passer asChild={false} pour forcer le retour à la ligne même dans ce cas.

Utilisation

Chemins SVG nus (aucune bibliothèque d'icônes requise)

import { Icon } from "../components/ui";

export default function MyPage() {
  return (
    <Icon size="lg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <path d="M12 2 2 7l10 5 10-5-10-5z" />
    </Icon>
  );
}

Composer avec un `<svg>` écrit à la main (`asChild`, par défaut)

import { Icon } from "../components/ui";

function HeartSvg(props: { class?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
      <path d="M12 21s-6.7-4.35-9.3-8.1C.8 9.7 2 6 5.4 6c1.9 0 3.2 1 4.6 2.6C11.4 7 12.7 6 14.6 6 18 6 19.2 9.7 17.3 12.9 14.7 16.65 12 21 12 21z" />
    </svg>
  );
}

export default function MyPage() {
  return (
    <span style={{ color: "red" }}>
      <Icon size="sm">
        <HeartSvg />
      </Icon>
    </span>
  );
}

La classe icon (et la taille) est fusionnée avec le <svg> renvoyé par HeartSvg, il n'y a donc pas de élément d'emballage supplémentaire dans le balisage rendu. Puisque la recette d'icône définit color: currentcolor, l'icône reprend la couleur du texte environnant (ici, « rouge ») tant que ses chemins utilisent fill="currentColor" ou Stroke="currentColor".

Icône étiquetée (non décorative)

<Icon aria-label="Search" viewBox="0 0 24 24">
  <path d="M10 2a8 8 0 105.3 14.03l4.34 4.34 1.42-1.42-4.34-4.34A8 8 0 0010 2z" />
</Icon>

Constructeur de pages CMS

Ce composant est disponible sous forme de bloc icon dans Page Builder (content/pages/*.json) — svg contient le balisage SVG interne brut :

{
  "type": "icon",
  "svg": "<path d=\"M12 2 2 7l10 5 10-5-10-5z\" />",
  "viewBox": "0 0 24 24",
  "size": "lg"
}

Propriétés

Propriété	Type	Description
`children`	`Child`	Contenu SVG (`<chemin>`, etc.) ou un seul élément de type SVG à restituer/fusionner.
`class`	`string`	Classes CSS personnalisées.

| size | `"2xs" \ | "xs" \ | "sm" \ | "md" \ | "lg" \ | "xl"` | The size of the icon. Defaults to "md". |