It's a compact solution for SVG sprites in Astro. It bundles SVGs into one file, includes built-in components for easy use, and supports handleHotUpdate for smooth development.
This package is compatible with astro@3.0.0 and above and only supports the latest Integrations API.
Get started quickly with the help of the astro add
command tool
$ npx astro add astro-svgs
Manual Configuration
- STEP1: Alternatively, you can manually install it by running the following command in your terminal:
$ npm install astro-svgs
- STEP2: To use this integration, add it to your
astro.config.*
file using the integrations property:
// @ts-check
import { defineConfig } from "astro/config";
import svgs from "astro-svgs";
export default defineConfig({
integrations: [svgs()],
});
- STEP3: Then provide the svg files you need to generate
sprite.svg
to the defaultsrc/svgs
folder
/
├── src/
│ ├── svgs/
│ │ ├── a.svg
│ │ ├── b.svg
│ │ └── c.svg
│ └── pages/
│ └── index.astro
└── package.json
- STEP4: Now you can use the icon in the sprite through the built-in component
Icon.astro
---
import Layout from '~/Layouts/Layout.astro';
import Icon from 'astro-svgs/Icon.astro';
---
<Layout>
{/* name is the `file name` of the icon you need*/}
<Icon name={"a"} class="<CustomClassName>" />
</Layout>
If everything goes well, when you start the server with
npm run dev
, you will be able to get the virtualsprite.svg
content throughhttp://localhost:4321/@svgs/sprite.svg
, which supports hot updates throughhandleHotUpdate
API Reference
All the interfaces are here.
// @ts-check
import { defineConfig } from "astro/config";
import svgs from "astro-svgs";
export default defineConfig({
integrations: [
svgs({
/**
* The folder where the svg files that
* need to generate `sprite.svg` are located
*/
input: ["src/assets/sprites", "src/assets/images"]
/**
* default value
*/
compress: "high"
})
],
});
Wait, how do you control the output? It will be automatically generated in the AstroConfig.build.assets
directory when you build via vite, for example _astro/sprite.43a97aac.svg
Submit your issues or feedback on our GitHub channel.
MIT