{"_id":"@dsai-io/icons","name":"@dsai-io/icons","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.3":{"name":"@dsai-io/icons","version":"1.0.3","description":"DSAi Icons, accessible React icon components based on Bootstrap Icons","type":"module","main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./types":{"types":"./dist/types.d.ts","import":"./dist/types.js","require":"./dist/types.cjs"}},"scripts":{"build":"tsup","build:watch":"tsup --watch","dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx","lint:fix":"eslint src --ext .ts,.tsx --fix","typecheck":"tsc --noEmit","icons:generate":"dsai icons build --format react","icons:figma":"node scripts/generate-figma-code-connect.cjs"},"keywords":["icons","react-icons","bootstrap-icons","design-system","dsai","accessible","svg-icons","icon-components"],"sideEffects":false,"peerDependencies":{"react":">=18.0.0","typescript":">=5.0.0"},"peerDependenciesMeta":{"typescript":{"optional":true}},"devDependencies":{"@dsai-io/tools":"workspace:^","@figma/code-connect":"^1.4.2"},"engines":{"node":">=22.0.0"},"license":"MIT","publishConfig":{"access":"public"},"_id":"@dsai-io/icons@1.0.3","gitHead":"20b14399893f60cdac717b637ebfd10007344b46","_nodeVersion":"22.22.2","_npmVersion":"10.9.7","dist":{"integrity":"sha512-Zm9ta27u3JwJdktgNbuOxM7+dthAHGdx46QgEwIKGPheStMq08ZLZAh2C6P4bP9mrgtvzfq5H2Qx91AYFCzarQ==","shasum":"ab35da12250dcb11607319cbe1228108ce83faeb","tarball":"https://registry.npmjs.org/@dsai-io/icons/-/icons-1.0.3.tgz","fileCount":4174,"unpackedSize":25131888,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDSNdUpdKJ2rShmUm1xW5kMm5RVqmZsoesZIudTdnbHYAIgM7sL8kfrtm56e4n4C22QsQkwXq7si2R86ZjJTFQost0="}]},"_npmUser":{"name":"epiklyllc","email":"michel@epikly.com"},"directories":{},"maintainers":[{"name":"epiklyllc","email":"michel@epikly.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/icons_1.0.3_1775215801152_0.9666366020522219"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-03T11:30:01.057Z","1.0.3":"2026-04-03T11:30:01.386Z","modified":"2026-04-03T11:30:01.590Z"},"maintainers":[{"name":"epiklyllc","email":"michel@epikly.com"}],"description":"DSAi Icons, accessible React icon components based on Bootstrap Icons","keywords":["icons","react-icons","bootstrap-icons","design-system","dsai","accessible","svg-icons","icon-components"],"license":"MIT","readme":"# @dsai-io/icons\n\nBootstrap Icons as accessible React components. 2000+ icons with full accessibility support.\n\n## Installation\n\n```bash\nnpm install @dsai-io/icons\n# or\npnpm add @dsai-io/icons\n```\n\nReact 18+ is required as a peer dependency.\n\n## Usage\n\n```tsx\nimport { ArrowLeftIcon, SearchIcon } from '@dsai-io/icons';\n\n// Decorative (inside a labelled element)\n<Button startIcon={<ArrowLeftIcon />}>Go back</Button>\n\n// Semantic (standalone, needs label)\n<SearchIcon aria-label=\"Search\" />\n\n// With tooltip\n<WarningIcon title=\"Warning\" />\n```\n\n## Props\n\n| Prop          | Type               | Default          | Description                           |\n| ------------- | ------------------ | ---------------- | ------------------------------------- |\n| `size`        | `number \\| string` | `16`             | Icon size in pixels or CSS value      |\n| `color`       | `string`           | `'currentColor'` | Fill color                            |\n| `className`   | `string`           | -                | Additional CSS classes                |\n| `title`       | `string`           | -                | Tooltip/title (renders `<title>` tag) |\n| `aria-label`  | `string`           | -                | Accessible label for screen readers   |\n| `aria-hidden` | `boolean`          | auto             | Hide from assistive technology        |\n\n## Accessibility\n\nIcons follow WAI-ARIA best practices for SVG accessibility:\n\n### Decorative Icons (default)\n\nWhen used inside buttons, alerts, or next to text labels — no additional props needed. The icon is hidden from assistive technology automatically via `aria-hidden=\"true\"`.\n\n```tsx\n<Button startIcon={<ArrowLeftIcon />}>Go back</Button>\n```\n\n### Semantic Icons\n\nWhen used standalone or as the only content, pass `aria-label` for screen reader announcement:\n\n```tsx\n<ArrowLeftIcon aria-label=\"Navigate back\" />\n```\n\n### Icons with Title\n\nPass `title` for tooltip and basic AT support. Renders a `<title>` element inside the SVG:\n\n```tsx\n<WarningIcon title=\"Warning\" />\n```\n\n## Generating Icons\n\nIcons are auto-generated from Bootstrap Icons SVG files:\n\n```bash\n# Generate React components\npnpm icons:generate\n\n# Generate Figma Code Connect mappings\npnpm icons:figma\n```\n\n## File Structure\n\n```text\npackages/@dsai-io/icons/\n├── src/\n│   ├── index.ts               # Barrel export\n│   ├── types.ts               # IconProps and IconComponent types\n│   ├── Icon.figma.tsx          # Figma Code Connect mapping\n│   └── components/            # Auto-generated icon components\n│       ├── index.ts\n│       ├── ActivityIcon.tsx\n│       ├── AlarmIcon.tsx\n│       └── ...\n├── scripts/\n│   └── generate-figma-code-connect.cjs\n├── tsup.config.ts\n└── package.json\n```\n","readmeFilename":"README.md","_rev":"1-bc374a216d0947507d8cb936e54125f7"}