Icône

Icônes SVG. Rendues par nom, ou via des composants d'icône indépendants, favorables au tree-shaking.

Icônes de base

<template>
  <div class="demo-col">
    <div class="demo-row">
      <LhIcon name="star" size="24" />
      <LhIcon name="search" size="24" color="var(--lh-primary-color)" />
      <LhIcon name="loading" size="24" />
      <LhIcon name="arrow-down" size="24" />
      <LhIcon name="check" size="24" color="var(--lh-success-color)" />
      <LhIcon name="warning" size="24" color="var(--lh-warning-color)" />
    </div>
    <div class="demo-row">
      <LhIcon name="star" size="16" />
      <LhIcon name="star" size="20" />
      <LhIcon name="star" size="28" />
      <LhIcon name="star" size="36" color="var(--lh-danger-color)" />
    </div>
  </div>
</template>

Props

Propriété	Description	Type	Valeur par défaut
name	Nom de l'icône	LhIconName	—
size	Taille (px)	string \| number	—
color	Couleur	string	—
themeVars / bgPattern	Surcharge du thème	—	—

Icônes indépendantes (tree-shaking)

import { LhIconStar, LhIconSearch } from '@lh-ui/vue2'
// Chaque icône est un composant indépendant ; seuls les chemins SVG
// effectivement référencés sont inclus dans le bundle

Les noms disponibles figurent dans LH_ICON_SVGS_CONST : star / search / check / close / arrow-up / arrow-down / arrow-left / arrow-right / warning / error / info / loading / plus / minus.

Héritage des attributs

inheritAttrs: false : les attributs non déclarés (comme data-* et les événements) sont transmis à l'élément racine via v-bind="$attrs".