• 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 default src/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 virtual sprite.svg content through http://localhost:4321/@svgs/sprite.svg , which supports hot updates through handleHotUpdate

// @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