Задать вопрос
@eldar_web
javascript

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

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


Это хороший тон? Если нет, то как правильно сделать?
  • Вопрос задан
  • 730 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 2
sftutukov
@sftutukov
Лучше делать ссылку на иконку:
<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>
Ответ написан
3 комментария
3 комментария
@vintage
Да, на текущий момент это оптимальный способ вставки иконок, позволяющий изменять их визуализацию через CSS. Только вынесите её лучше в отдельный шаблон.
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработать сайт на React + Nest
19 апр. 2024, в 13:38
1500 руб./в час
Интеграция МИС с Asterisk(Freepbx)
24 апр. 2024, в 17:17
15000 руб./за проект
Разработка страницы блога на сайте на WordPress
24 апр. 2024, в 17:00
1000 руб./в час
Ещё заказы