Comments 8
Способ №5 – простой (с оговорками).
Подавляющее большинство из тех, кто занимается вёрсткой – используют бандлеры или таск-раннеры. Найдите плагин для своей системы сборки, который пакует все иконки из папки в один svg-спрайт и потратьте немного времени для его настройки.
Встраивать в html можно как-то так:
<svg><use href="путь/до/sprite.svg#social-vk" /></svg>+ Легко менять размер и цвет.
- Надо разобраться.
Это относится к использованию текстур иконок. Просто через сборщики. Плюсы и минусы на самом деле те же
Данный способ называется так же — Symbols sprite. И он лишен недостатков обычного, растрового спрайта.
1. Подключая иконку таким образом, мы можем управлять ее цветом через css.
1.1 Играя значениями inherit и currentColor мы можем управлять двухцветными иконками.
1.2 А если заюзать кастомные свойства, то и многоцветные иконки в нашей власти
2. Задав иконке ширину и высоту в «em», мы сможем управлять ее размером через свойство font-size, если это необходимо.
3. Такой спрайт может подгружаться отдельным файлом и, соответственно, закешированным браузером. А для включения в код страницы используются довольно короткие конструкции «use», которое можно еще больше сократить, используя возможности вашего шаблонизатора, или просто написав функцию на php.
<?= icon('social-vk') ?>Вообще странно, что вы не упомянули этот способ, на мой взгляд он самый оптимальный, лишён всех недостатков, перечисленных вами в других способах и даже имеет существенные преимущества.
Хочу уточнить по поводу способа №1, сами на проекте используем и проблем не возникало.
Если нужно менять цвет иконок извне, можно же задать свойство fill="currentColor" на всю иконку или на её пути, тогда она может принимать цвет окружающего контейнера.
По поводу размера кода - вас смущает кол-во кода или размер бандла? На "сложные" изображения с большим кол-вом элементов можно сделать исключение и экспортнуть пнгшный вариант, но для маленьких иконок код занимает, как правило, 2-3 строчки.
Я не говорю, что вариант плохой) Я говорю, что есть другие варианты, которые, как по мне, лучше.
Касательного первого способа. Внутри svg может быть и path, и polygon, и circle и т.п. И бывает, что внутри них тоже бывает задан цвет с помощью fill. Из-за этого нам приходится делать что, то типа:
.icon,
.icon path,
.icon circle,
.icon polygon {
fill: coral !important; /* и даже это не всегда срабатывает */
}Тут и important постоянно придётся писать, и код какой-то костыльный сам по себе😓
В общем, иконки разные попадаются. Всё зависит от вас и проекта
Иконки, в своем шрифте это тренд ✌️уже проверенный временем. Можно покрасить иконку на этапе создания шрифта, а можно вложить в элемент, и применить css filter opacity, saturation и другие, сделав чб, нужным монохромом и с эффектами.. ещё, есть тренд поновее - это Lottie files анимация через JSON data. Есть плагин импорта для фигма.
4 способа добавить иконки на сайт из Figma — все плюсы и минусы