nuxt-svg-spritemap

A library for creating a spritemap for an application on Nuxt 3.

Why?

Using a spritemap is a technique that allows you not to load a bunch of icons as the user opens pages, but to pack all the icons into one file and add it once.

<svg>
  <use xlink:href="#item1"></use>
</svg>

<svg>
  <use xlink:href="#item1"></use>
</svg>

<svg>
  <use xlink:href="#item1"></use>
</svg>

<svg>
  <use xlink:href="#item1"></use>
</svg>

<svg>
  <use xlink:href="#item1"></use>
</svg>

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <symbol id="item1">
    <path>...</path>
  </symbol>
</svg>

If you have an application with a bunch of reusable icons, then this option is for you.

Installation

npm i nuxt-svg-spritemap

or

yarn add nuxt-svg-spritemap

Configuration

nuxt.config.js

import nuxtSvgSpritemap from 'nuxt-svg-spritemap/vitePlugin';

const nuxtSvgSpritemapConfig = <Options>;

export default defineNuxtConfig({
  vite: {
    plugins: [nuxtSvgSpritemap(nuxtSvgSpritemapConfig)],
  },
  appConfig: {
    nuxtSvgSpritemapConfig,
  },
});

interface Options

interface Options {
  path2svg: string | string[];
  // path to svg folder.
  // by default: 'assets/svg/'

  logStat: boolean;
  // log build stat after buildings
  // example: Spritemap builded, finded "5" svg files
  // by default: false

  dirSeparator: string;
  // by default: '-'

  transform: function(spritemap:string):string | null;
  // You can transform your svg spritemap before inserting
  // See more in docs/examples/README.md

  outputFilename: string;
  // Filename for spritemap
  // You can use this field for control of output dir.
  // For example: './public/assets/spritemap.svg'
  // by default: './public/spritemap.svg'

  spriteComponentName: string;
  // Sprite vue component name
  // by default: 'SVGSprite'
}

plugins/nuxt-svg-spritemap.js

import nuxtSvgSpritemapPlugin from 'nuxt-svg-spritemap/plugin';

export default defineNuxtPlugin((nuxtApp) =>
  nuxtSvgSpritemapPlugin(nuxtApp, useAppConfig().nuxtSvgSpritemapConfig)
);

After adding the nuxt-svg-spritemap.js file, you don't need to touch it anymore. You must specify and/or change all configuration options in nuxt.config.js. When viewing the examples in the /docs/examples/README.md folder, remember that they are based on the fact that you have already added the plugins/nuxt-svg-spritemap.js file.

NOTE: currently this plugin does not support svg directory tracking. This means that you need to rebuild on changes to the svg directory or files in order to rebuild the spritemap.

Usage

/ <app-root>
├── ...
├── assets
│   └── svg/
│       ├── menu/
│       │   └── unread.svg
│       └── logo.svg
├── pages/
|   └── index.vue
└── ...

/<app-root>/pages/index.vue

<template>
  <SVGSprite name="logo" />
  <SVGSprite name="menu-unread" />
</template>