Customize styles output

By default, the plugin will generate CSS or mixins (for SCSS, Less and Stylus) with variables which contain all sprites data.

You can alter the output by using the styles.callback. You can access the default content generated by the plugin, but you can also write your own output by using the createSpritemap function.

In the example below, this will generate only background data uri.

// vite.config.js / vite.config.ts
import VitePluginSVGSpritemap from '@spiriit/vite-plugin-svg-spritemap'

export default {
  plugins: [
    VitePluginSVGSpritemap('./src/icons/*.svg', {
      styles: {
        filename: 'src/scss/spritemap.css',
        callback: ({ content, options, createSpritemap }) => {
          let insert = ''
          insert += createSpritemap((svg, isLast) => {
            const selector = `.${options.prefix}${svg.id}`
            let sprite = ''
            sprite = `${selector} {`
            sprite += `\n\tbackground: url("${svg.svgDataUri}") center no-repeat;`
            sprite += '\n}'
            return sprite
          })
          return insert
        }
      }
    })
  ]
}

The createSpritemap helper iterates over every icon and calls your generator with (svg, isLast): svg exposes id, width, height, viewbox and svgDataUri, while isLast is true on the final icon (handy for separators).

An icon that declares variables also exposes variableDefaults, a map of variable name to its default, and svgDataUriTemplate, the same data URI with each themable value replaced by a ___name___ token. They are not available under the same conditions:

• variableDefaults is there for every icon that declares a variable, whatever the lang and the include.
• svgDataUriTemplate is only written when the plugin also emits the mixin that reads it, so it needs a lang other than css and an include covering both 'data' and 'mixin'. It roughly doubles a themable icon's entry, so it is left out rather than paid for unused.

Both are undefined for an icon that declares nothing, and with variables: false.

Written inline as above, the callback infers its own types. Extracted to a named function it no longer can, so StylesCallback types the whole thing:

import type { StylesCallback } from '@spiriit/vite-plugin-svg-spritemap'

const callback: StylesCallback = ({ createSpritemap }) =>
  createSpritemap(svg => `.icon-${svg.id} { background: url("${svg.svgDataUri}"); }`)

StylesCallbackContext names the object it receives and SpritemapGenerator the function createSpritemap takes, for the times you need either one apart.

You can use the styles.include option to control exactly what to include inside your style. If you want only the declarations block with ['data'] for SCSS/Less/Stylus or ['bg'] in CSS, only background css class generation for example.

You can also control the names, via the styles.names option, of the mixin, the variables sprites and prefix.

// vite.config.js / vite.config.ts
import VitePluginSVGSpritemap from '@spiriit/vite-plugin-svg-spritemap'

export default {
  plugins: [
    VitePluginSVGSpritemap('./src/icons/*.svg', {
      styles: {
        filename: 'src/scss/spritemap.scss',
        names: {
          mixin: 'icon-sprite',
          prefix: 'icon-prefix',
          sprites: 'icons'
        }
      }
    })
  ]
}