Как выводить спрайт svg в зависимости от data элемента на странице?

Никита Кит, что-то ничего не выводится:

https://jsfiddle.net/Genri_Rus/nwtzge3p/

Как выводить спрайт svg в зависимости от data элемента на странице?

Никита Кит, да хотелось бы )

Просто руки никак не доходят до gulp и webpack

Как выводить спрайт svg в зависимости от data элемента на странице?

Никита Кит, муторное это дело

Никогда не использовал вебпак, всегда в ручную вставлял

Как svg sprite подружить с sass переменными?

Рустам Байназаров, в ie кстати работать не будет

Как выводить спрайт svg в зависимости от data элемента на странице?

Никита Кит, т.е. сейчас будет работать в таком ключе ?

var icon = [
        {'menu-icon' : "<svg viewBox=\"0 0 42 42\">\
        <circle cx=\"20\" cy=\"20\" r=\"19\" stroke=\"white\" stroke-width=\"2\"/>\
        <g class=\"change-color\">\
            <circle cx=\"19.5\" cy=\"10.5\" r=\"2.5\" fill=\"currentColor\"/>\
            <circle cx=\"19.5\" cy=\"19.5\" r=\"2.5\" fill=\"currentColor\"/>\
            <circle cx=\"19.5\" cy=\"28.5\" r=\"2.5\" fill=\"currentColor\"/>\
        </g>\
<\/svg>"}
]

Как svg sprite подружить с sass переменными?

Рустам Байназаров, ну все работает

<div class="icon" data-icon="menu-icon"></div>
<div class="icon" data-icon="footer-icon"></div>

Как выводить спрайт svg в зависимости от data элемента на странице?

Никита Кит, спасти как раз таки ситуацию можно с помощью js

Sprite.js (в моем примере), который выше нужно дописать

Как выводить спрайт svg в зависимости от data элемента на странице?

Никита Кит, вот так не работает:

https://jsfiddle.net/Genri_Rus/zj0cg2x3/

Как выводить спрайт svg в зависимости от data элемента на странице?

Спасибо за ответ, но у меня сложные svg фигуры

Допустим я не смогу залить 2 круга одновременно разными цветами при hover наведении

Как svg sprite подружить с sass переменными?

Рустам Байназаров, ну так добавить в объект js svg и все ищется по data атрибутам из DOM

Допустим если:

<div class="icon" data-icon="menu-icon"></div>, то туда и добавится иконка

Как svg sprite подружить с sass переменными?

Рустам Байназаров, я правильно понял ?

Как svg sprite подружить с sass переменными?

Рустам Байназаров, так что ле ?

https://codepen.io/Genri_Rus/pen/eYOxjwo

Как svg sprite подружить с sass переменными?

Рустам Байназаров, а есть что-то похожее из готового варианта ?

Как svg sprite подружить с sass переменными?

Рустам Байназаров, ну потом цикл foreach и искать в DOM дереве data-icon?

Как svg sprite подружить с sass переменными?

Рустам Байназаров, типа так ?

var icon = [
{
menu-icon: "<circle cx=\"20\" cy=\"20\" r=\"19\" stroke=\"white\" stroke-width=\"2\" class=\"icon-big\"/>\
            <circle cx=\"19.5\" cy=\"10.5\" r=\"2.5\" class=\"icon-small\"/>\
            <circle cx=\"19.5\" cy=\"19.5\" r=\"2.5\" class=\"icon-small\"/>\
            <circle cx=\"19.5\" cy=\"28.5\" r=\"2.5\" class=\"icon-small\"/>"
},
и т.д.
];

Как svg sprite подружить с sass переменными?

Рустам Байназаров, вы имели ввиду сделать что-то типа такого ?

https://jsfiddle.net/Genri_Rus/8cfeuw4z/

Но у меня не выводится по data-id

Как сделать непрозрачность для сложных svg фигур?

Рустам Байназаров, короче я извиняюсь

Я немного другой эффект хотел видеть, но это больше вопросы к свойству transparent, а не к коду svg и всем ньюнсам его подключения в целом

P.S. В той теме вы мне очень сильно помогли, спасибо

Как сделать непрозрачность для сложных svg фигур?

Рустам Байназаров, мне нужно было transparent

В той теме мы говорили про svg спрайты, т.е. ваш вариант улучшает их вывод, там немного другая история )

Как svg sprite подружить с sass переменными?

Рустам Байназаров, спасибо Вам большое

Буду разбираться

Как svg sprite подружить с sass переменными?

Рустам Байназаров, мне нужен svg спрайт

В вашем примере вы просто вставляете файл иконки

А если мне в будущем нужно будет больше иконок ?

Придется дублировать ?

var iconOne = "<circle cx=\"20\" cy=\"20\" r=\"19\" stroke=\"white\" stroke-width=\"2\" class=\"icon-big\"/>\
            <circle cx=\"19.5\" cy=\"10.5\" r=\"2.5\" class=\"icon-small\"/>\
            <circle cx=\"19.5\" cy=\"19.5\" r=\"2.5\" class=\"icon-small\"/>\
            <circle cx=\"19.5\" cy=\"28.5\" r=\"2.5\" class=\"icon-small\"/>"; 

document.getElementById('svg-icon-one').innerHTML = iconOne;

var iconTwo = "<circle cx=\"20\" cy=\"20\" r=\"19\" stroke=\"white\" stroke-width=\"2\" class=\"icon-big\"/>\
            <circle cx=\"19.5\" cy=\"10.5\" r=\"2.5\" class=\"icon-small\"/>\
            <circle cx=\"19.5\" cy=\"19.5\" r=\"2.5\" class=\"icon-small\"/>\
            <circle cx=\"19.5\" cy=\"28.5\" r=\"2.5\" class=\"icon-small\"/>"; 

document.getElementById('svg-icon-two').innerHTML = iconTwo;