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>