vite-plugin-svg-spritemap

Appearance

Styles options ​

styles ​

  • Type: false | object | string
  • Default: false

File destination like src/css/spritemap.css or styles object (see below available options)

styles.filename ​

  • Type: string
  • Default: undefined

The destination of the stylesheet file like your source folder.

styles.lang ​

  • Type: 'less' | 'scss' | 'styl' | 'css' | undefined
  • Default: undefined

Enforce the styles language generated by the plugin. By default, this will be detected based on the extension of the filename. If not found, it will fallback to css.

styles.include ​

  • Type: boolean | ['mixin', 'variables'] | ['bg', 'mask', 'bg-frag'] | undefined
  • Default: ['mixin', 'variables'] for SCSS/Less/Stylus, ['bg', 'mask', 'bg-frag'] for CSS

This allows you to choose what to include in the styles output payload.

styles.names ​

  • Type: { prefix: string, sprites: string, mixin: string }
  • Default: { prefix: 'sprites-prefix', sprites: 'sprites', mixin: 'sprite' }

Allows you to customize the variables/mixin names of the generated Sass/Less/Stylus.

styles.sizes ​

  • Type: { unit: string, base: number }
  • Default: { unit: 'px', base: 1 }

Allows you to customize the CSS unit and base value used for width/height output in the generated stylesheets. This is useful for outputting relative units like em or rem instead of pixels.

Example: Using em units ​

js
VitePluginSvgSpritemap('./src/icons/*.svg', {
  styles: {
    filename: 'src/styles/spritemap.scss',
    sizes: {
      unit: 'em',
      base: 16
    }
  }
})

With this configuration, a sprite with dimensions 32x32 pixels will output as 2em x 2em (32 / 16 = 2).

This enables responsive icon sizing using font-size:

css
.icon {
  width: 1em;
  height: 1em;
}

.container {
  font-size: 200%; /* Icon will be twice the size */
}

styles.callback ​

  • Type: Function | undefined
  • Default: undefined

Allows you to customize the output of the generated styles file (see Customize Styles Outputs).