0

I'm using svg-sprite to generate a SVG spritesheet to be embedded via the <use> method:

<svg class="icon">
  <use xlink:href="/assets/icons.svg#phone"/>
</svg>

This works nicely for embedding and styling icons via HTML markup.

However, I also need the option to embed icons purely via CSS. For example adding a content list via the CMS WYSIWYG editor should not requiring the content editor to add extra SVG elements.

For example:

<ul class="icon-list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

.icon-list li::before { /* icon here */ }

Is there a way to achieve this with the <use> embed method, or a similar method? The solution also needs to allow for colouring the SVG via CSS.

Matt Stone
  • 3,705
  • 4
  • 23
  • 40

1 Answers1

1

If I understand your question correctly, the basic answer is no.

You can include an SVG icon in the CSS, just as you could a bitmap one. For example with background-image. However due to browser privacy restrictions, it has to be self contained. It cannot refer to external SVG elements with <use>. Or in fact any external object - such as other images, fonts etc.

It also cannot be styled with outside CSS. So, for example, if you needed different colour variants of the same icon, you would need to create a separate SVG for each colour.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • Thanks, sadly your answer matches the current results of my research. I haven't found anyone else really recognising this problem. I wonder if this is an oversight in the common push towards replacing icon fonts with SVG icons, or is it a flaw in my understanding of how icons should be used? – Matt Stone Nov 23 '16 at 01:25
  • There is nothing stopping you from using SVG files in the same way as you would a bitmap spritesheet. Ie. with `background-image` and `background-position`. This page may also be of some help: https://betravis.github.io/icon-methods/svg-sprite-sheets.html – Paul LeBeau Nov 23 '16 at 12:19
  • That's true Paul, but you lose the ability to color fill the icon with that method. – Matt Stone Nov 23 '16 at 23:46
  • True. But at least you can have all the variants in one file. – Paul LeBeau Nov 24 '16 at 09:42