How to load svg picture from css

Question

Currently, I have a html site where I am inserting SVG pictures via the tags and the code of svg file itself. It works, but the code is not quite pretty. Instead, I would like to load such picture in my css file where I have class for this type if icons called 'icon-no-background'. This class styles each icon in the same way. Beneath this class I would like to add a subclass that would load each product's icon.

Code of my class:

.icon-no-background {
      position: absolute;
      top: 0;
      left: 0;
      color: #aaabb6;
      width: 1.28rem;
      height: 1.28rem;

      .icon-product1 {
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="22.7px" height="17.6px" viewBox="0 0 22.7 17.6" style="enable-background:new 0 0 22.7 17.6;" xml:space="preserve">
          <path stroke="currentColor" stroke-width="0.4" class="st0" d="some svg code here"></path>
        </svg>
      }
    }

Then I would simply call this class from my html and it should display the correct picture. It does not work however. What do I do wrong? I've been trying to use even 'url' attribute to load the svg file but with no success.

Any idea?

Thanks, David

Take a look at this svg encoder: https://codepen.io/yoksel/pen/JDqvs This will encode your svg so that you can use it as a css background. — enxaneta, Feb 19 '19 at 15:15
@MTCoster - and what is the best practise? I don't have it in my css now, but I want to. The html code gets confusing with so long svg code. — David Martinka, Feb 19 '19 at 15:27
Possible duplicate of [Inline SVG in CSS](https://stackoverflow.com/questions/10768451/inline-svg-in-css) — soulshined, Feb 19 '19 at 15:33

How to load svg picture from css

0 Answers0