Как правильно использовать svg-иконку в коде?

Question

[eldar_web]

Если я захочу использовать svg-иконку на сайте, то беру код SVG и ставлю в код:

<div>
<svg>...</svg>
</div>

Это хороший тон? Если нет, то как правильно сделать?

Answer 1

[Сергей Тутуков]

Лучше делать ссылку на иконку:

<div>
<svg pointer-events="none" height="30" width="20">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon"></use>
</svg>
</div>

и потом в футере или в отдельном файле svg координаты:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0px; height: 0px;">
   <symbol id="icon" viewBox="0 0 15 30">
       <path stroke="currentColor" d="M13.5 1.5l-11.5 13.5 11.5 13.5"></path> 
    </symbol>
</svg>

Comments

[Ankhena]

Через CSS они при таком раскладе покрасятся?

[Сергей Тутуков]

Ankhena W: Да, к svg дописываешь класс и можно манипулировать.
codepen.io/STutukov/pen/wgvNRP

[Ankhena]

Сергей Тутуков: спасибо

Answer 2

[vintage]

Да, на текущий момент это оптимальный способ вставки иконок, позволяющий изменять их визуализацию через CSS. Только вынесите её лучше в отдельный шаблон.

Comments

[eldar_web]

Что значит выносить в отдельный шаблон?

[vintage]

eldar_web: чтобы не повторять код иконки в каждом месте использования, её выносят в отдельный шаблон, а в месте использования вставляют лишь включение этого шаблона. Как это сделать - зависит от используемого вами шаблонизатора.