{"_id":"@dallay/astro-icon","_rev":"2-e0c14abb8e66be9a92889a438d83c3a4","name":"@dallay/astro-icon","dist-tags":{"latest":"1.3.3"},"versions":{"1.3.2":{"name":"@dallay/astro-icon","version":"1.3.2","keywords":["astro","astro-integration","astro-component","image","images","icon","icons","iconify","optimization"],"author":{"url":"https://twitter.com/n_moore","name":"Nate Moore","email":"nate@natemoo.re"},"license":"MIT","_id":"@dallay/astro-icon@1.3.2","maintainers":[{"name":"yacosta738","email":"yunielacosta738@gmail.com"}],"contributors":[{"url":"https://github.com/dallay","name":"dallay","email":"pr@prpr.dev"}],"homepage":"https://github.com/dallay/astro-icon#readme","bugs":{"url":"https://github.com/dallay/astro-icon/issues"},"dist":{"shasum":"eab5bb52afae13800de885f2392b9614af753bbf","tarball":"https://registry.npmjs.org/@dallay/astro-icon/-/astro-icon-1.3.2.tgz","fileCount":17,"integrity":"sha512-CSXqhgLj+ycYT3uXCBf/b83/jFDwD0PTiZUwCOW8a3/PUOULryn0qm3irExX4p7NzdE7swy7BtQmrDJ1nvUqzw==","signatures":[{"sig":"MEQCIH8dzPi7lbE+frTtnMKzM9bqxSUgdkiilm4CakCm/1gLAiB3aZCT8ykAP0U5joHN7rJBAnpe5X6eE+QlYtP2tvz1Iw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31527},"type":"module","_from":"file:dallay-astro-icon-1.3.2.tgz","types":"./index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./dist/index.js"},"./components":{"types":"./components/index.d.ts","default":"./components/index.ts"}},"scripts":{"dev":"tsc --watch","build":"tsc","start":"pnpm run dev"},"_npmUser":{"name":"yacosta738","email":"yunielacosta738@gmail.com"},"_resolved":"/tmp/3ef48ae3671a6e8d827f64668a8e13cd/dallay-astro-icon-1.3.2.tgz","_integrity":"sha512-CSXqhgLj+ycYT3uXCBf/b83/jFDwD0PTiZUwCOW8a3/PUOULryn0qm3irExX4p7NzdE7swy7BtQmrDJ1nvUqzw==","repository":{"url":"git+https://github.com/dallay/astro-icon.git","type":"git","directory":"packages/core"},"_npmVersion":"10.9.7","description":"> **A community-maintained fork of [`astro-icon`](https://github.com/natemoo-re/astro-icon) by [Nate Moore](https://github.com/natemoo-re), updated for Astro v6.x and Cloudflare Workers compatibility.**","directories":{},"_nodeVersion":"22.22.2","dependencies":{"@iconify/tools":"^5.0.11","@iconify/types":"^2.0.0","@iconify/utils":"^3.1.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.2","astro":"^6.3.3","typescript":"^6.0.3","@types/node":"^25.8.0"},"_npmOperationalInternal":{"tmp":"tmp/astro-icon_1.3.2_1778949988208_0.7291677116530317","host":"s3://npm-registry-packages-npm-production"}},"1.3.3":{"name":"@dallay/astro-icon","version":"1.3.3","type":"module","publishConfig":{"access":"public"},"types":"./index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./dist/index.js"},"./components":{"types":"./components/index.d.ts","default":"./components/index.ts"}},"author":{"name":"Nate Moore","email":"nate@natemoo.re","url":"https://twitter.com/n_moore"},"contributors":[{"name":"dallay","email":"pr@prpr.dev","url":"https://github.com/dallay"}],"keywords":["astro","astro-integration","astro-component","image","images","icon","icons","iconify","optimization"],"repository":{"type":"git","url":"git+https://github.com/dallay/astro-icon.git","directory":"packages/core"},"license":"MIT","bugs":{"url":"https://github.com/dallay/astro-icon/issues"},"homepage":"https://github.com/dallay/astro-icon#readme","dependencies":{"@iconify/tools":"^5.0.11","@iconify/types":"^2.0.0","@iconify/utils":"^3.1.3"},"devDependencies":{"@types/node":"^25.8.0","astro":"^6.3.3","typescript":"^6.0.3","vite":"^7.3.2"},"scripts":{"build":"tsc","dev":"tsc --watch","start":"pnpm run dev"},"_id":"@dallay/astro-icon@1.3.3","description":"> **A community-maintained fork of [`astro-icon`](https://github.com/natemoo-re/astro-icon) by [Nate Moore](https://github.com/natemoo-re), updated for Astro v6.x and Cloudflare Workers compatibility.**","_integrity":"sha512-db/mE3c+jS8JNCc4KD/OUfNcMKYQfKqbAm8xrgdUGs0zMVKEi1LZknLf5goXT93RaP3x/eE9iHs/nkb9U5ksCw==","_resolved":"/tmp/dbc220fdc02ca6de90e07c3c23d5badf/dallay-astro-icon-1.3.3.tgz","_from":"file:dallay-astro-icon-1.3.3.tgz","_nodeVersion":"22.22.2","_npmVersion":"10.9.7","dist":{"integrity":"sha512-db/mE3c+jS8JNCc4KD/OUfNcMKYQfKqbAm8xrgdUGs0zMVKEi1LZknLf5goXT93RaP3x/eE9iHs/nkb9U5ksCw==","shasum":"30d87f80674b8675a3d053102810daa4e025dac8","tarball":"https://registry.npmjs.org/@dallay/astro-icon/-/astro-icon-1.3.3.tgz","fileCount":17,"unpackedSize":32870,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCfCioO/wM1DoWeAvAUa+omVQI3WMDTvMv2Vsg3pYifAgIhAIwopa6fpTLT809DzrmkMM2Ya0V4PMXXJgxBBSwxdYEG"}]},"_npmUser":{"name":"yacosta738","email":"yunielacosta738@gmail.com"},"directories":{},"maintainers":[{"name":"yacosta738","email":"yunielacosta738@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/astro-icon_1.3.3_1778952500500_0.2517583703655213"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-16T16:46:28.083Z","modified":"2026-05-16T17:28:21.090Z","1.3.2":"2026-05-16T16:46:28.365Z","1.3.3":"2026-05-16T17:28:20.640Z"},"bugs":{"url":"https://github.com/dallay/astro-icon/issues"},"author":{"name":"Nate Moore","email":"nate@natemoo.re","url":"https://twitter.com/n_moore"},"license":"MIT","homepage":"https://github.com/dallay/astro-icon#readme","keywords":["astro","astro-integration","astro-component","image","images","icon","icons","iconify","optimization"],"repository":{"type":"git","url":"git+https://github.com/dallay/astro-icon.git","directory":"packages/core"},"description":"> **A community-maintained fork of [`astro-icon`](https://github.com/natemoo-re/astro-icon) by [Nate Moore](https://github.com/natemoo-re), updated for Astro v6.x and Cloudflare Workers compatibility.**","contributors":[{"name":"dallay","email":"pr@prpr.dev","url":"https://github.com/dallay"}],"maintainers":[{"name":"yacosta738","email":"yunielacosta738@gmail.com"}],"readme":"# Astro Icon (Community Fork)\n\n> **A community-maintained fork of [`astro-icon`](https://github.com/natemoo-re/astro-icon) by [Nate Moore](https://github.com/natemoo-re), updated for Astro v6.x and Cloudflare Workers compatibility.**\n\n[![npm version](https://img.shields.io/npm/v/@dallay/astro-icon?color=blue)](https://www.npmjs.com/package/@dallay/astro-icon)\n[![npm downloads](https://img.shields.io/npm/dm/@dallay/astro-icon?color=blue)](https://www.npmjs.com/package/@dallay/astro-icon)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-3178c6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)\n[![Astro v6](https://img.shields.io/badge/Astro-v6+-ff4d03?logo=astro)](https://astro.build)\n[![Cloudflare Ready](https://img.shields.io/badge/Cloudflare-Ready-orange?logo=cloudflare)](https://workers.cloudflare.com/)\n[![GitHub issues](https://img.shields.io/github/issues/dallay/astro-icon)](https://github.com/dallay/astro-icon/issues)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-3178c6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)\n[![Astro v6](https://img.shields.io/badge/Astro-v6+-ff4d03?logo=astro)](https://astro.build)\n[![Cloudflare Ready](https://img.shields.io/badge/Cloudflare-Ready-orange?logo=cloudflare)](https://workers.cloudflare.com/)\n[![GitHub issues](https://img.shields.io/github/issues/dallay/astro-icon)](https://github.com/dallay/astro-icon/issues)\n\n---\n\n## ⚠️ About This Fork\n\nThis package (`@dallay/astro-icon`) is a **ported and extended version** of the original [`astro-icon`](https://github.com/natemoo-re/astro-icon) created by **[Nate Moore (@natemoo-re)](https://github.com/natemoo-re)**.\n\nThe original `astro-icon` is an excellent integration that has served the Astro community well. This fork exists to address specific compatibility needs that arose with newer versions of Astro and serverless deployment targets:\n\n### Why This Fork?\n\n- **Astro v6.x Support** — The original package has not been updated for Astro v6.x breaking changes. This fork includes the necessary patches to ensure full compatibility with the latest Astro release.\n- **Cloudflare Adapter Compatibility** — When deploying to Cloudflare Workers/Pages via `@astrojs/cloudflare`, the original package encounters runtime issues related to Node.js API usage in the edge environment. This fork resolves those issues.\n- **Continued Maintenance** — Provides ongoing maintenance and bug fixes for projects that depend on `astro-icon` in modern Astro + Cloudflare stacks.\n\n### Acknowledgments\n\nAll credit for the original design, architecture, and icon system goes to **[Nate Moore](https://github.com/natemoo-re)** and the original contributors of [`astro-icon`](https://github.com/natemoo-re/astro-icon). This fork is made possible by their outstanding work, and is released under the same **MIT License**.\n\nIf the upstream project resumes active development with Astro v6 support, we recommend migrating back to the original package.\n\n---\n\n## Installation\n\nChoose your preferred package manager:\n\n### npm\n\n```sh\nnpm install @dallay/astro-icon\n```\n\n### pnpm\n\n```sh\npnpm add @dallay/astro-icon\n```\n\n### yarn\n\n```sh\nyarn add @dallay/astro-icon\n```\n\n### bun\n\n```sh\nbun add @dallay/astro-icon\n```\n\n### pnpm\n\n```sh\npnpm add @dallay/astro-icon\n```\n\n### yarn\n\n```sh\nyarn add @dallay/astro-icon\n```\n\n### bun\n\n```sh\nbun add @dallay/astro-icon\n```\n\nThen, add the integration to your `astro.config.mjs`:\n\n```js\nimport { defineConfig } from \"astro/config\";\nimport icon from \"@dallay/astro-icon\";\n\nexport default defineConfig({\n  integrations: [icon()],\n});\n```\n\n## Usage\n\nAstro Icon is ready to use with zero additional configuration. The included `Icon` component allows you to inline `svg`s directly into your HTML.\n\n### Local Icons\n\nBy default, Astro Icon supports custom local `svg` icons. They are optimized with [`svgo`](https://github.com/svg/svgo) automatically with no extra build step. See [\"A Pretty Good SVG Icon System\"](https://css-tricks.com/pretty-good-svg-icon-system/#just-include-the-icons-inline) from CSS Tricks.\n\n1. Create a directory inside of `src/` named `icons/`.\n2. Add each desired icon as an individual `.svg` file to `src/icons/`.\n3. Reference a specific icon file using the `name` prop.\n\n```astro\n---\nimport { Icon } from '@dallay/astro-icon/components';\n---\n\n<!-- Loads the SVG in `/src/icons/filename.svg` -->\n<Icon name=\"filename\" />\n```\n\n### Iconify Icons\n\nAstro Icon also supports [Iconify](https://iconify.design) icon sets out-of-the-box.\n\n1. Find an Icon Set to use on the [Iconify Icon Sets website](https://icon-sets.iconify.design/)\n2. Install the package (eg. `npm i -D @iconify-json/mdi`)\n3. Reference a specific icon using the `name` prop (eg. `mdi:account`)\n\n```astro\n---\nimport { Icon } from '@dallay/astro-icon/components'\n---\n\n<!-- Automatically fetches and inlines Material Design Icon's \"account\" SVG -->\n<Icon name=\"mdi:account\" />\n```\n\n### Props\n\nThe `Icon` component allows these custom properties:\n\n```ts\ninterface Props extends HTMLAttributes<\"svg\"> {\n  /**\n   * References a specific Icon\n   */\n  name: string;\n  \"is:inline\"?: boolean;\n  title?: string;\n  desc?: string;\n  size?: number | string;\n  width?: number | string;\n  height?: number | string;\n}\n```\n\nThe `Icon` also accepts any global HTML attributes and `aria` attributes. They will be forwarded to the rendered `<svg>` element.\n\n### Styling\n\nStyling your icons is straightforward. Any styles can be targeted to the `[data-icon]` attribute selector. If you want to target a specific icon, you may target it by name using `[data-icon=\"filename\"]`.\n\n```astro\n---\nimport { Icon } from '@dallay/astro-icon/components';\n---\n\n<style lang=\"css\">\n    [data-icon] {\n        color: blue;\n        /* OR */\n        fill: blue;\n    }\n    [data-icon=\"annotation\"] {\n        color: red;\n        /* OR */\n        fill: red;\n    }\n</style>\n\n<Icon name=\"adjustment\" /> <!-- will be blue -->\n<Icon name=\"annotation\" /> <!-- will be red -->\n\n<!-- Example using Tailwind to apply color -->\n<Icon name=\"annotation\" class=\"text-red-500\" /> <!-- will be red-500 -->\n```\n\n### Using with Frameworks\n\nAstro Icon can be used with other frameworks utilizing the [`slot` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot). You can read more about how to use Slots in Astro here: [Passing Children to Framework Components](https://docs.astro.build/en/core-concepts/framework-components/#passing-children-to-framework-components).\n\n## Configuration\n\n### Configuring the Integration\n\nThe Astro Icon integration has its own options for controlling the `Icon` component. Change these in the `astro.config.mjs` file which is where your project's integration settings live.\n\n#### config.include\n\nFor users using `output: 'server'` or `output: 'hybrid'`, it is highly recommended to configure the exact icons that should be included in the server bundle. By default, every icon in the set will be bundled into the server JavaScript.\n\nTo filter the exact Iconify icons that should be included, set an array of allowed icons inside of the `include` object. Only these icons will be bundled.\n\n**`astro.config.mjs`**\n\n```js\nimport { defineConfig } from \"astro/config\";\nimport icon from \"@dallay/astro-icon\";\n\nexport default defineConfig({\n  // ...\n  integrations: [\n    icon({\n      include: {\n        mdi: [\"*\"], // (Default) Loads entire Material Design Icon set\n        mdi: [\"account\"], // Loads only Material Design Icon's \"account\" SVG\n      },\n    }),\n  ],\n});\n```\n\n#### config.iconDir\n\nIf you want to use a different custom svg icon directory instead of the default `src/icons/`, specify that file path using `config.iconDir`\n\n```js\nimport { defineConfig } from \"astro/config\";\nimport icon from \"@dallay/astro-icon\";\n\nexport default defineConfig({\n  // ...\n  integrations: [\n    icon({\n      iconDir: \"src/assets/icons\",\n    }),\n  ],\n});\n```\n\n#### config.svgoOptions\n\nIf you want to customize the behavior of `.svg` optimization, you can configure the `svgo` options rather than using the defaults. Read more about the available [`svgo` options here](https://github.com/svg/svgo#configuration).\n\n```js\nimport { defineConfig } from \"astro/config\";\nimport icon from \"@dallay/astro-icon\";\n\nexport default defineConfig({\n  // ...\n  integrations: [\n    icon({\n      svgoOptions: {\n        multipass: true,\n        plugins: [\n          {\n            name: \"preset-default\",\n            params: {\n              overrides: {\n                // customize default plugin options\n                inlineStyles: {\n                  onlyMatchedOnce: false,\n                },\n\n                // or disable plugins\n                removeDoctype: false,\n              },\n            },\n          },\n        ],\n      },\n    }),\n  ],\n});\n```\n\n## Migrating from `astro-icon`\n\nIf you are currently using the original `astro-icon` package, migrating to this fork is straightforward:\n\n1. **Swap the package**:\n\n   ```sh\n   npm uninstall astro-icon\n   npm install @dallay/astro-icon\n   ```\n\n2. **Update imports**:\n\n   ```diff\n   - import icon from \"astro-icon\";\n   + import icon from \"@dallay/astro-icon\";\n\n   - import { Icon } from 'astro-icon/components';\n   + import { Icon } from '@dallay/astro-icon/components';\n   ```\n\n3. **That's it!** — The API surface is fully compatible. No configuration changes needed.\n\n## Contributing\n\nYou're welcome to submit an issue or PR!\n\n## Credits\n\n- **[Nate Moore (@natemoo-re)](https://github.com/natemoo-re)** — Original author of [`astro-icon`](https://github.com/natemoo-re/astro-icon)\n- **[Jason Miller](https://github.com/developit)** — HTML parser adapted in this project\n\n## License\n\nMIT — see [LICENSE](./LICENSE) for details.\n\nOriginal work © 2021 Nate Moore. Fork modifications © 2026 dallay.\n","readmeFilename":"README.md"}