{"_id":"@300codes/astro-icon","_rev":"5-be9dbd59b0726b613457b120862fd983","name":"@300codes/astro-icon","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@300codes/astro-icon","version":"1.0.0","keywords":["astro","vue","icons","svg","ssr"],"author":{"name":"Adam Kanigowski"},"license":"MIT","_id":"@300codes/astro-icon@1.0.0","maintainers":[{"name":"adamkanigowski","email":"adam.kanigowski@300.codes"}],"dist":{"shasum":"e1f689b6fc664c87f4875b90fa0d55df6fb3ac8c","tarball":"https://registry.npmjs.org/@300codes/astro-icon/-/astro-icon-1.0.0.tgz","fileCount":7,"integrity":"sha512-wnW4OOiGCz3f855Zj2XCD1wGp6Wdw1wtHMksVitr80kipHkHwuT5D8Cbsr8DA8K8rpSJ9zrJFP5gZzgFN78YbA==","signatures":[{"sig":"MEQCIDLUvxy5n57yldmYWGfK8EOOF9Q2RIn7rd638Q5/i+wEAiAhgfLC6nOltn7D1EpEat6wNFwxUU5Hn3JIhsxqzqwdKw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14853},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"36002116d7565c1304e9b9e79d7612036559a7ba","scripts":{"lint":"eslint src","build":"vite build","format":"prettier --write src","lint:fix":"eslint src --fix"},"_npmUser":{"name":"adamkanigowski","email":"adam.kanigowski@300.codes"},"_npmVersion":"10.8.2","description":"Vue icon component for Astro with SSR support","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.0.0","vite":"^6.4.1","eslint":"^9.39.2","prettier":"^3.8.1","typescript":"^5.0.0","@types/node":"^20.0.0","vite-plugin-dts":"^4.5.4","eslint-plugin-vue":"^10.7.0","@vitejs/plugin-vue":"^5.2.4","@vue/eslint-config-prettier":"^10.2.0","@vue/eslint-config-typescript":"^14.6.0","vite-plugin-css-injected-by-js":"^3.5.2"},"peerDependencies":{"vue":"^3.0.0","astro":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/astro-icon_1.0.0_1770711323707_0.15381745147330617","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@300codes/astro-icon","version":"1.0.1","keywords":["astro","vue","icons","svg","ssr"],"author":{"name":"Adam Kanigowski"},"license":"MIT","_id":"@300codes/astro-icon@1.0.1","maintainers":[{"name":"adamkanigowski","email":"adam.kanigowski@300.codes"}],"dist":{"shasum":"0c99ec67dd8423912519cf0e0488d8bf9f45891a","tarball":"https://registry.npmjs.org/@300codes/astro-icon/-/astro-icon-1.0.1.tgz","fileCount":7,"integrity":"sha512-KB9xJhJR3U3bnc2zkmgk3i01mYXDcFDVflgU/mh/zeIjCYnn9eduOgnAwdaggyEwPSuQpzELiQHVdVFOknM1EQ==","signatures":[{"sig":"MEUCIHrHLiNsaIYc08JgC/z9R1i1O9Upz26hVSLsVRe4iTd8AiEAuGi5Ii/lfvviwTzp5j4+XpDMEJ6tysMzzd+jE8Wn4vU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14863},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"34b115bf2c87f135df4e15a3828485a4365ae8fc","scripts":{"lint":"eslint src","build":"vite build","format":"prettier --write src","lint:fix":"eslint src --fix"},"_npmUser":{"name":"adamkanigowski","email":"adam.kanigowski@300.codes"},"_npmVersion":"10.8.2","description":"Vue icon component for Astro with SSR support","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.0.0","vite":"^6.4.1","eslint":"^9.39.2","prettier":"^3.8.1","typescript":"^5.0.0","@types/node":"^20.0.0","vite-plugin-dts":"^4.5.4","eslint-plugin-vue":"^10.7.0","@vitejs/plugin-vue":"^5.2.4","@vue/eslint-config-prettier":"^10.2.0","@vue/eslint-config-typescript":"^14.6.0","vite-plugin-css-injected-by-js":"^3.5.2"},"peerDependencies":{"vue":"^3.0.0","astro":"^4.0.0 || ^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/astro-icon_1.0.1_1770712145788_0.28020211189288124","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@300codes/astro-icon","version":"1.0.2","keywords":["astro","vue","icons","svg","ssr"],"author":{"name":"Adam Kanigowski"},"license":"MIT","_id":"@300codes/astro-icon@1.0.2","maintainers":[{"name":"adamkanigowski","email":"adam.kanigowski@300.codes"}],"dist":{"shasum":"564e088ffcb272cfe357ff9b268b6a365e6362e7","tarball":"https://registry.npmjs.org/@300codes/astro-icon/-/astro-icon-1.0.2.tgz","fileCount":7,"integrity":"sha512-wqDvZw1LE62r38RjfeZYJTTOfEp3/7cKWLhcHAKen9s/MmCvk94jZAxIS2KKrMnsd/Ar5RdyC6TTBVTzoAGxGw==","signatures":[{"sig":"MEUCIFf/+RLEdYUGKivnIwyYSf5rJP5zNEEH+89A2mIbSTAkAiEAtRS2ukEauIRRPX64htI6XR4Kg7Um8ZeENqPggUXFx3Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14875},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"d95199d22ddb9a95d19b2dcb024e8f85b4d40603","scripts":{"lint":"eslint src","build":"vite build","format":"prettier --write src","lint:fix":"eslint src --fix"},"_npmUser":{"name":"adamkanigowski","email":"adam.kanigowski@300.codes"},"_npmVersion":"10.8.2","description":"Vue icon component for Astro with SSR support","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.0.0","vite":"^6.4.1","eslint":"^9.39.2","prettier":"^3.8.1","typescript":"^5.0.0","@types/node":"^20.0.0","vite-plugin-dts":"^4.5.4","eslint-plugin-vue":"^10.7.0","@vitejs/plugin-vue":"^5.2.4","@vue/eslint-config-prettier":"^10.2.0","@vue/eslint-config-typescript":"^14.6.0","vite-plugin-css-injected-by-js":"^3.5.2"},"peerDependencies":{"vue":"^3.0.0","astro":"^4.0.0 || ^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/astro-icon_1.0.2_1770714128141_0.5196209480135012","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@300codes/astro-icon","version":"1.0.3","keywords":["astro","vue","icons","svg","ssr"],"author":{"name":"Adam Kanigowski"},"license":"MIT","_id":"@300codes/astro-icon@1.0.3","maintainers":[{"name":"adamkanigowski","email":"adam.kanigowski@300.codes"}],"dist":{"shasum":"f70d264d5729ef0267c747510dcc134ea8b919a2","tarball":"https://registry.npmjs.org/@300codes/astro-icon/-/astro-icon-1.0.3.tgz","fileCount":7,"integrity":"sha512-aYr+Amk3h4Rv/Hqa2Oa2LO93NWlffhH4tFVW/OoUGX5NBC/oXXSpCGRrh3s2Ff7lZlyJGPaIcv9fN1FFaLKZiA==","signatures":[{"sig":"MEUCIQDHJWMW7Karo00Gljxrqdt3J47I0MvbBM2n3HkiRj4B6QIgDbxFHSmanxcbIuJqrzUfDNJQBTeFR1QfjXxPSXL1kQQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14922},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"5b40ed12fc7a86b4580fd9a1e4026ffeda99cc32","scripts":{"lint":"eslint src","build":"vite build","format":"prettier --write src","lint:fix":"eslint src --fix"},"_npmUser":{"name":"adamkanigowski","email":"adam.kanigowski@300.codes"},"_npmVersion":"10.8.2","description":"Vue icon component for Astro with SSR support","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.0.0","vite":"^6.4.1","eslint":"^9.39.2","prettier":"^3.8.1","typescript":"^5.0.0","@types/node":"^20.0.0","vite-plugin-dts":"^4.5.4","eslint-plugin-vue":"^10.7.0","@vitejs/plugin-vue":"^5.2.4","@vue/eslint-config-prettier":"^10.2.0","@vue/eslint-config-typescript":"^14.6.0","vite-plugin-css-injected-by-js":"^3.5.2"},"peerDependencies":{"vue":"^3.0.0","astro":"^4.0.0 || ^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/astro-icon_1.0.3_1770716871139_0.9293187506654603","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@300codes/astro-icon","version":"1.0.4","description":"Vue icon component for Astro with SSR support","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","scripts":{"build":"vite build","lint":"eslint src","lint:fix":"eslint src --fix","format":"prettier --write src"},"exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"}},"peerDependencies":{"astro":"^4.0.0 || ^5.0.0","vue":"^3.0.0"},"devDependencies":{"@types/node":"^20.0.0","@vitejs/plugin-vue":"^5.2.4","@vue/eslint-config-prettier":"^10.2.0","@vue/eslint-config-typescript":"^14.6.0","eslint":"^9.39.2","eslint-plugin-vue":"^10.7.0","prettier":"^3.8.1","typescript":"^5.0.0","vite":"^6.4.1","vite-plugin-css-injected-by-js":"^3.5.2","vite-plugin-dts":"^4.5.4","vue":"^3.0.0"},"keywords":["astro","vue","icons","svg","ssr"],"author":{"name":"Adam Kanigowski"},"license":"MIT","_id":"@300codes/astro-icon@1.0.4","gitHead":"3a75cc051e2a2eabec3c016b47e62f3d1b2f9872","_nodeVersion":"20.17.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-PqxHDr0PKpPJv/jwXZXf8A4pgB+xGrHO+Li/EA+vhtjWEfYAvdsQvgIq9reA35T5865OLAbBUlRn/UK0iHsGLA==","shasum":"e87fd7bda78aea122baca69bae25b662ecb143b0","tarball":"https://registry.npmjs.org/@300codes/astro-icon/-/astro-icon-1.0.4.tgz","fileCount":7,"unpackedSize":12391,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDrkZPUM9bbu3CsP8RuZ98Pt1t7RQC+ofyRFpG3aYUgVAIhAJXRnMjsDiVOKuxHazvwohD2NgUteLql5tWvCVJBmWne"}]},"_npmUser":{"name":"adamkanigowski","email":"adam.kanigowski@300.codes"},"directories":{},"maintainers":[{"name":"adamkanigowski","email":"adam.kanigowski@300.codes"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/astro-icon_1.0.4_1770717100383_0.9419090526087184"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-10T08:15:23.644Z","modified":"2026-02-10T09:51:40.647Z","1.0.0":"2026-02-10T08:15:23.861Z","1.0.1":"2026-02-10T08:29:05.938Z","1.0.2":"2026-02-10T09:02:08.284Z","1.0.3":"2026-02-10T09:47:51.279Z","1.0.4":"2026-02-10T09:51:40.529Z"},"author":{"name":"Adam Kanigowski"},"license":"MIT","keywords":["astro","vue","icons","svg","ssr"],"description":"Vue icon component for Astro with SSR support","maintainers":[{"name":"adamkanigowski","email":"adam.kanigowski@300.codes"}],"readme":"# @300codes/astro-icon\n\nVue 3 icon component for Astro with full SSR and Tailwind CSS support.\n\n## Installation\n\n```bash\nnpm install @300codes/astro-icon\n```\n\n### Requirements\n\n- Astro `^4.0.0` || `^5.0.0`\n- Vue `^3.0.0`\n- Tailwind CSS (for size utility classes)\n\n### Tailwind CSS configuration\n\nTailwind does not scan `node_modules` by default, so the size utility classes from this library won't be generated unless you explicitly include it.\n\n**Tailwind v4** (with `@tailwindcss/vite`) — add `@source` in your CSS:\n\n```css\n/* src/styles/global.css */\n@import 'tailwindcss';\n@source '../../node_modules/@300codes/astro-icon/dist';\n```\n\n**Tailwind v3** — add the path to the `content` array in your config:\n\n```js\n// tailwind.config.mjs\nexport default {\n  content: [\n    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',\n    './node_modules/@300codes/astro-icon/dist/**/*.js',\n  ],\n};\n```\n\nThis ensures Tailwind picks up classes like `w-6`, `min-w-6`, `h-6`, etc. used by the component.\n\n## Usage in Astro\n\n### SSR only (no client-side JavaScript)\n\nIcon rendered on the server without hydration — the lightest option:\n\n```astro\n---\nimport { BaseIcon } from '@300codes/astro-icon';\n---\n\n<BaseIcon name=\"arrow-right\" />\n<BaseIcon name=\"star\" size=\"lg\" />\n```\n\n### Hydrate on page load\n\nIcon rendered on the server and immediately hydrated on the client — useful when the `name` prop may change dynamically:\n\n```astro\n---\nimport { BaseIcon } from '@300codes/astro-icon';\n---\n\n<BaseIcon client:load name=\"arrow-right\" size=\"md\" />\n```\n\n### Hydrate when visible\n\nIcon rendered on the server, hydrated only when it enters the viewport — optimal for icons below the fold:\n\n```astro\n---\nimport { BaseIcon } from '@300codes/astro-icon';\n---\n\n<BaseIcon client:visible name=\"star\" size=\"xl\" />\n```\n\n### Client only (no SSR)\n\nIcon rendered exclusively on the client — it will not appear in the server HTML:\n\n```astro\n---\nimport { BaseIcon } from '@300codes/astro-icon';\n---\n\n<BaseIcon client:only=\"vue\" name=\"logo\" size=\"2xl\" icon-path=\"/custom-icons\" />\n```\n\n## Usage in Vue\n\nStandard usage inside a Vue component:\n\n```vue\n<script setup>\nimport { BaseIcon } from '@300codes/astro-icon';\n</script>\n\n<template>\n  <BaseIcon name=\"arrow-right\" />\n  <BaseIcon name=\"star\" size=\"lg\" />\n  <BaseIcon name=\"logo\" size=\"auto\" icon-path=\"/custom-icons\" />\n</template>\n```\n\n## Props\n\n| Prop       | Type       | Default    | Description                                    |\n|------------|------------|------------|------------------------------------------------|\n| `name`     | `string`   | (required) | SVG file name (without the `.svg` extension)   |\n| `size`     | `IconSize` | `'md'`     | Icon size                                      |\n| `iconPath` | `string`   | `'/icons'` | Path to the icons directory inside `public/`   |\n\n## Sizes (`IconSize`)\n\nThe component uses Tailwind CSS classes for sizing. The classes are not compiled within the library — they are generated by the Tailwind configuration in your Astro project.\n\n| Size  | Pixels | Tailwind classes      |\n|-------|--------|-----------------------|\n| `2xs` | 12px   | `w-3 min-w-3 h-3`    |\n| `xs`  | 16px   | `w-4 min-w-4 h-4`    |\n| `sm`  | 20px   | `w-5 min-w-5 h-5`    |\n| `md`  | 24px   | `w-6 min-w-6 h-6`    |\n| `lg`  | 32px   | `w-8 min-w-8 h-8`    |\n| `xl`  | 40px   | `w-10 min-w-10 h-10` |\n| `2xl` | 48px   | `w-12 min-w-12 h-12` |\n| `3xl` | 64px   | `w-16 min-w-16 h-16` |\n| `auto`| —      | (no classes)          |\n\nThe `auto` size does not apply any classes — the icon will adapt to its parent's dimensions.\n\n## Types\n\nThe library exports the `IconSize` type for use in your code:\n\n```ts\nimport { BaseIcon, type IconSize } from '@300codes/astro-icon';\n\nconst size: IconSize = 'lg';\n```\n\n## Where to place icons\n\nSVG files should be placed in the `public/` directory of your Astro project. The default path is `public/icons/`:\n\n```\nmy-astro-project/\n  public/\n    icons/          <-- default path (iconPath=\"/icons\")\n      arrow-right.svg\n      star.svg\n      logo.svg\n```\n\nPass the file name (without `.svg`) as the `name` prop:\n\n```vue\n<!-- Loads public/icons/arrow-right.svg -->\n<BaseIcon name=\"arrow-right\" />\n```\n\n### Custom path\n\nIf you keep icons in a different directory, use the `iconPath` prop:\n\n```vue\n<!-- Loads public/assets/ui/star.svg -->\n<BaseIcon name=\"star\" icon-path=\"/assets/ui\" />\n```\n\n## How the component works\n\n1. **SSR (server)** — during server-side rendering, the component reads the SVG file directly from the filesystem (`public/iconPath/name.svg`) and injects its content into the HTML. This makes the icon visible immediately, without waiting for client-side JavaScript.\n\n2. **Client** — after the component is mounted in the browser, if the SVG content has not been loaded yet (e.g. during client-side navigation), it fetches it via `fetch`.\n\n3. **Reactivity** — changing the `name` prop automatically fetches and displays the new icon.\n\n4. **Fallback** — if the icon is not found, the component displays a placeholder.\n\n## SVG — set `fill` to `currentColor`\n\nFor icons to properly inherit the text color from CSS (e.g. via Tailwind's `text-red-500`), SVG files **must** have the `fill` attribute set to `currentColor`:\n\n```xml\n<!-- arrow-right.svg -->\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n  <path d=\"M...\" />\n</svg>\n```\n\nIf the SVG has `fill` set to a specific color (e.g. `#000000`), changing the color via CSS will not work. The same applies to the `stroke` attribute — if the icon uses strokes, set `stroke=\"currentColor\"`.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}