Output options

output

• Type: boolean | object | string
• Default: true

As a string, set the destination of the file (see output.filename). Set to false to disable output.

output.filename

• Type: string
• Default: '[name].[hash][extname]'

The destination of the file. You can use output filename like Rollup.

INFO

Doesn't support Rollup hash number

output.name

• Type: string
• Default: 'spritemap.svg'

The name of the file, appears in the manifest key.

output.use

• Type: boolean
• Default: true

Insert use element in the spritemap. Allowing you to invoke svg sprite with <use> tag:

<svg>
  <use xlink:href="/__spritemap#sprite-spiriit"></use>
</svg>

Disable this option to remove use generation on spritemap.

output.view

• Type: boolean
• Default: true

Insert view element in the spritemap. Allowing you to invoke svg sprite with <img> tag or background-image CSS property:

<img src="/__spritemap#sprite-spiriit-view" />

.icon {
  background-image: url('/__spritemap#sprite-spiriit-view');
}

Why the -view suffix?

The spritemap generates two types of elements for each SVG:

• <symbol> elements (e.g., #sprite-icon-name): Used with <use> tags inside <svg> elements. These cannot be used directly with <img> tags or background-image CSS.
• <view> elements (e.g., #sprite-icon-name-view): Used with fragment URLs in <img> tags and background-image CSS. The -view suffix is required because <view> elements define a specific viewBox that displays only the referenced icon, not the entire spritemap.

When using background-image or <img> tags, always use the -view suffix to reference the correct element.

Disable this option to remove view generation on spritemap.