component-create-icon

Icon Component Creation Request

Please create a new icon component following our specialized icon patterns, SVG optimization principles, and accessibility standards.

🎯 ICON CREATION OBJECTIVES:

1. OPTIMIZE SVG performance with efficient rendering, minimal file sizes, and build-time optimization
2. ENSURE accessibility compliance with proper ARIA attributes, semantic usage, and screen reader support
3. INTEGRATE with design system for consistent sizing, styling, and theming across all icons
4. PROVIDE flexible API with multiple icon sources, dynamic loading, and customization options
5. FOLLOW performance standards for bundle optimization, tree shaking, and runtime efficiency

📋 ICON DEVELOPMENT METHODOLOGY:

STEP 1: Icon Planning and Architecture

Determine Icon Type and Location:

• Client Component: src/components/client/icons/ - Interactive icons with state or animations
• Server Component: src/components/server/icons/ - Static icons for SSR optimization
• Icon Categories:
  • System Icons: UI elements, actions, states (system/)
  • Brand Icons: Logos, social media, company branding (brand/)
  • Content Icons: Illustrations, decorative elements (content/)
  • Custom Icons: Project-specific iconography (custom/)

Icon Source Strategy:

• Icon Libraries: Heroicons, React Icons, Radix Icons, Lucide
• Custom SVGs: Project-specific icons and illustrations
• Icon Fonts: Legacy support and specific use cases
• Dynamic Icons: Runtime-generated or API-sourced icons

STEP 2: SVG Optimization and Performance

SVG Optimization Pipeline:

// Optimized SVG icon component with build-time optimization
interface IconProps {
  /** Icon name or source */
  name?: string
  /** Custom SVG path or content */
  svg?: string
  /** Icon size (design system tokens) */
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number
  /** Icon color (theme-aware) */
  color?: 'current' | 'primary' | 'secondary' | 'muted' | string
  /** Accessibility label */
  label?: string
  /** Decorative icon (hidden from screen readers) */
  decorative?: boolean
  /** Animation type */
  animation?: 'none' | 'spin' | 'pulse' | 'bounce'
  /** Additional CSS classes */
  className?: string
  /** Click handler for interactive icons */
  onClick?: () => void
  /** Test identifier */
  'data-testid'?: string
}

const Icon = ({ 
  name,
  svg,
  size = 'md',
  color = 'current',
  label,
  decorative = false,
  animation = 'none',
  className,
  onClick,
  ...props 
}) => {
  const iconContent = useMemo(() => {
    if (svg) {
      return optimizeSVGContent(svg)
    }
    
    if (name) {
      return getIconFromLibrary(name)
    }
    
    return null
  }, [name, svg])

  const sizeValue = useMemo(() => {
    if (typeof size === 'number') return size
    return getSizeFromToken(size)
  }, [size])

  const colorValue = useMemo(() => {
    if (color === 'current') return 'currentColor'
    return getColorFromTheme(color)
  }, [color])

  if (!iconContent) {
    console.warn(`Icon not found: ${name}`)
    return null
  }

  return (
    <svg
      width={sizeValue}
      height={sizeValue}
      viewBox={iconContent.viewBox}
      fill={colorValue}
      aria-label={decorative ? undefined : label}
      aria-hidden={decorative}
      role={decorative ? 'presentation' : 'img'}
      className={cn(
        'icon',
        `icon-${size}`,
        `icon-${animation}`,
        onClick && 'icon-interactive',
        className
      )}
      onClick={onClick}
      {...props}
    >
      {iconContent.paths.map((path, index) => (
        <path 
          key={index} 
          d={path.d} 
          fillRule={path.fillRule}
          clipRule={path.clipRule}
        />
      ))}
    </svg>
  )
}