Icon

Niom exporte des composants d'icones SVG legers ainsi qu'un moteur de rendu generique Icon. Utilisez une icone directement, ou transmettez-la a Icon avec la propriete icon. Les icones acceptent les proprietes SVG standard, ainsi que size et color.

Icon catalog

Menu

Cross

Cart

Heart

ArrowDown

ArrowUp

ArrowRight

ArrowLeft

Search

Check

Eye

EyeOff

Star

StarFilled

HalfStarFilled

LoginIcon

Profile

DropDown

PlusIcon

MinusIcon

GoogleLogo

GitHubLogo

WhatsAppLogo

FacebookLogo

InstagramLogo

TikTokLogo

PaypalLogo

MCBLogo

MasterCard

MailIcon

PhoneIcon

InformationIcon

HomeIcon

BitcoinLogo

TruckIcon

WarningIcon

CardIcon

LockIcon

ShieldIcon

ServerIcon

CoffeeIcon

EditIcon

MoneroIcon

PlainBitcoinLogo

DogecoinLogo

LitecoinLogo

SolanaIcon

EthLogo

TrashIcon

CalenderIcon

BagIcon

AttachmentIcon

MaximiseIcon

MinimiseIcon

SettingsIcon

Download

import { Button, Cart, Icon } from "niom-parts";

<Button aria-label="Ouvrir cart" variant="ghost">
  <Icon icon={Cart} size={20} aria-hidden="true" />
</Button>;

Cas d'utilisation courants

Les icones decoratives doivent etre masquees aux technologies d'assistance, tandis que les boutons composes uniquement d'une icone necessitent un libelle accessible.

Éditeur en direct

function IconUseCases() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button leftIcon={<Search size={18} aria-hidden="true" />}>
        Rechercher
      </Button>
      <Button aria-label="Add to favorites" variant="outline">
        <Heart size={19} />
      </Button>
      <span className="inline-flex items-center gap-2 text-accent">
        <Check size={18} aria-hidden="true" />
        Payment confirmed
      </span>
      <ArrowRight size={28} color="var(--color-secondary)" />
    </div>
  );
}

Résultat

Loading...

Proprietes

Propriete	Type	Valeur par defaut
icon	ComponentType<SVGprops>	obligatoire pour Icon
size	number | string	specifique a l'icone
color	string	"currentColor"
SVG attributes	SVGProps<SVGSVGElement>	-