{"_id":"@caidentity/glyphkit","name":"@caidentity/glyphkit","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@caidentity/glyphkit","version":"0.1.0","description":"Icons for @caidentity/glyphkit","license":"MIT","keywords":["ICON","glyphkit","icons","react","svg","design-library"],"type":"module","main":"./src/index.ts","module":"./src/index.ts","types":"./src/index.ts","exports":{".":{"types":"./src/index.ts","import":"./src/index.ts"}},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"sideEffects":false,"_id":"@caidentity/glyphkit@0.1.0","_nodeVersion":"24.11.0","_npmVersion":"11.6.1","dist":{"integrity":"sha512-9aWo0/ZJhZpwQSQ7ZEkEIWOlwu2FrnDzvSYaM6N0Qo9dxAGNg3S9U5KYXUvEo3EFofCfY6PgfB798TPQ/ZsKnA==","shasum":"59b4bcd5cfbfc8cb7365ff3d97ca8f89e970fd23","tarball":"https://registry.npmjs.org/@caidentity/glyphkit/-/glyphkit-0.1.0.tgz","fileCount":10,"unpackedSize":24414,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAD2CEiSDk5cI2yio1nvdWdWepyOGknCZHNWPNy6IdYBAiEAkttAVI4CTLZiYK8L5EyDCXMeqHMuwxr+uhAY7hceMO0="}]},"_npmUser":{"name":"caidentity","email":"craig@caidentity.com"},"directories":{},"maintainers":[{"name":"caidentity","email":"craig@caidentity.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/glyphkit_0.1.0_1768768362445_0.4642498295541724"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-18T20:32:42.375Z","0.1.0":"2026-01-18T20:32:42.599Z","modified":"2026-01-18T20:32:42.818Z"},"maintainers":[{"name":"caidentity","email":"craig@caidentity.com"}],"description":"Icons for @caidentity/glyphkit","keywords":["ICON","glyphkit","icons","react","svg","design-library"],"license":"MIT","readme":"# @caidentity/glyphkit\n\nReact icon components generated from SVG sources.\n\n- Version: 0.1.0\n- Icons: 8\n- Manifest: `iconsManifest` (id, name, component, viewBox, tags)\n\n## Install\n\n```bash\nnpm install @caidentity/glyphkit\n```\n\n## Usage\n\n```tsx\nimport { Icon } from '@caidentity/glyphkit'\n\nexport function Example() {\n return (\n
\n \n \n \n
\n )\n}\n```\n\n## Component Props\n\nThe Icon component extends `SVGProps` with these additional props:\n\n- `name: string` - **Required.** Name of the icon to render (case-insensitive)\n- `size?: number | string` - Icon size in pixels (default: 24)\n- `title?: string` - Accessible title for screen readers\n\n### Animation Props\n\n- `animated?: boolean` - Enable or disable animation when available\n- `animationDuration?: number` - Override animation duration in milliseconds\n- `animationDelay?: number` - Delay before animation starts in milliseconds\n- `animationLoop?: boolean | number` - `true` for infinite, `false` for one-time, or a number of iterations\n- `animationDirection?: 'normal' | 'reverse' | 'alternate'` - Playback direction\n- `onAnimationStart?: () => void` and `onAnimationEnd?: () => void`\n\nAll standard SVG props are supported (className, style, onClick, etc.).\n\n### Duotone Props\n\n- `duotone1?: string`, `duotone2?: string`, `duotone3?: string`\n- Apply when the icon declares layered content via `duotoneLayers` in the registry.\n- Mapped to CSS variables `--duotone1/2/3` for layer-targeted colors.\n- When any duotone color is provided and the icon reports layered content, `fill` is omitted so layered colors determine appearance.\n- Otherwise, `fill` falls back to `currentColor` or the explicit `fill` prop.\n\nExample:\n\n```tsx\n\n```\n\n## Theming\n\nIcons use `fill=\"currentColor\"` by default, so they inherit the text color of their container:\n\n```tsx\n
\n {/* Will be blue */}\n
\n\n {/* Override with style */}\n```\n\n## Available Icons\n\n```tsx\nimport { iconsManifest } from '@caidentity/glyphkit'\n\n// Get all available icons\nconsole.log(iconsManifest)\n\n// Each icon has: { id, name, component, width, height, viewBox, tags?, duotoneLayers?, duotoneAssignments?, animation? }\n```\n\n## Animation Data Access\n\nFor Lottie-like animation processing, access the full keyframes data:\n\n```tsx\nimport { iconsManifest } from '@caidentity/glyphkit'\n\nconst animatedIcon = iconsManifest.find(icon => icon.animation?.keyframes)\nif (animatedIcon?.animation) {\n // Full keyframes for custom animation processing\n console.log('Keyframes:', animatedIcon.animation.keyframes)\n console.log('Duration:', animatedIcon.animation.duration)\n console.log('Loop:', animatedIcon.animation.loop)\n\n // Implement your own animation logic similar to Lottie\n function animateIcon(time: number) {\n // Process keyframes at current time\n const currentFrame = interpolateKeyframes(animatedIcon.animation.keyframes, time)\n return currentFrame\n }\n}\n```\n\n## Duotone Layer Access\n\nAccess duotone layer information for custom color processing:\n\n```tsx\nimport { iconsManifest } from '@caidentity/glyphkit'\n\nconst duotoneIcon = iconsManifest.find(icon => icon.duotoneLayers)\nif (duotoneIcon) {\n console.log('Duotone layers:', duotoneIcon.duotoneLayers) // 2 or 3\n console.log('Shape assignments:', duotoneIcon.duotoneAssignments) // { shapeId: 'duotone1' | 'duotone2' | 'duotone3' }\n\n // Access via Icon component registry (advanced usage)\n import { Icon } from '@caidentity/glyphkit'\n const iconRegistry = (Icon as any).iconRegistry\n const registryEntry = iconRegistry[duotoneIcon.component]\n console.log('Duotone assignments:', registryEntry.duotoneAssignments)\n}\n```\n\n## TypeScript Support\n\n```tsx\nimport { Icon, IconName } from '@caidentity/glyphkit'\n\n// Type-safe icon names\nfunction MyComponent() {\n return \n}\n\n// IconName is a union of all available icon names\nconst iconName: IconName = 'home'\n```\n","readmeFilename":"README.md","_rev":"1-fb7e58bbf66abc26da0ce800749b72ad"}