Icon

Installation

Install @vinui/react from GitHub with pnpm, then import its stylesheet once, in your root layout or entry file:

pnpm add github:vindotski/vinui#path:packages/react

import '@vinui/react/styles.css';

Usage

Icon wraps a Heroicons component with consistent sizing and accessibility. Pass the icon component itself, so only the icons you use end up in your bundle:

import { CheckCircleIcon } from '@heroicons/react/24/outline';
import { Icon } from '@vinui/react';

<Icon icon={CheckCircleIcon} size="lg" />                    // decorative (aria-hidden)
<Icon icon={CheckCircleIcon} size="lg" label="Completed" />  // announced as "Completed"

Sizes are sm (16px), md (20px, default) and lg (24px). Use the matching Heroicons set (16/solid, 20/solid, 24/outline or 24/solid) so strokes stay crisp. Icons inherit the text color.

Inside a Button, icons follow the button's size. Icon-only buttons need an aria-label:

<Button>
  <Icon icon={PlusIcon} />
  New project
</Button>

<Button variant="ghost" aria-label="Settings">
  <Icon icon={Cog6ToothIcon} />
</Button>

More to come

Detailed examples, keyboard interaction and the full component API are on their way.