Icon Component

The Icon component allows AI agents to fetch icons using natural language descriptions or serve static icon files from your CDN.

Basic Usage

AI-Generated Icons

Request icons using natural language descriptions:

import { Icon } from 'assets-ai';

function MyComponent() {
  return <Icon description="home" size={24} />;
}

Static Icons

Serve pre-existing icons without AI:

<Icon name="logo.svg" size={32} />

Props

Prop	Type	Default	Description
`description`	string	-	AI prompt for generating the icon
`name`	string	-	Static icon filename (bypasses AI)
`variant`	string	"regular"	Icon style variant
`size`	number \| string	24	Icon size in pixels
`color`	string	-	Icon color (CSS color value)
`className`	string	-	Additional CSS classes
`style`	CSSProperties	-	Inline styles
`fallback`	boolean \| ReactNode	-	Show skeleton loader or custom fallback
`alt`	string	-	Alternative text for accessibility

Variants

Icons support multiple style variants:

regular - Standard icon style
bold - Thicker, bolder lines
light - Lighter, thinner lines
broken - Broken line style
two-tone - Two-color style
outline - Outline only style

<Icon description="home" variant="regular" size={24} />
<Icon description="home" variant="bold" size={24} />
<Icon description="home" variant="light" size={24} />
<Icon description="home" variant="broken" size={24} />
<Icon description="home" variant="two-tone" size={24} />
<Icon description="home" variant="outline" size={24} />

Styling

Using Colors

<Icon description="home" size={24} color="#3b82f6" />
<Icon description="home" size={24} color="rgb(59, 130, 246)" />
<Icon description="home" size={24} color="var(--primary-color)" />

Custom Styles

<Icon 
  description="home" 
  size={24}
  style={{ 
    color: '#3b82f6',
    cursor: 'pointer',
    transition: 'color 0.2s'
  }}
/>

CSS Classes

<Icon 
  description="home" 
  size={24}
  className="text-blue-500 hover:text-blue-700 cursor-pointer"
/>

Loading States

Default Loading

By default, an empty space is shown while loading:

<Icon description="home" size={24} />

Skeleton Loader

Show a skeleton placeholder while loading:

<Icon description="home" size={24} fallback={true} />

Custom Fallback

Provide a custom fallback component:

<Icon 
  description="home" 
  size={24} 
  fallback={<Spinner />}
/>

Examples

function Navigation() {
  return (
    <nav>
      <Icon description="home" size={20} color="#000" />
      <Icon description="search" size={20} color="#000" />
      <Icon description="settings" size={20} color="#000" />
      <Icon description="user profile" size={20} color="#000" />
    </nav>
  );
}

Button Icons

function ActionButton() {
  return (
    <button className="flex items-center gap-2">
      <Icon description="download" size={16} color="#fff" />
      Download
    </button>
  );
}

Status Icons

function StatusIndicator({ status }) {
  const iconMap = {
    success: "checkmark circle",
    error: "error warning",
    pending: "clock time"
  };

  return (
    <Icon 
      description={iconMap[status]} 
      size={24} 
      color={status === 'success' ? 'green' : status === 'error' ? 'red' : 'orange'}
    />
  );
}

function SocialLinks() {
  return (
    <div className="flex gap-4">
      <Icon description="twitter logo" size={24} />
      <Icon description="facebook logo" size={24} />
      <Icon description="instagram logo" size={24} />
      <Icon description="linkedin logo" size={24} />
    </div>
  );
}

Best Practices

Clear Descriptions

Use clear, specific descriptions for better results:

// Good
<Icon description="home house" />
<Icon description="user profile" />
<Icon description="shopping cart" />

// Less specific
<Icon description="home" />
<Icon description="person" />
<Icon description="cart" />

Consistent Sizing

Use consistent icon sizes throughout your UI:

const ICON_SIZES = {
  sm: 16,
  md: 20,
  lg: 24,
  xl: 32
};

<Icon description="home" size={ICON_SIZES.md} />

Accessibility

Always provide meaningful descriptions for screen readers:

<Icon 
  description="home" 
  size={24}
  alt="Navigate to home page"
/>

Tips for AI Agents

When using Assets AI in AI-generated code:

Use descriptive prompts: "user profile icon" instead of "icon"
Specify variant when style matters: variant="bold" for emphasis
Always set appropriate sizes for the context
Use fallback loaders for better UX
Consider caching - same descriptions return cached results

// AI agent generated example
function DynamicUI() {
  return (
    <div>
      <Icon description="dashboard analytics" variant="regular" size={24} fallback={true} />
      <Icon description="notification bell" variant="bold" size={20} fallback={true} />
      <Icon description="settings gear" variant="outline" size={24} fallback={true} />
    </div>
  );
}