Как получить спрайт со стилями?

Question

[olenafront097]

есть иконки в свг
https://github.com/hampusborgos/country-flags/tree...

нужно иметь возможность манипулировать только классами ( поменяли класс - поменялся флаг)
пример ниже

Comments

[Ankhena]

На bg position делали растровые спрайты.
Зачем так делать с svg? Если можно просто путь сменить?
sprite.svg#fi

[olenafront097]

Ankhena, есть какой-то плагин?

[Ankhena]

olenafront097, для сборки векторных спрайтов? Полно. Google -> "gulp svg sprite" и т.д.

[olenafront097]

Ankhena, Ankhena, а без галпа нету? что-то не могу найти

[Ankhena]

olenafront097, думаю, что если заменить слово gulp, но online, то найдется.

[olenafront097]

Ankhena, обычный корвертор есть

но именно чтобы был с css

проблемно найти

стран более 200
проблемно самой вводить

[Ankhena]

olenafront097, с css не будет.
Но поверьте, даже 200 и даже руками вы бы написали за то время, что висит этот вопрос.
А если проявить смекалку и пользоваться автозаменой в столбце из имен файлов, так и вовсе несколько минут.

[olenafront097]

Ankhena, так проблема в том что мне нужно на 1х
16 на 16 картинки
на 2х - 64 на 64

это бред? так нельзя тут? нужен один размер? ведь это не тэг img...
просто хотят чтобы не мылилось на ретине

[Ankhena]

olenafront097, у вас же svg, какое мыло? Те кто это хотят, в своём уме?

[olenafront097]

Ankhena, пробую через свг
width: 50px;
background-image: url(test.svg#ae);
height: 50px;

<svg  class="hidden">
  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 3" id="ae">
    <path fill="#00843D" d="M0 0h6v3H0z"></path>
    <path fill="#fff" d="M0 1h6v2H0z"></path>
    <path d="M0 2h6v1H0z"></path>
    <path fill="#C8102E" d="M0 0h1.5v3H0z"></path>
  </symbol>

не работает

[Ankhena]

olenafront097,
1. Зачем для svg класс hidden, если он в отдельном файле?
2. Чтобы фон показывался, хотя бы у чего-то должен быть размер, у символа или bg size.

[olenafront097]

Ankhena, все-равно не работает https://jsfiddle.net/gurxf43d/1/

[olenafront097]

Ankhena,
вот тут генерировала svgsprit.es

[olenafront097]

Ankhena, инлайном вставляется
а через бэграунд нет

[Ankhena]

olenafront097, дело в том, что для использования в bg спрайт должен быть по-другому сделан.
Либо из комбинации symbol + view + use либо из svg, вместо symbol.

[olenafront097]

Ankhena, такое нагенерировало мне

Answer 1

[Антон Шаманов]

и в чем проблема?

<svg class="f16 ru" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 700" >
...
</svg>

Comments

[olenafront097]

Антон Шаманов, все-равно не работает https://jsfiddle.net/gurxf43d/1/

[Антон Шаманов]

olenafront097, понятно что не работает, у svg стоит один класс, а в css описан другой

[Ankhena]

Антон Шаманов, дело в том, что для использования в bg спрайт должен быть по-другому сделан.
Либо из комбинации symbol + view + use либо из svg, вместо symbol.

[Антон Шаманов]

https://jsfiddle.net/antonfedonyuk/woLnz2mp/2/

[Антон Шаманов]

Ankhena, в вопросе это не указано. вам нужно конвертировать Ваши svg в шрифт с помощью сервиса вроде https://icomoon.io/app/ . Иконки FontAwesome видели? они также сделаны.

[Ankhena]

Антон Шаманов, там цветные иконки и делать шрифтовый спрайт в современном мире нонсенс.

[Антон Шаманов]

Ankhena,

там цветные иконки

да, этот момент упустил. значит придется вам конвертировать их в base64 и вставлять подобным образом

background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");

делать шрифтовый спрайт в современном мире нонсенс.

я не знаю что вы имеете ввиду под словом спрайт в данном случае, но конвертация векторных иконок в шрифты это по сути стандарт де-факто, я привел вам пример FontAwesome