Большой вопрос у меня к Вадиму или к тому, кто знает, особенно про семантику разметки иконок в документе.
Посмотрел видео, всё круто, всё просто, но на практике, ты собираешь в спрайт, чтобы использовать через use, тебе нужно прописывать обязательно width и auto для svg, чтобы картинка не отображалась/увеличивалась на весь экран. Но когда ты идёшь в CSS, чтобы стилизовать, то размер не изменишь из CSS. Задача: для мобильной версии изменить размер иконки с 70px до 30px. Она будет обрезаться, и не будет увеличиваться. Проблема решается через viewBox, не задавая при этом width and height SVG элементу в html, когда инлайнишь из спрайта через use. Тогда размеры в CSS контролируются.
Ок, у меня два вопроса, даже три:
Первый: говорят нужно задавать width и height svg, как на самом деле быть, если учитывать проблему, которую я описал выше? Контролировать ширину и высоту через CSS можно? Или как в такой ситуации делать?
Второй: правильно ли, исходя из семантики, иконки вставлять/прописывать в HTML, а не через фон в CSS (они за стеклом - никак не поуправлять ими).
Инлайн svg вне спрайта (use) - не кешируется, правильно ли собирать svg изображения (лого, что-то там ещё) и иконки в спрайт, инлайнить всё через use, задавать viewBox (чтобы управлять размером), через CSS задавать размеры и менять им цвет.
Третий: Как вообще распределять иконки, фоны. И например, на десктопном разрешении один логотип, на мобильном другой, не по размерам, а по дизайну - другой логотип, например, ещё и цвет нужно менять при наведении. Могу менять через фон (background-image) картинку исходя из размеров версии (@media), но если это SVG и нужно менять цвет, а через CSS - цвет не изменить, мне 2 версии (2 версии цветов) SVG сохранять и менять через фон в CSS?
БЭМ вопрос:
Как спрайт отображать правильно в структуре файлов по БЭМ, каждому блоку - своя разметка, стиль, скрипт, “картинка”. Если “картинка” для определённого блока, элемента лежит в спрайте (в отдельном - в общем документе), как правильно делать?
Например, у меня блок “поиск” - создаю папку search там html, scss, js, img - а иконки нет, она в спрайте.
Или каждому блоку - нужно отдельно иконку/картинку SVG (без спрайтов), вставлять через HTML, но тогда не будет кэшироваться.