{"_id":"@duo-icons/vue","name":"@duo-icons/vue","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@duo-icons/vue","author":{"name":"fazdiu"},"description":"Duo Icons is a library of modern and beautiful duotone icons, designed for easy use in vue projects.","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":{"vue":"^3.3.0"},"devDependencies":{"@types/node":"^25.3.5","@vitejs/plugin-vue":"^6.0.4","vite":"^7.3.1","vite-plugin-dts":"^4.5.4","vue":"^3.5.29"},"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/vue@1.0.1","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-gF3AwjUgFWw6mkLRr/lMGR6fWzlL2jWHuisQW1xv1zXD8ndl6wOwO7VHoi6PmDq5ZkjJJNODbXESFvnSQ+CKDQ==","shasum":"fc7a4996468b553a004470be8054c0decab209ea","tarball":"https://registry.npmjs.org/@duo-icons/vue/-/vue-1.0.1.tgz","fileCount":6,"unpackedSize":207774,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDuBuN1xCf2cpUKfpDELYfHl7qTdO271ue18RQfjNuIbgIgC2wZkq/BTjLL7GuJ8CNCSezGhJkYPEXtiAm+w2bUjEU="}]},"_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/vue_1.0.1_1773350691540_0.9891296597911252"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-12T21:24:51.475Z","1.0.1":"2026-03-12T21:24:51.737Z","modified":"2026-03-12T21:24:51.970Z"},"maintainers":[{"name":"fernandocfernandez","email":"ymb4jodkt@mozmail.com"}],"description":"Duo Icons is a library of modern and beautiful duotone icons, designed for easy use in vue projects.","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":"<div align=\"center\">\n  <h1 id=\"duo-icons-vue\">Duo Icons - Vue</h1>\n\n  <a href=\"https://ko-fi.com/fazdiu\"><img src=\"https://img.shields.io/badge/Ko--fi-Support_Me-29ABE0?logo=ko-fi&amp;logoColor=white\" alt=\"Support me on Ko-fi\"></a>\n    <a href=\"https://github.com/fazdiu/duo-icons?tab=readme-ov-file#packages\"><img src=\"https://img.shields.io/badge/github-repo-blue?logo=github\" alt=\"github\"></a>\n  <img src=\"https://img.shields.io/badge/npm-red?logo=npm\" alt=\"npm\">\n  <img src=\"https://img.shields.io/badge/vuejs-green?logo=vuedotjs\" alt=\"Vue.js\">\n  <img src=\"https://img.shields.io/badge/nuxt-blue?logo=nuxt\" alt=\"nuxt.js\">\n  <img src=\"https://img.shields.io/badge/typescript-gray?logo=typescript\" alt=\"typescript\">\n  <img src=\"https://img.shields.io/badge/javascript-yellow?logo=javascript\" alt=\"javascript\">\n</div>\n\nA modern and beautiful duotone icon library designed for seamless integration with Vue 3 projects. Duo Icons offers a collection of carefully crafted icons with a distinctive duotone design.\n\n## Installation\n\nInstall the Duo Icons Vue package using npm:\n\n```bash\nnpm install @duo-icons/vue\n```\n\n### Requirements\n\n- Vue 3.x.x or higher\n\n## Basic Usage\n\nImport and use icons directly in your Vue components:\n\n```vue\n<template>\n  <div>\n    <AddCircle />\n    <AddCircle size=\"32\" />\n    <AddCircle size=\"24\" class=\"custom-icon\" />\n  </div>\n</template>\n\n<script setup>\nimport { AddCircle } from '@duo-icons/vue';\n</script>\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 Duo Icons components accept the following props:\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `size` | `number \\| string` | `24` | The width and height of the icon in pixels or any valid CSS size unit (e.g., `\"24\"`, `32`, `\"2rem\"`) |\n\n### SVG Attributes\n\nSince Duo Icons are Vue components wrapping SVG elements, you can pass any standard SVG attribute to customize their appearance:\n\n```vue\n<template>\n  <AddCircle \n    size=\"32\"\n    color=\"currentColor\"\n    class=\"icon-custom\"\n    aria-label=\"Add a new item\"\n  />\n</template>\n\n<script setup>\nimport { AddCircle } from '@duo-icons/vue';\n</script>\n```\n\n## Styling\n\n### Using CSS Classes\n\n```vue\n<template>\n  <AddCircle class=\"my-icon\" />\n</template>\n\n<style scoped>\n.my-icon {\n  color: #1a73e8;\n  transition: all 0.3s ease;\n}\n\n.my-icon:hover {\n  color: #0d47a1;\n  transform: scale(1.1);\n}\n</style>\n```\n\n### Customizing Duotone Layers\n\nDuo Icons use a duotone design with primary and secondary layers. You can customize each layer:\n\n```vue\n<template>\n  <svg class=\"custom-icon\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n    <!-- Secondary layer (faded) -->\n    <path class=\"duo-icons-secondary-layer\" d=\"...\" opacity=\"0.3\" />\n    <!-- Primary layer (main) -->\n    <path class=\"duo-icons-primary-layer\" d=\"...\" />\n  </svg>\n</template>\n\n<style scoped>\n.custom-icon .duo-icons-secondary-layer {\n  fill: url(#gradient);\n}\n\n.custom-icon .duo-icons-primary-layer {\n  fill: #1a73e8;\n}\n</style>\n```\n\n## Examples\n\n### Size Variations\n\n```vue\n<template>\n  <div class=\"icon-sizes\">\n    <AddCircle size=\"16\" />\n    <AddCircle size=\"24\" />\n    <AddCircle size=\"32\" />\n    <AddCircle size=\"48\" />\n  </div>\n</template>\n\n<script setup>\nimport { AddCircle } from '@duo-icons/vue';\n</script>\n```\n\n### Color Variations\n\n```vue\n<template>\n  <div class=\"icon-colors\">\n    <AddCircle class=\"text-blue\" />\n    <AddCircle class=\"text-green\" />\n    <AddCircle class=\"text-red\" />\n  </div>\n</template>\n\n<script setup>\nimport { AddCircle } from '@duo-icons/vue';\n</script>\n\n<style scoped>\n.text-blue { color: #1a73e8; }\n.text-green { color: #34a853; }\n.text-red { color: #ea4335; }\n</style>\n```\n\n## License\n\nMIT - Created by 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-27d765ce5c32e6dbfebb946f3acb3ad2"}