Skip to content

README.md

Latest commit

 

History

History
106 lines (79 loc) · 2.44 KB

README.md

File metadata and controls

106 lines (79 loc) · 2.44 KB
Raw

Icon

An icon wrapper component for consistent icon sizing and styling.

Usage

import { Icon } from '@components-kit/react';

// Basic icon wrapping a Lucide icon
<Icon>
  <Search />
</Icon>

// Small icon
<Icon size="sm">
  <Check />
</Icon>

// Large icon with variant
<Icon size="lg" variantName="primary">
  <Star />
</Icon>

// Decorative icon (aria-hidden="true" is the default)
<Icon size="sm">
  <CheckmarkIcon />
</Icon>
<span>Success</span>

// Meaningful icon with accessible label (override aria-hidden)
<Icon aria-hidden={false} aria-label="Warning" role="img">
  <AlertTriangle />
</Icon>

// Icon button (aria-hidden="true" is automatic on Icon)
<button aria-label="Close dialog">
  <Icon size="sm">
    <X />
  </Icon>
</button>

Props

Prop Type Default Description
size "sm" | "md" | "lg" "md" The size of the icon
variantName VariantFor<"icon"> - Variant name for styling
children ReactNode - The icon content (e.g., Lucide icon component)

Accepts all standard <span> HTML attributes except style.

Data Attributes

Attribute Values Description
data-ck "icon" Component identifier
data-size "sm", "md", "lg" The size variant
data-variant string The variant name for styling

Accessibility

This component includes aria-hidden="true" by default because most icons are decorative.

Decorative Icons (Default)

Icons next to text that describes the same thing are hidden automatically:

<Icon>
  <MailIcon />
</Icon>
<span>Email</span>

Meaningful Icons

Icons that convey information need to override aria-hidden and add accessible labels:

<Icon aria-hidden={false} aria-label="Email sent successfully" role="img">
  <CheckIcon />
</Icon>

Icon Buttons

Keep the default aria-hidden="true" on the icon and provide aria-label on the button:

<button aria-label="Delete item">
  <Icon>
    <TrashIcon />
  </Icon>
</button>

Best Practices

  • Decorative icons are hidden by default (aria-hidden="true")
  • For meaningful icons, use aria-hidden={false} with aria-label
  • Ensure sufficient color contrast for icon visibility
  • Don't rely solely on color to convey icon meaning
  • Keep icon sizes appropriate for touch targets (minimum 44x44px for interactive)
  • Use consistent icon sizes throughout the application