{"_id":"@emiluzelac/icona","_rev":"3-10de42d4dc30cf20efa16cb480ea3dcc","name":"@emiluzelac/icona","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@emiluzelac/icona","version":"0.1.0","keywords":["react","icons","svg","solar-icons","icon-library"],"license":"CC-BY-4.0","_id":"@emiluzelac/icona@0.1.0","maintainers":[{"name":"emiluzelac","email":"emil@uzelac.me"}],"dist":{"shasum":"b8a2e741bf87e45a0170a8112d059d0cd0ae3116","tarball":"https://registry.npmjs.org/@emiluzelac/icona/-/icona-0.1.0.tgz","fileCount":7,"integrity":"sha512-wGk7XVrvKNBkmWXd54X3DtGjvPoCCm1Dpph4LF99W3CdLT1H8wXijMDe0cKNjay/194Up2NEN+u18R7vfM2HMw==","signatures":[{"sig":"MEUCIGqhtgQPNgUAWIZbCXLEo0NMv9RkLGQ/w4yKFO6e06RlAiEArzLHYNea7atOrSGVwDI+Au0vKQIeE/sYu8H7bdVwvx4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31768787},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"gitHead":"1a60a5edfd9d36058fd3d095d347eb51a2cc9a03","scripts":{"test":"node --test scripts/smoke-test.mjs","build":"npm run generate && tsup","generate":"node scripts/generate-icons.mjs","prepublishOnly":"npm run build && npm test"},"_npmUser":{"name":"emiluzelac","email":"emil@uzelac.me"},"_npmVersion":"10.9.2","description":"React icon library — 7,476 icons in 6 styles from the Solar icon set, tree-shakeable with a Lucide-inspired API.","directories":{},"sideEffects":false,"_nodeVersion":"22.13.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^18.3.1","svgson":"^5.3.1","react-dom":"^18.3.1","typescript":"^5.7.3","@types/node":"^22.10.1","@types/react":"^18.3.18"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/icona_0.1.0_1780730046682_0.015372104518937446","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@emiluzelac/icona","version":"0.1.1","keywords":["react","icons","svg","solar-icons","icon-library"],"license":"CC-BY-4.0","_id":"@emiluzelac/icona@0.1.1","maintainers":[{"name":"emiluzelac","email":"emil@uzelac.me"}],"homepage":"https://github.com/emiluzelac/icona#readme","bugs":{"url":"https://github.com/emiluzelac/icona/issues"},"dist":{"shasum":"db4c375f4a46d6a53d65f4b5c6d2514199cba278","tarball":"https://registry.npmjs.org/@emiluzelac/icona/-/icona-0.1.1.tgz","fileCount":7,"integrity":"sha512-H+i9iFPO/9b128kki24tp9rHp75sSif/UAVhophPFdB9fV9Y6LiugKdH9PDjOKnOXAJmULyzqXRBZ8RuTrMc2A==","signatures":[{"sig":"MEYCIQCPLnNFpWdwxr63O7MEnLOvUpUfCMB+2gQW4ae9K4xy1AIhAIazTcA56shAtOeQPlK2PeWHJc5gkQpkvxVkOqYmh1kt","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31769045},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"gitHead":"c186bfcee448511b5f7dccb86a38cc06909dff3b","scripts":{"test":"node --test scripts/smoke-test.mjs","build":"npm run generate && tsup","generate":"node scripts/generate-icons.mjs","prepublishOnly":"npm run build && npm test"},"_npmUser":{"name":"emiluzelac","email":"emil@uzelac.me"},"repository":{"url":"git+https://github.com/emiluzelac/icona.git","type":"git","directory":"icona"},"_npmVersion":"10.9.2","description":"React icon library — 7,476 icons in 6 styles from the Solar icon set, tree-shakeable with a Lucide-inspired API.","directories":{},"sideEffects":false,"_nodeVersion":"22.13.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^18.3.1","svgson":"^5.3.1","react-dom":"^18.3.1","typescript":"^5.7.3","@types/node":"^22.10.1","@types/react":"^18.3.18"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/icona_0.1.1_1780775065903_0.33236282527331173","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"_id":"@emiluzelac/icona@0.2.0","bugs":{"url":"https://github.com/emiluzelac/icona/issues"},"dist":{"shasum":"00e432779148964b0e4a8037f74d064707049072","tarball":"https://registry.npmjs.org/@emiluzelac/icona/-/icona-0.2.0.tgz","fileCount":7,"integrity":"sha512-WZN94M34b7xLWKlGHDujtWBJJQOX6KQv5ckU43rlvfM10Hxfrg2HUk7VwN+VPh49UdNPV7Vj96Ks/qiyxpXQtA==","signatures":[{"sig":"MEUCIANuV0GQBIm5deY+J/p6U8fcpxAsQMcduI+4FG7G3l/VAiEA8MvlKV4TBDuGWlZVNbS2tSTSXczT0x9ebzpO4has+uE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCsZp5eMgopOd5iIgnY9ykTrwCjRghD6HBXjdYYec9huQIhAJzmo+3QJEwRWvjzzzeXuEQfBwPPTunNbrUoNQrPmJ3y"}],"unpackedSize":31802391},"main":"./dist/index.cjs","name":"@emiluzelac/icona","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"gitHead":"524fe82a13f2e9dbfa980927ee79d210f6077b86","license":"CC-BY-4.0","scripts":{"test":"node --test scripts/smoke-test.mjs","build":"npm run generate && tsup","generate":"node scripts/generate-icons.mjs","prepublishOnly":"npm run build && npm test"},"version":"0.2.0","_npmUser":{"name":"emiluzelac","email":"emil@uzelac.me"},"homepage":"https://github.com/emiluzelac/icona#readme","keywords":["react","icons","svg","solar-icons","icon-library"],"repository":{"url":"git+https://github.com/emiluzelac/icona.git","type":"git","directory":"icona"},"_npmVersion":"11.16.0","description":"React icon library — 7,494 icons in 6 styles from the Solar icon set, tree-shakeable with a Lucide-inspired API.","directories":{},"maintainers":[{"name":"emiluzelac","email":"emil@uzelac.me"}],"sideEffects":false,"_nodeVersion":"24.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^18.3.1","svgson":"^5.3.1","react-dom":"^18.3.1","typescript":"^5.7.3","@types/node":"^22.10.1","@types/react":"^18.3.18"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/icona_0.2.0_1789733221278_0.01915378144320834"}}},"time":{"created":"2026-06-06T07:14:06.515Z","modified":"2026-09-18T12:07:01.608Z","0.1.0":"2026-06-06T07:14:06.915Z","0.1.1":"2026-06-06T19:44:26.157Z","0.2.0":"2026-09-18T12:07:01.449Z"},"bugs":{"url":"https://github.com/emiluzelac/icona/issues"},"license":"CC-BY-4.0","homepage":"https://github.com/emiluzelac/icona#readme","keywords":["react","icons","svg","solar-icons","icon-library"],"repository":{"url":"git+https://github.com/emiluzelac/icona.git","type":"git","directory":"icona"},"description":"React icon library — 7,494 icons in 6 styles from the Solar icon set, tree-shakeable with a Lucide-inspired API.","maintainers":[{"name":"emiluzelac","email":"emil@uzelac.me"}],"readme":"# icona\n\n7,494 icons across 6 visual styles, sourced from [Solar Icons](https://solar-icons.vercel.app)\nby [480 Design](https://www.figma.com/community/file/1166831539721848736)\nand exposed as tree-shakeable React components. The API is inspired by\n[Lucide](https://lucide.dev) (per-icon ESM exports, `forwardRef`, `currentColor`)\nand [Phosphor Icons](https://phosphoricons.com) (multiple weights/styles).\n\n## Install\n\n```bash\nnpm install @emiluzelac/icona\n```\n\nPeer deps: `react ^17 || ^18 || ^19`.\n\n## Usage\n\n```tsx\nimport { HeartLinear, HeartBoldDuotone, BellOutline } from \"@emiluzelac/icona\";\n\nexport function Toolbar() {\n  return (\n    <>\n      <HeartLinear size={24} />\n      <HeartBoldDuotone size={32} color=\"crimson\" />\n      <BellOutline size={20} strokeWidth={2} />\n    </>\n  );\n}\n```\n\nEvery icon accepts the standard `SVGProps<SVGSVGElement>` plus:\n\n| Prop          | Type                  | Default        | Notes                                                              |\n| ------------- | --------------------- | -------------- | ------------------------------------------------------------------ |\n| `size`        | `number \\| string`    | `24`           | Sets `width` and `height`.                                         |\n| `color`       | `string`              | `currentColor` | All paths reference `currentColor`, so this works via CSS too.     |\n| `strokeWidth` | `number \\| string`    | —              | Forwarded to the root `<svg>`. Solar's Linear/Broken art bakes `stroke-width=\"1.5\"` into each path (which takes precedence), so it has no visible effect on those styles yet. |\n| `title`       | `string`              | —              | When set, adds `<title>` and `role=\"img\"` for accessibility.       |\n\n## Styles\n\nEach base icon ships in 6 styles. The component name is `<BaseName><Style>`:\n\n| Style          | Visual                              | Example                  |\n| -------------- | ----------------------------------- | ------------------------ |\n| `Linear`       | Outline strokes                     | `HeartLinear`            |\n| `Outline`      | Outlined fill (closed paths)        | `HeartOutline`           |\n| `Bold`         | Solid fills                         | `HeartBold`              |\n| `BoldDuotone`  | Solid + 50% opacity layer           | `HeartBoldDuotone`       |\n| `LineDuotone`  | Lines + 50% opacity fill            | `HeartLineDuotone`       |\n| `Broken`       | Stylized broken outline             | `HeartBroken`            |\n\nDiscoverable at runtime:\n\n```ts\nimport { iconNames, iconStyles } from \"@emiluzelac/icona\";\n\niconStyles; // [\"Bold\", \"BoldDuotone\", \"Broken\", \"LineDuotone\", \"Linear\", \"Outline\"]\niconNames.length; // 7494\n```\n\n> **Tip — naming icons starting with a digit:** SVGs whose filename begins with\n> a number get an `Icon` prefix, e.g. `4k.svg` → `Icon4kLinear`.\n\n## Color & duotone behavior\n\nThe source SVGs use a few hardcoded colors. They are normalized at build time:\n\n- Primary fills/strokes (`#1C274C`, `#1C274D`) → `currentColor`.\n- Duotone secondary (`#8E93A6`) → `currentColor` with `opacity=\"0.5\"` applied\n  to that element. This preserves the visual layering while making the icon\n  fully themeable from CSS.\n\nResult: every icon is monochrome via `color` (or any ancestor's `color`) and\nduotone variants automatically adapt to your theme.\n\n## Tree-shaking\n\nIcona ships a single barrel (`dist/index.js`) with `sideEffects: false` and\nfully isolated icon definitions. Modern bundlers (Vite, webpack 5, esbuild,\nRollup, Next.js, Remix) include only what you import — even though the package\nexposes 7,494 components, your bundle only gets the ones you use.\n\n## Demo\n\nA live preview app with search, style switcher, and click-to-copy lives in\n[examples/preview](./examples/preview):\n\n```bash\ncd examples/preview\nnpm install\nnpm run dev\n```\n\n## Scripts (this repo)\n\n```bash\nnpm run generate   # regenerate src/icons/*.tsx + src/index.ts from /svg\nnpm run build      # tsup → dist/index.{js,cjs,d.ts}\nnpm test           # smoke tests against dist\n```\n\n## License & credits\n\nIcon artwork: [Solar Icons](https://solar-icons.vercel.app) by\n[480 Design](https://www.figma.com/@480design), licensed under\n[CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). This package\n(generated components and tooling) is distributed under the same terms —\nsee [LICENSE](./LICENSE). If you use icona, the Solar attribution carries\nthrough; no extra action is needed beyond keeping this notice.\n\nA few icons have no Solar equivalent and are composed from Solar's own\ngeometry (e.g. `chevron-up-down` reuses the `alt-arrow` shapes); they inherit\nthe same license and style conventions.\n","readmeFilename":"README.md"}