How to use SVG sprite as CSS pseudo elements?

user_15576767 0
Viewed 911

I'm trying to use SVG icons (located in a SVG sprite) as CSS pseudo elements. They're working well in HTML, but when I import them in my CSS nothing is appearing. Where could be the problem?

Working HTML:

<svg width="48px" height="48px">
    <use xlink:href="/assets/images/icons-sprite.svg#icon-name"></use>
</svg>

SVG sprite:

<svg width="0" height="0" class="hidden">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-name">
        <path ... fill="currentColor"></path>
    </symbol>
</svg>

CSS:

.test-icon:before {
    content: "";
    display: inline-block;
    width: 48px;
    height: 48px;
    background-image: url(/assets/images/icons-sprite.svg#icon-name);
}

Thanks for your answers!

EDIT: I made a GitHub repo here, normally it should always be the same icon in red

svg css html
1 Answers

Try this

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48px' height='48px'%3E%3Cuse xlink:href='/assets/images/icons-sprite.svg%23icon-name'%3E%3C/use%3E%3C/svg%3E");

Follow this link and paste your svg link. You can get your code for background-image property. https://yoksel.github.io/url-encoder/

user_126878790
Related