Comments 10
В статье не хватает объяснения, зачем вообще нужны svg-спрайты и почему не подходит стандартный подход вебпака с инлайном в data-uri
А я вот с ходу не смог найти, почему вынесение иконок в отдельный файл лучше, чем инлайн их в css через data-uri.
Если вы знаете, поделитесь информацией, пожалуйста.
2) от data-uri css-ник разбухнет
Так понятнее. Спасибо!
возможность раскраски а-ля иконочный шрифт
возможности раскраски ограничены всего 2 цветами, но для одноцветных иконок подходит, очень удобно.
от data-uri css-ник разбухнет
нет, если их не кодировать в base64, а вставлять как есть, экранировав специальные символы. Так делает svg-url-loader. Тогда объём будет меньше, браузер быстрее парсить такой контент, да и гзипится оно лучше.
Я сам больше за использование SVG из CSS, но поддержка в Safari и Android до 4.4 не позволяет полностью насладиться этой элегантной красотой :)
Я имел ввиду использование SVG-стеков из CSS (ссылаться на символ в спрайте по его id — .logo {background-image: url('sprite.svg#logo')}), сейчас это невозможно из-за Safari и Android Browser. Но есть js-полифиллы.
SVG спрайт с webpack одной строкой