search

cascornelissen / svg-spritemap-webpack-plugin

SVG spritemap plugin for webpack
MIT License
207 stars 50 forks source link

referencing via fragment identifiers doesn't work #152

Closed antonyd89 closed 3 years ago

antonyd89 commented 3 years ago

As mentioned in the documentation: Whether to include a element for each sprite within the generated spritemap to allow referencing via fragment identifiers (https://css-tricks.com/svg-fragment-identifiers-work/). Passing a string will use the value as a postfix for the id attribute.

Expected behavior If you write CSS background style and in the URL path mention particular fragment identifiers, then you will see the particular image from SVG sprite.

Actual behavior the following style should load a particular image from SVG sprite, but it loads and shows the whole svg sprite.

backgroundimage: url("//localhost:8888/cdn/sprites/phone-spritemap.svg#svg-icon-lock-href")

System information

Settings of the svg-spritemap-webpack-plugin:

new SVGSpritemapPlugin('resources/phone/assets/svg/*/.svg', { output: { filename: 'cdn/sprites/phone-spritemap.svg', }, sprite: { prefix: 'svg-', generate: { title: false, symbol: "-href", use: true, view: "-href" } }, }),

Could you help me find a solution on how to use approach "referencing via fragment identifiers"? Have I configured the settings correctly?

antonyd89 commented 3 years ago

I found the mistake in my configs. Issue has been solved

vdloc commented 3 years ago

I found the mistake in my configs. Issue has been solved

@antonyd89 Can you show the correct configs for people who faced the same issue?