nuxt-svg-icon-sprite
TypeScript icon, indicating that this package has built-in type declarations

0.0.1-beta.0 • Public • Published

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

Keywords

none

Install

npm i nuxt-svg-icon-sprite

DownloadsWeekly Downloads

237

Version

0.0.1-beta.0

License

MIT

Unpacked Size

11.6 kB

Total Files

11

Last publish

Collaborators

  • dulnan