SVG sprite

Enable SVG sprite generation

To generate an SVG sprite, enable the option in template.config.js:

template.config.js

images: {
  svgsprite: true
}

Then place your SVG icons into: src/assets/svgicons

Next step

Run dev mode: npm run dev — the spritemap will be generated automatically.

Use sprite icons in HTML

In dev mode, you can output an icon from the spritemap in two common ways.

1) Using `<use>`

Recommended for inline SVG styling (fill, stroke, hover effects, etc.). (You can use the snippet usvg if you have it.)

HTML — <use>


<svg>
  <use xlink:href="__spritemap#sprite-fb_icon"></use>
</svg>

Here fb_icon is the SVG file name (without extension).

2) Using `<img>`

Useful when you want a simple image output. (You can use the snippet usvgi if you have it.)

HTML — <img>

<img src="__spritemap#sprite-fb_icon-view" alt="Image">

Notice

When using <img>, the icon name has the -view suffix: fb_icon-view.

Use sprite icons in SCSS

To output a sprite icon in SCSS, use the dedicated mixin:

SCSS

@include sprite("fb_icon");

Where fb_icon is the SVG file name. As a result, the mixin outputs a background property with the icon URL, centered and without repeat.

Quick checklist

Enable sprite: images.svgsprite: true
Put icons into: src/assets/svgicons
Run: npm run dev
HTML: __spritemap#sprite-icon or ...-view
SCSS: @include sprite("icon")

Download

Want the whole workflow — SVG sprite generation, optimization pipelines, and component structure — already built in? Download the template and start faster.

Download Animmaster Vite Template Save your time — start now

SVG Sprite workflow Generate and use the SVG spritemap