> LucideIcon

LucideIcon

Icon de la librairie Lucide

TagsuiInformationsFigmaPropsExemples3StylesDisponiblesPropsDocumentées

Default

export const Default = () => (
  <Box>
    <LucideIcon name="AArrowDown" size="sm" />
    <LucideIcon name="AArrowDown" size="md" />
    <LucideIcon name="AArrowDown" size="lg" />
    <LucideIcon name="AArrowDown" size="xl" />
  </Box>
);

Colored

export const Colored = () => <LucideIcon name="AArrowDown" size="md" color="green" />;

SharePerPlatform

En passant name="Share", le composant sélectionne automatiquement l'icône adaptée à la plateforme courante. La prop _platformOverride est utilisée ici uniquement pour forcer l'affichage de chaque variante dans la story.

WebAndroidiOS

export const SharePerPlatform = () => (
  <Box style={{ gap: 24 }}>
    <Box style={{ flexDirection: 'row', gap: 24 }}>
      <Box style={{ alignItems: 'center', gap: 8 }}>
        <Typography>Web</Typography>
        <LucideIcon name="Share" size="md" _platformOverride="web" />
      </Box>
      <Box style={{ alignItems: 'center', gap: 8 }}>
        <Typography>Android</Typography>
        <LucideIcon name="Share" size="md" _platformOverride="android" />
      </Box>
      <Box style={{ alignItems: 'center', gap: 8 }}>
        <Typography>iOS</Typography>
        <LucideIcon name="Share" size="md" _platformOverride="ios" />
      </Box>
    </Box>
  </Box>
);

Alveole UI Kit — v1.8.4