Question 248532 in Html Question posted in
Some basic documentation can be found here.

Html – How do I use the icon from the .svg sprite directly in the CSS/SCSS?

a customer is swearing and demanding that by 2023 standards I use all icons inside the svg file. And icons both for background images and for normal icons that can be changed.

I am using an svg sprite of the following format:

 <?xml version="1.0" encoding="utf-8"?>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol fill="none" viewBox="0 0 24 24" id="arrow-up-and-down" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.45 6.72 6.73 3 3.01 6.72M6.73 21V3M13.55 17.281l3.72 3.72 3.72-3.72M17.27 3v18"
        stroke="#29354D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    </symbol>
   </svg>

To use in the layout I use the following template:

`<svg class="arrow-link__icon">
<use xlink:href="./src/images/svg/symbol/sprite.svg#arrow-up-and-down" />
</svg>`

Everything inserts perfectly! The file is stored separately, so I get the images easily and simply. But what about the styles? How can I take some similar icon and insert it into the styles?

`

&-item__text {
            background: url('../images/svg/symbol/sprite.svg#arrow-up-and-down') top left/cover
                    no-repeat,
                $darkBlue;
            height: 100%;
        }

`

now I’m prescribing the following, but it’s not working! I can’t find the right answer on the internet and my boss is getting angrier and angrier. Help!

Tags:

2

Answers


  1. 0

    It seems like you want to use SVG icons from your sprite file not only for displaying images but also as background images for CSS styles. Based on the code snippet you provided, it looks like you’re on the right track, but there are a few things you need to ensure for it to work correctly:

    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="arrow-up-and-down" viewBox="0 0 24 24">
    <!-- Your icon paths here -->
  </symbol>
  <symbol id="main-cards-bg" viewBox="0 0 24 24">
    <!-- Your icon paths here -->
  </symbol>
  <!-- Add more symbols for other icons -->
</svg>

    SVG Usage: In your HTML, you’re already using the element to reference the icons correctly. Make sure the id you’re using matches the id defined in your SVG sprite. For example:

    <svg class="arrow-link__icon">
  <use xlink:href="./src/images/svg/symbol/sprite.svg#arrow-up-and-down" />
</svg>

    To use an SVG as a background image in CSS, you should be able to do it like this:

    &-item__text {
  background: url('../images/svg/symbol/sprite.svg#main-cards-bg') top left/cover no-repeat, $darkBlue;
  height: 100%;
}
    Login or Signup to reply.
  2. 0

    As commented by Robert Longson: you can’t reference a <symbol> in <img> sources – same applies to CSS background images.

    For images you can use fragment identifiers – this requires to tweak your sprite svg.
    Sprites for use with fragment identifiers need rendered elements.

    Here is an example of a hybrid sprite svg working both with <use> and <img> elements.

    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
/**
* show only targeted element
* as definded by fragment identifier
* e.g: sprite.svg#use_up_down
*/
    use {
      display: none;
    }
    use:target {
      display: block;
    }
</style>
<!-- icons for use with <use> references -->
    <symbol fill="none" viewBox="0 0 24 24" id="arrow-up-and-down" >
      <path d="M10.45 6.72 6.73 3 3.01 6.72M6.73 21V3M13.55 17.281l3.72 3.72 3.72-3.72M17.27 3v18"
         stroke="#29354D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    </symbol>
    <symbol fill="none" viewBox="0 0 24 24" id="arrow-up" >
      <path d="M10.45 6.72 6.73 3 3.01 6.72M6.73 21V3"
         stroke="#29354D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    </symbol>

    <symbol fill="none" viewBox="0 0 24 24" id="arrow-down" >
      <path d="M13.55 17.281l3.72 3.72 3.72-3.72M17.27 3v18"
         stroke="#29354D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    </symbol>
<!-- icons for use with images - hidden by default -->
    <use id="use_up_down" href="#arrow-up-and-down"  />
    <use id="use_up" href="#arrow-up"  />
    <use id="use_down" href="#arrow-down"  />
   </svg>

    Basically you need to add a <use> instance for each symbol.

    Then you add a stylesheet to hide all use elements except the targeted element.

    use {
  display: none;
}
use:target {
  display: block;
}

    Now we can use both sprite concepts:

    <svg class="arrow-link__icon" viewBox="0 0 24 24">
  <use href="sprite.svg#arrow-up-and-down" />
</svg>
<img src="sprite.svg#use_up" />
<img src="sprite.svg#use_down" />
<!-- nothing selected -->
<img src="sprite.svg" />

    See also plnkr example.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search