![Сборник SVG иконок Feather](https://atuin.ru/blog/wp-content/uploads/2020/02/feather.png)
Иконки можно подключать как SVG спрайты, так и HTML тегами, подключив библиотеку на JS
Иконки можно подключать как SVG спрайты, так и HTML тегами, подключив библиотеку на JS
data-feather
с названием иконки (см. ниже), например: <i data-feather="github"></i>
feather.replace()
для замены всех элементов с атрибутом data-feather
на SVG спрайтыfeather
или feather-имя_иконки
для конкретной. Или можно добавить свои классы, например <i class="myicon" data-feather="github"></i>
1 2 3 4 5 6 |
.myicon { width: 100px; height: 100px; stroke: #337AB7; /* Цвет иконки */ stroke-width: 2; /* Толщина линий */ } |
В итоге получится так:
Более подробную информацию по работе с JS библиотекой можно посмотреть на github у разработчиков
Скачиваем нужную иконку из списка ниже или получаем ее код, а далее подключаем. Подробнее можно посмотреть в теме: Варианты установки SVG иконки
Иконки Feather на github
Сайт авторов feathericons.com
Анимированная SVG-картинка в виде мозга, визуализирующая нейронную сеть
Движущийся влево и вправо цветок, реализованный на чистом CSS
Вращающийся земной шар на CSS и SVG и несколько вариантов его оформления
Спасибо за удобную реализацию!