Icon, Cairn

Show code

import { Icon } from '@six-vallees/ui-react';
import { House, Star, Heart, Gear, Bell, Lightning } from '@phosphor-icons/react';

export default function IconDemo() {
  return (
    <div className="flex items-center gap-6 text-on-surface">
      <Icon icon={House} label="Home" size="lg" />
      <Icon icon={Star} weight="fill" size="lg" />
      <Icon icon={Heart} weight="duotone" size="lg" />
      <Icon icon={Gear} size="lg" />
      <Icon icon={Bell} size="lg" />
      <Icon icon={Lightning} weight="bold" size="lg" />
    </div>
  );
}

Pass any Phosphor icon to the icon prop. Colour follows currentColor (use text-*).

npx shadcn@latest add https://cairn.sixvallees.com/r/icon.json

Prop	Type	Default
icon	PhosphorIcon The Phosphor icon to render, e.g. House.	-
size	'sm' \| 'md' \| 'lg' \| 'xl' \| number Preset (16 · 20 · 24 · 32) or a raw pixel value.	'md'
weight	'thin' \| 'light' \| 'regular' \| 'bold' \| 'fill' \| 'duotone' Stroke weight. fill marks a selected state.	'regular'
label	string Accessible label. Omit for decorative icons (aria-hidden).	-
className	string Extra classes (color via text-*, etc.).	-