Комментарии 18
В отличие от шрифтов, свойство color не действует на SVG-иконки: необходимо использовать атрибут fill для указания цвета.
Иногда полезнее сделать fill: currentColor глобально и раскрашивать через color родителя.
Если иконок много то спрайт будет слишком толстый, если на странице используются 1-5 иконок, и ради них тянуть спрайт со остальными 70 иконками… так себе решение.
А чтобы заставить это работать в осле, надо js еще подключать, который будет брать иконку из спрайта и инжектить в html. Но если осел не нужен и класть на размер спрайта, то вполне неплохое решение)
А чтобы заставить это работать в осле, надо js еще подключать, который будет брать иконку из спрайта и инжектить в html. Но если осел не нужен и класть на размер спрайта, то вполне неплохое решение)
Речь идет об инлайновых SVG-иконках, без спрайтов. Прочитайте, пожалуйста, статью внимательнее и посмотрите пример на CodePen
Это тоже самое, только так называемый спрайт у вас присутствует в теле html а не во внешнем файле.
При таком подходе мне не понятно, зачем вообще делать
При таком подходе мне не понятно, зачем вообще делать
<use xlink:href="#icon-coffee" href="#icon-coffee" /> Если можно сразу вставить svg код в нужное место, и без извращений поменять цвет, рамер… да что угодно. Это железно работает везде. Согласен. Но мне кажется что это усложняет изменение стилей у каждой иконки.
Все довольно кроссбраузерно. Ничего сложного в том чтобы создавать такие спрайты нет, даже вручную, в этом просто стоит раз нормально разобраться.
Уже 3 года моя команда пользуется спрайтами и всегда работает во всех браузерах даже ie 10.
Это не спойлер но если лень делать руками, есть хорошая платформа для генерации таких спрайтов — icomoon. И все ваши нарекания сразу отпадают :)
Уже 3 года моя команда пользуется спрайтами и всегда работает во всех браузерах даже ie 10.
Это не спойлер но если лень делать руками, есть хорошая платформа для генерации таких спрайтов — icomoon. И все ваши нарекания сразу отпадают :)
Для того чтоб в ослах это работало нужен js. Вот тут есть все необходимое css-tricks.com/svg-use-external-source
В статье еще используются css переменные, которые так же не везде поддерживаются. Это как бы тоже уже не кроссбраузерно. Осла списывать рановато
В статье еще используются css переменные, которые так же не везде поддерживаются. Это как бы тоже уже не кроссбраузерно. Осла списывать рановато
Спасибо, интересно. Жаль, нет способа заставить старые версии браузеров отображать иконки в нужных цветах. Но для одноцветных иконок — прекрасное решение!
хорошие иконки. а есть ссылка на них?
Здесь пытаются добавить поддержку CSS-переменных в IE11 и выше.
К сожалению SVG use достаточно странная конструкция, которая с одной стороны — изолирует вложенное содержимое, и его сложно стилизовать. А с другой стороны нет — стили, определенные внутри SVG, без проблем «текут» из изображение в изображение.
Есть и другая проблема — заливки (defs) не поддерживаются от слова вообще.
Вот хороший пример — codesandbox.io/s/k26937poxr, достаточно просто потыкать мышкой в html код, чтобы увидеть глубину падения.
Есть и другая проблема — заливки (defs) не поддерживаются от слова вообще.
Вот хороший пример — codesandbox.io/s/k26937poxr, достаточно просто потыкать мышкой в html код, чтобы увидеть глубину падения.
применять атомные классы к элементам
атомарные?
Попробовал, интересно.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Делаем разноцветные иконки с помощью SVG-символов и CSS-переменных