Skip to content

A compact solution for SVG sprites in Astro projects. It automates symbol ID management, supports hot reloading, and generates optimized SVG sprites with minimal setup—ideal for seamless SVG icon integration.

Notifications You must be signed in to change notification settings

ACP-CODE/astro-svgs

Repository files navigation

Overviews

Build Status NPM Version

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.

Installation

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

Usage

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

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

Contributing

Submit your issues or feedback on our GitHub channel.

License

MIT

About

A compact solution for SVG sprites in Astro projects. It automates symbol ID management, supports hot reloading, and generates optimized SVG sprites with minimal setup—ideal for seamless SVG icon integration.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •