Reply To: SVG Sprite Symbols as CSS Content or Background?

[_icarus_]

@Fatbat

From my understanding of the information you have provided –

You are using an SVG Sprite – which gets loaded in your HTML doc and must be xlinked.

You are then trying to access symbols that you have loaded into your HTML file, from a CSS/less/SASS file. Due to the nature of SVGs and their necessity for xlinking – you will not be able to use an SVG you have loaded into the DOM through your HTML file, to modify the styles of your page or site.

For the specific use case that I am imagining you are trying to achieve(an SVG icon used as a background image), consider this:

you can load your svg as the background-image property, then use background position to adjust which icon/version of the icon to display. That would look something like this:

.icon{
background-image: url(directory/path-to-svg-sprite.svg);
width: 1em; height: 1em;
font-size: 12px; //makes the width AND height 12px (you would need to adjust your svg viewBox in this particular use case)
display: inline-block;
position: relative;
}
.icon.icon-arrow-left:before{
background-position: your specific icon coordinates here;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
content: "";
display: block;//psuedo element best practice is to set a display value
}

The tricky thing about this method however, is that you may only access your SVGs as they appear in your sprite – you cannot modify the actual properties of the SVG. So if your icon needs to fade from red to black, you will need a red icon, and a black icon in your sprite sheet.