Как работать с иконками?

Question

[roaddd]

Как вы работаете с иконкамив проектах. У каждой иконки свой размер + какой-то лежит внутри закрашенного круга и т.д. Цвет, размеры. Как вы все это делаете? Помогите пожалуйста. Нужно общее решение

Comments

[Сергей delphinpro]

Иконки в svg формате. Вставка inline или use из спрайта. Задать размер и цвет вроде как вообще не проблема.

[imko]

Я их еще в виде масок замутил, если они одноцветные то удобно менять цвет просто через background-color

[Александр]

imko, пробовали использовать currentColor?

[imko]

Александр, не пробовал, но выглядит довольно подходящим, иконки почти всегда того же цвета что и текст который их содержит

[Ankhena]

Иконки как SVG.
Закрашенные круги: надо смотреть в макет. Без макета круги это css и border-radius.

Вставка SVG
- инлайном в разметку
- use в разметке
-- можно в сочетании с currentColor
- инлайном в css (в кастомные свойства)
-- дальше фоном (если не нужно менять цвет) или масками (если нужно)

Что-то ещё, наверное, забыла.

Люблю вариант на CSS с кастомками и масками.
Не люблю мусор в разметке, если нет анимаций и всего прочего, что однозначно говорит, что нужно в разметку.

[roaddd]

Сергей delphinpro Ankhena, хорошо а с каким размером по дефолту вставляете? На сайте может быть width 120 и 10 для примера

[Сергей delphinpro]

roaddd, исходя из того, что иконки часто сопровождаются текстом (в меню или кнопках), то размер в 1em выглядит разумным выбором. Переопределить размер в отдельных случаях проблемы не составляет.

[Сергей delphinpro]

Ankhena,

Не люблю мусор в разметке, если нет анимаций и всего прочего, что однозначно говорит, что нужно в разметку.

С компонентным подходом на мой взгляд неплохо выходит

<x-menuitem>
  <x-icon name="user"/>
  Profile
</x-menuitem>

[roaddd]

Сергей delphinpro, ещё вопрос).
1. Как будете размер вставлять у иконки для примера arrow right. У него ширина больше, а высота меньше.
2. Всегда пишете в em? А почему не в rem для примера?

[Сергей delphinpro]

roaddd,
1. Я обычно иконки предварительно обрабатываю в иллюстраторе, - устанавливаю им всем одинаковый квадратный вьюбокс. Иконка получается вписанной по центру в этот квадрат. Таким образом внешние размеры ширины и высоты всегда одинаковы между собой и заданы равными 1em - то есть текущему размеру шрифта. Это самый простой вариант. Так размер иконки можно задавать одним свойством font-size.

2. Одна из причин описана в предыдущем пункте. Вторая в предыдущем сообщении – указывая размер в 1ем икона примет размер шрифта текста, рядом с которым расположена, и почти всегда будет смотреться нормально.

Answer 1

[TooTal]

общего решения не дам, но как дизайнер, могу сказать, что помещаю иконку в контейнер, например, 24px, сама она по себе может быть любых размеров и соотношений сторон в рамках контейнера. Создаю из иконок библиотеку и отдаю разрабам.