Как подключить svg спрайт в файл в html и css?

1
2
3
4
5
6
7
8

<svg>
  <symbol id="icon-1" viewBox="0 0 24 24">
    <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zM9 16.2L5.8 13c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l2.3 2.3L16.6 8c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.4 16.2c-.4.4-1 .4-1.4 0z"/>
  </symbol>
  <symbol id="icon-2" viewBox="0 0 24 24">
    <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zM16 15c-.4 0-.7-.1-1-.4l-4-4c-.6-.6-.6-1.5 0-2.1s1.5-.6 2.1 0l2.3 2.3 4.6-4.6c.6-.6 1.5-.6 2.1 0s.6 1.5 0 2.1l-5.6 5.6c-.3.3-.6.4-1 .4z"/>
  </symbol>
</svg>

1
2
3

<svg width="24" height="24">
  <use xlink:href="#icon-1"></use>
</svg>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

svg {
  display: none;
}

.symbol {
  fill: currentColor;
  display: inline-block;
  height: 1em;
  width: 1em;
}

1
2
3
4

.icon {
  background-image: url('sprite.svg');
  background-repeat: no-repeat;
}