{"_id":"@artsvg/vue","_rev":"2-6d6de58c6774e67eb8c6058cad08159a","name":"@artsvg/vue","dist-tags":{"latest":"2.1.7"},"versions":{"2.1.6":{"name":"@artsvg/vue","version":"2.1.6","keywords":["svg","icons","brand","logos","vue","vue3","components","tree-shakeable","esm","typescript"],"author":{"name":"artsvg.asifsofficial.com"},"license":"MIT","_id":"@artsvg/vue@2.1.6","maintainers":[{"name":"asifsofficial","email":"info@asifsofficial.com"}],"homepage":"https://artsvg.asifsofficial.com","bugs":{"url":"https://github.com/asifsofficial/artsvg/issues"},"dist":{"shasum":"8a477d48beb7dd9b030210a048f98a1ccf77954b","tarball":"https://registry.npmjs.org/@artsvg/vue/-/vue-2.1.6.tgz","fileCount":16979,"integrity":"sha512-1KgGoQgoVIl8dI3Pgt8yywJE5sfvtrxlst0gqcoyKc9Bj7+HDOhNdAd+DSjQ2ytzcNCVmkhjDbQCj+enZYyVEQ==","signatures":[{"sig":"MEYCIQCDLPQxyvOtJXFPSFFwTG9ugSz39L5RE7eRkjs6PRDBSwIhAJOLxbAXMfc7Wv2AqZO9Iflg3VNiVV6B06ixaYa3ZXwQ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":25252846},"main":"./dist/index.cjs","type":"module","_from":"file:artsvg-vue-2.1.6.tgz","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"},"./*":{"types":"./dist/*.d.ts","import":"./dist/*.js","require":"./dist/*.cjs"}},"scripts":{"build":"tsx scripts/build-components.ts"},"_npmUser":{"name":"asifsofficial","email":"info@asifsofficial.com"},"_resolved":"C:\\Users\\asifs\\AppData\\Local\\Temp\\c3a7b0eec6ed7f72ae9d5416f2dec007\\artsvg-vue-2.1.6.tgz","_integrity":"sha512-1KgGoQgoVIl8dI3Pgt8yywJE5sfvtrxlst0gqcoyKc9Bj7+HDOhNdAd+DSjQ2ytzcNCVmkhjDbQCj+enZYyVEQ==","repository":{"url":"git+https://github.com/asifsofficial/artsvg.git","type":"git","directory":"packages/vue"},"_npmVersion":"11.12.1","description":"Typed Vue 3 SVG components for all 4000+ brand icons from artsvg.asifsofficial.com","directories":{},"sideEffects":false,"_nodeVersion":"25.9.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.21.0","typescript":"^5.0.0"},"peerDependencies":{"vue":">=3.3"},"_npmOperationalInternal":{"tmp":"tmp/vue_2.1.6_1777422677644_0.6778080607707677","host":"s3://npm-registry-packages-npm-production"}},"2.1.7":{"name":"@artsvg/vue","version":"2.1.7","description":"Typed Vue 3 SVG components for all 4000+ brand icons from artsvg.asifsofficial.com","type":"module","sideEffects":false,"license":"MIT","author":{"name":"ASIFSOFFICIAL","email":"info@asifsofficial.com"},"homepage":"https://artsvg.asifsofficial.com","repository":{"type":"git","url":"git+https://github.com/asifsofficial/artsvg.git","directory":"packages/vue"},"bugs":{"url":"https://artsvg.asifsofficial.com/contact"},"keywords":["svg","icons","brand","logos","vue","vue3","components","tree-shakeable","esm","typescript"],"exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./dist/index.d.ts"},"./*":{"import":"./dist/*.js","require":"./dist/*.cjs","types":"./dist/*.d.ts"}},"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","peerDependencies":{"vue":">=3.3"},"devDependencies":{"tsx":"^4.21.0","typescript":"^5.0.0"},"engines":{"node":">=18"},"publishConfig":{"access":"public"},"scripts":{"build":"tsx scripts/build-components.ts"},"_id":"@artsvg/vue@2.1.7","_integrity":"sha512-MWLatiZQSVfCUYs6q7bII9sCv1K2aYWqV1vZkgYcaaN4DR/4/7NuaoHusGghoe4/zq/NJR2IBAjqSiZRt6Kaqg==","_resolved":"C:\\Users\\asifs\\AppData\\Local\\Temp\\e8a18cc0ca57dd98eb244b3fec9689e0\\artsvg-vue-2.1.7.tgz","_from":"file:artsvg-vue-2.1.7.tgz","_nodeVersion":"25.9.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-MWLatiZQSVfCUYs6q7bII9sCv1K2aYWqV1vZkgYcaaN4DR/4/7NuaoHusGghoe4/zq/NJR2IBAjqSiZRt6Kaqg==","shasum":"fd07a5c3ba6dcbf92618044c4b08750157c314b2","tarball":"https://registry.npmjs.org/@artsvg/vue/-/vue-2.1.7.tgz","fileCount":16979,"unpackedSize":25252665,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDLEtjeppQ8SiJPEK0DKFbIYYgOPV7ezMRFeZ+Lgae5awIhAMRwMB4KKliBRxN1gvecBvd5uR5JNQUGMedf5E9gG2dZ"}]},"_npmUser":{"name":"asifsofficial","email":"info@asifsofficial.com"},"directories":{},"maintainers":[{"name":"asifsofficial","email":"info@asifsofficial.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue_2.1.7_1777427073481_0.5366505019665373"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-29T00:31:17.515Z","modified":"2026-04-29T01:44:34.017Z","2.1.6":"2026-04-29T00:31:18.174Z","2.1.7":"2026-04-29T01:44:33.893Z"},"bugs":{"url":"https://artsvg.asifsofficial.com/contact"},"author":{"name":"ASIFSOFFICIAL","email":"info@asifsofficial.com"},"license":"MIT","homepage":"https://artsvg.asifsofficial.com","keywords":["svg","icons","brand","logos","vue","vue3","components","tree-shakeable","esm","typescript"],"repository":{"type":"git","url":"git+https://github.com/asifsofficial/artsvg.git","directory":"packages/vue"},"description":"Typed Vue 3 SVG components for all 4000+ brand icons from artsvg.asifsofficial.com","maintainers":[{"name":"asifsofficial","email":"info@asifsofficial.com"}],"readme":"<p align=\"center\">\r\n  <a href=\"https://github.com/asifsofficial/artsvg\">\r\n    <img src=\"https://raw.githubusercontent.com/asifsofficial/artsvg/main/public/og-image.png\" alt=\"artSVG - 4,000+ Brand SVG Icons\" width=\"700\" />\r\n  </a>\r\n</p>\r\n\r\n# @artsvg/vue\r\n\r\nTyped Vue 3 SVG components for all 4000+ brand icons from [artsvg.asifsofficial.com](https://artsvg.asifsofficial.com).\r\n\r\n- Zero runtime dependencies (Vue is a peer dep)\r\n- TypeScript strict mode - full `SVGAttributes` support\r\n- Tree-shakeable ESM - import only what you use\r\n- Individual icon imports for maximum bundle efficiency\r\n- Render-function components - no SFC compiler needed\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @artsvg/vue\r\n# or\r\npnpm add @artsvg/vue\r\n# or\r\nyarn add @artsvg/vue\r\n```\r\n\r\nVue 3.3 or later is required as a peer dependency.\r\n\r\n## Usage\r\n\r\n### Named import from barrel (convenient, relies on tree-shaking)\r\n\r\n```vue\r\n<script setup>\r\nimport { Github, VisualStudioCode, Figma } from \"@artsvg/vue\";\r\n</script>\r\n\r\n<template>\r\n  <div>\r\n    <Github width=\"24\" height=\"24\" />\r\n    <VisualStudioCode width=\"24\" height=\"24\" class=\"text-blue-500\" />\r\n    <Figma width=\"32\" height=\"32\" aria-label=\"Figma\" />\r\n  </div>\r\n</template>\r\n```\r\n\r\n### Individual icon import (best for bundle size)\r\n\r\n```vue\r\n<script setup>\r\nimport Github from \"@artsvg/vue/github\";\r\nimport VisualStudioCode from \"@artsvg/vue/visual-studio-code\";\r\n</script>\r\n\r\n<template>\r\n  <Github width=\"24\" height=\"24\" />\r\n</template>\r\n```\r\n\r\nEach icon is a separate module so bundlers that do not support tree-shaking\r\nwill still include only the icons you import.\r\n\r\n## Props\r\n\r\nEvery component accepts all standard SVG attributes:\r\n\r\n| Prop         | Type               | Default           | Description                    |\r\n| ------------ | ------------------ | ----------------- | ------------------------------ |\r\n| `width`      | `number \\| string` | (SVG default)     | Icon width                     |\r\n| `height`     | `number \\| string` | (SVG default)     | Icon height                    |\r\n| `class`      | `string`           | -                 | CSS class name                 |\r\n| `style`      | `object \\| string` | -                 | Inline styles (prefer class)   |\r\n| `fill`       | `string`           | `\"none\"`          | SVG fill color                 |\r\n| `viewBox`    | `string`           | from original SVG | Override the viewBox           |\r\n| `aria-label` | `string`           | -                 | Accessible label               |\r\n| ...          | ...                | -                 | Any other SVG attribute        |\r\n\r\n### Sizing example\r\n\r\n```vue\r\n<!-- Fixed size -->\r\n<Github width=\"24\" height=\"24\" />\r\n\r\n<!-- Responsive via CSS -->\r\n<Github class=\"w-6 h-6\" />\r\n\r\n<!-- Scale with font-size (em units) -->\r\n<Github width=\"1em\" height=\"1em\" />\r\n```\r\n\r\n### Accessibility\r\n\r\n```vue\r\n<!-- Meaningful icon - label it -->\r\n<Github aria-label=\"GitHub\" role=\"img\" width=\"24\" height=\"24\" />\r\n\r\n<!-- Decorative icon - hide from screen readers -->\r\n<Github aria-hidden=\"true\" width=\"24\" height=\"24\" />\r\n```\r\n\r\n## Component names\r\n\r\nSlugs are converted to PascalCase component names:\r\n\r\n| Slug                 | Component name     |\r\n| -------------------- | ------------------ |\r\n| `github`             | `Github`           |\r\n| `visual-studio-code` | `VisualStudioCode` |\r\n| `figma`              | `Figma`            |\r\n| `01dotai`            | `I01Dotai`         |\r\n| `dotnet`             | `Dotnet`           |\r\n\r\nSlugs that start with a digit are prefixed with `I` to produce a valid\r\nJavaScript identifier.\r\n\r\n## Tree-shaking\r\n\r\nWhen using a bundler with ESM tree-shaking support (Vite, Webpack 5, Rollup),\r\nnamed imports from the barrel (`@artsvg/vue`) are tree-shaken automatically -\r\nonly the icons you import are included in the final bundle.\r\n\r\nFor bundlers without tree-shaking support, use individual icon imports:\r\n\r\n```js\r\n// Always tree-shaken regardless of bundler\r\nimport Github from \"@artsvg/vue/github\";\r\n```\r\n\r\n## Available icons\r\n\r\nOver 4000 brand icons are available. Browse the full list at\r\n[artsvg.asifsofficial.com](https://artsvg.asifsofficial.com).\r\n\r\n## License\r\n\r\nMIT - see [LICENSE](./LICENSE).\r\n\r\nBrand icons and logos are the property of their respective trademark holders. See [artsvg.asifsofficial.com](https://artsvg.asifsofficial.com) for details.\r\n","readmeFilename":"README.md"}