@caidentity/testicon

React icon components generated from SVG sources.

• Version: 2.2.31
• Icons: 2
• Manifest: iconsManifest (id, name, component, viewBox, tags)

Install

npm install @caidentity/testicon

Usage

import { Icon } from '@caidentity/testicon'

export function Example() {
  return (
    <div style={{ display: 'flex', gap: 12 }}>
      <Icon name="home" size={24} />
      <Icon name="search" size={20} />
      <Icon name="user" size={16} className="user-icon" />
    </div>
  )
}

Component Props

The Icon component extends SVGProps<SVGSVGElement> with these additional props:

• name: string - Required. Name of the icon to render (case-insensitive)
• size?: number | string - Icon size in pixels (default: 24)
• title?: string - Accessible title for screen readers

Animation Props

• animated?: boolean - Enable or disable animation when available
• animationDuration?: number - Override animation duration in milliseconds
• animationDelay?: number - Delay before animation starts in milliseconds
• animationLoop?: boolean | number - true for infinite, false for one-time, or a number of iterations
• animationDirection?: 'normal' | 'reverse' | 'alternate' - Playback direction
• onAnimationStart?: () => void and onAnimationEnd?: () => void

All standard SVG props are supported (className, style, onClick, etc.).

Duotone Props

• duotone1?: string, duotone2?: string, duotone3?: string
• Apply when the icon declares layered content via duotoneLayers in the registry.
• Mapped to CSS variables --duotone1/2/3 for layer-targeted colors.
• When any duotone color is provided and the icon reports layered content, fill is omitted so layered colors determine appearance.
• Otherwise, fill falls back to currentColor or the explicit fill prop.

Example:

<Icon
  name="logo"
  duotone1="#4F46E5" // primary layer
  duotone2="#A78BFA" // secondary layer
  size={32}
/>

Theming

Icons use fill="currentColor" by default, so they inherit the text color of their container:

<div style={{ color: 'blue' }}>
  <Icon name="home" /> {/* Will be blue */}
</div>

<Icon name="home" style={{ color: 'red' }} /> {/* Override with style */}

Available Icons

import { iconsManifest } from '@caidentity/testicon'

// Get all available icons
console.log(iconsManifest)

// Each icon has: { id, name, component, width, height, viewBox, tags?, duotoneLayers?, duotoneAssignments?, animation? }

Animation Data Access

For Lottie-like animation processing, access the full keyframes data:

import { iconsManifest } from '@caidentity/testicon'

const animatedIcon = iconsManifest.find(icon => icon.animation?.keyframes)
if (animatedIcon?.animation) {
  // Full keyframes for custom animation processing
  console.log('Keyframes:', animatedIcon.animation.keyframes)
  console.log('Duration:', animatedIcon.animation.duration)
  console.log('Loop:', animatedIcon.animation.loop)

  // Implement your own animation logic similar to Lottie
  function animateIcon(time: number) {
    // Process keyframes at current time
    const currentFrame = interpolateKeyframes(animatedIcon.animation.keyframes, time)
    return currentFrame
  }
}

Duotone Layer Access

Access duotone layer information for custom color processing:

import { iconsManifest } from '@caidentity/testicon'

const duotoneIcon = iconsManifest.find(icon => icon.duotoneLayers)
if (duotoneIcon) {
  console.log('Duotone layers:', duotoneIcon.duotoneLayers) // 2 or 3
  console.log('Shape assignments:', duotoneIcon.duotoneAssignments) // { shapeId: 'duotone1' | 'duotone2' | 'duotone3' }

  // Access via Icon component registry (advanced usage)
  import { Icon } from '@caidentity/testicon'
  const iconRegistry = (Icon as any).iconRegistry
  const registryEntry = iconRegistry[duotoneIcon.component]
  console.log('Duotone assignments:', registryEntry.duotoneAssignments)
}

TypeScript Support

import { Icon, IconName } from '@caidentity/testicon'

// Type-safe icon names
function MyComponent() {
  return <Icon name="home" size={24} />
}

// IconName is a union of all available icon names
const iconName: IconName = 'home'