How to work with svg sprites?

Question

css

In general, I collected a sprite in gulp svg through symbol. it looks like:

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="gamecontroller" viewBox="0 0 64 64"> ...     </symbol>
    <symbol id="icons-11" viewBox="0 0 65 65"> ...    </symbol>
</svg>

I'm trying to insert it through the background like this:

.my-icon {
  display: inline-block;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  background: url('svg-symbols.svg#gamecontroller') no-repeat;
  background-size: contain;
}

but nothing comes out. what am I doing wrong?

Answer 1

1. symbol is a descriptive element, it is not displayed, but it can be used in the use element

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="gamecontroller" viewBox="0 0 64 64"> ...     </symbol>
    <symbol id="icons-11" viewBox="0 0 65 65"> ...    </symbol>
    <use xlink:href='#gamecontroller' />
  </svg>

2. How to implement the approach that you want (SVG fragment) is written here
3. With this approach, CSS styles are not applicable to SVG elements.