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

[Mick (O'Gorman)]

Есть отдельные svg файлы (иконки), необходимо стилями подключить эти иконки в нужное место html используя css.

[German (Герман)]

Вы можете пройти, например, на: https://icomoon.io/

И выбрать необходимые иконки. Скачав svg спрайт и css.

Подключать методом:

<svg class="icon">
  <use xlink:href="путь до svg файла/icon.svg#icon-one"></use>
</svg>

Это указывает на саму иконку в файле:

#icon-one

Пример

<symbol id="icon-one" viewBox="0 0 32 32">
<title>pen</title>
<path d="M31.818 9.122l-8.939-8.939c-0.292-0.292-0.676-0.226-0.855 0.146l-1.199 2.497 8.35 8.35 2.497-1.199c0.372-0.178 0.438-0.563 0.146-0.855z"></path>
<path d="M19.231 4.231l-8.231 0.686c-0.547 0.068-1.002 0.184-1.159 0.899-0 0.001-0 0.001-0.001 0.002-2.232 10.721-9.84 21.183-9.84 21.183l1.793 1.793 8.5-8.5c-0.187-0.392-0.293-0.83-0.293-1.293 0-1.657 1.343-3 3-3s3 1.343 3 3-1.343 3-3 3c-0.463 0-0.902-0.105-1.293-0.293l-8.5 8.5 1.793 1.793c0 0 10.462-7.608 21.183-9.84 0.001-0 0.001-0 0.002-0.001 0.714-0.157 0.831-0.612 0.898-1.159l0.686-8.231-8.538-8.539z"></path>
</symbol>

Вы можете посмотреть этот пример подключения.

Или использовать различные варианты вставок:

Можно использовать тег img:

<img src="icon.svg" alt="icon">

Можно использовать элемент object:

<object data="image.svg" type="image/svg+xml" />

или iframe:

<iframe src="image.svg"></iframe>

[Evg (Евгений)]

Мне нравится Linearicons набор svg. Не только стилем, но и понятным отображением, как подключить:

Linearicons

https://linearicons.com/free

Free v1.0.0 (170 icons)

Нажимаем на иконку и открывается окно. Там есть все. Просто и понятно.

В платном варианте (59 долларов) 1001 иконок.

Подключается, как там описано или, как в предыдущем примере, например:

<svg class="icon">
  <use xlink:href="путь до svg файла/icon.svg#icon-one"></use>
</svg>