{"_id":"@duo-icons/svelte","name":"@duo-icons/svelte","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@duo-icons/svelte","author":{"name":"fazdiu"},"description":"Duo Icons is a library of modern and beautiful duotone icons, designed for easy use in svelte projects. Each icon is crafted with a two-tone color scheme, providing a unique and stylish look that enhances the visual appeal of your applications. With a wid","license":"MIT","version":"1.0.1","keywords":["duotone","icons","open","source","tailwind icons","css","html","duotone icons open source"],"type":"module","types":"./dist/index.d.ts","main":"./dist/index.umd.cjs","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.umd.cjs"}},"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"peerDependencies":{"svelte":"^5.53.7"},"devDependencies":{"@sveltejs/vite-plugin-svelte":"^6.2.4","@tsconfig/svelte":"^5.0.8","@types/node":"^25.4.0","svelte":"^5.53.7","svelte-check":"^4.4.5","svelte-preprocess":"^6.0.3","typescript":"^5.9.3","vite":"^7.3.1","vite-plugin-dts":"^4.5.4"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/fazdiu/duo-icons.git"},"bugs":{"url":"https://github.com/fazdiu/duo-icons/issues"},"homepage":"https://github.com/fazdiu/duo-icons#readme","gitHead":"c67f3d77ddff1d56f1bd21f16cfbd8fb1b1578c7","_id":"@duo-icons/svelte@1.0.1","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-aMCD48jHyFzwkz0ylj91Tl2jqqmGJmuXKz7XiTL8E3voxAzS6cbUgWMaKXuD6rIO2LKDvOi1nqDzDlBNX93eiA==","shasum":"8be9577ae0bfc0904015b91b4aefd909c2097df6","tarball":"https://registry.npmjs.org/@duo-icons/svelte/-/svelte-1.0.1.tgz","fileCount":6,"unpackedSize":237090,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDf9wMR2eLoWZ1/Qp+5psVOnkUIgkTNvxhRqbvz9M/quQIgVrMsyiyRGh/e8J2+89UAsb/RDuchMWmQjQznkOiO4jo="}]},"_npmUser":{"name":"fernandocfernandez","email":"ymb4jodkt@mozmail.com"},"directories":{},"maintainers":[{"name":"fernandocfernandez","email":"ymb4jodkt@mozmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/svelte_1.0.1_1773350830130_0.6613335689623199"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-12T21:27:10.010Z","1.0.1":"2026-03-12T21:27:10.316Z","modified":"2026-03-12T21:27:10.556Z"},"maintainers":[{"name":"fernandocfernandez","email":"ymb4jodkt@mozmail.com"}],"description":"Duo Icons is a library of modern and beautiful duotone icons, designed for easy use in svelte projects. Each icon is crafted with a two-tone color scheme, providing a unique and stylish look that enhances the visual appeal of your applications. With a wid","homepage":"https://github.com/fazdiu/duo-icons#readme","keywords":["duotone","icons","open","source","tailwind icons","css","html","duotone icons open source"],"repository":{"type":"git","url":"git+https://github.com/fazdiu/duo-icons.git"},"author":{"name":"fazdiu"},"bugs":{"url":"https://github.com/fazdiu/duo-icons/issues"},"license":"MIT","readme":"
\n

Duo Icons - Svelte

\n

\n \"Support\n \"github\"\n \"npm\"\n \"svelte\"\n \"typescript\"\n \"javascript\"\n

\n
\n\nDuo Icons is a modern duotone icon collection built for Svelte 5 projects. Each icon is a lightweight Svelte component with two layers (primary and secondary), providing a stylish two‑tone look that integrates seamlessly with your app.\n\n## Installation\n\nInstall the package via npm or yarn:\n\n```bash\nnpm install @duo-icons/svelte\n# or\nyarn add @duo-icons/svelte\n```\n\n### Peer Dependencies\n\n- `svelte` ^5.53.7\n\n## Basic Usage\n\nImport icons from the library and use them like any other component:\n\n```svelte\n\n\n
\n \n \n \n
\n```\n\n## Available Icons\n\nThe complete collection of all available icons is at [https://duoicons.vercel.app/](https://duoicons.vercel.app/), providing the necessary resources to implement them into your project.\n\n## Props & Options\n\nAll icons extend native SVG attributes and accept an extra `size` prop:\n\n| Prop | Type | Default | Description |\n|-----------|----------------------|---------|-------------|\n| `size` | `number \\| string` | `24` | Width/height of the icon (px, rem, etc.) |\n| `class` | `string` | — | CSS classes applied to the SVG container |\n| ...svg attrs | various | — | Any standard SVG attribute (e.g. `fill`, `stroke`, `aria-*`) |\n\n### Duotone Layers\n\nThe component markup exposes two CSS classes on the `` elements:\n\n- `.duo-icons-primary-layer` – the main layer\n- `.duo-icons-secondary-layer` – the secondary (faded) layer\n\nCustomize its appearance with Tailwind utility classes provided by `@duo-icons/tailwind` or standard CSS.\n\n```svelte\n\n\n```\n\n\n## Styling Examples\n\n### Changing Size\n\n```svelte\n\n\n\n```\n\n### Applying Colors\n\n```svelte\n\n\n```\n\n### Accessibility\n\n```svelte\n\n```\n\n## Practical Examples\n\n#### Icon Button\n\n```svelte\n\n```\n\n#### List with Icons\n\n```svelte\n
    \n
  • New file
    • \n
\n```\n\n#### Color & Size Variation\n\n```svelte\n
\n \n \n \n
\n```\n\n## Additional Notes\n\n- Since icons are just SVGs wrapped in Svelte components, you can animate them using Svelte transitions or CSS.\n- You can import and render icons dynamically using `import()` if needed.\n\n## License\n\nMIT © fazdiu\n\n## Support\n\nIf you find Duo Icons useful, consider supporting the project with a donation: [![Support me on Ko-fi](https://img.shields.io/badge/Ko--fi-Support_Me-29ABE0?logo=ko-fi&logoColor=white)](https://ko-fi.com/fazdiu)\n\n","readmeFilename":"README.md","_rev":"1-7a69fb9b6d1a007b8080524fe26c65a1"}