Nuxt SVG Icon Sprite

Module for Nuxt 3 to automatically create a SVG sprite. Currently in a beta, open for feedback and breaking changes!

Aggregate all SVG files into a single sprite file
Reduce bundle size and SSR rendered page size
Full HMR support
Provides component to render with
Loads the sprite.svg from URL (/_nuxt/sprite.svg)
Typescript type checking for available symbols

Install

npm install --save nuxt-svg-icon-sprite@beta

export default defineNuxtConfig({
  modules: ['nuxt-svg-icon-sprite'],

  svgIconSprite: {
    sprites: {
      default: {
        importPatterns: ['./assets/icons/**/*.svg'],
      },
    },
  },
})

Currently only a single sprite is generated, but support for multiple sprites will be implemented. The svgIconSprite.sprites config will contain keys for each sprite to be generated. The default key is the only one supported currently.

Usage

Place the icons in the folder defined in nuxt.config.ts, by default it's ./assets/icons. The name of the SVG files is used to determine the symbol name.

So, if you have a file in ./assets/icons/user.svg the sprite will contain a with id user.

You can now use the symbol using the provided component:

<SpriteSymbol name="user" />

This will render the following markup:

<svg>
  <use xlink:href="/_nuxt/sprite.svg#user"></use>
</svg>

The symbol is referenced from the sprite via URL.

TODO

Support multiple sprites
Remove large dependency on svg-sprite
Provide more information about generated sprite via composable
Provide option to inline sprite in SSR
Docs
Tests
Separate component to only render without

npm