search

shakee93 / vue-toasted

🖖 Responsive Touch Compatible Toast plugin for VueJS 2+
https://shakee93.github.io/vue-toasted/
MIT License
2.21k stars 194 forks source link

Support svg icon #106

Closed seekcx closed 5 years ago

seekcx commented 5 years ago

We use svg instead of the font icon directly in our project. Is there any plan support? I can come to implement it.

seekcx commented 5 years ago

107

shakee93 commented 5 years ago

you can have your own logic using the iconPack : 'callback'

Vue.toasted.show(
    'hello there, i am a toast !!', {
    iconPack: 'callback',
    // el is icon html element you can play with it
    icon: (el) => {
        el.innerText = '<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#000000" d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" /></svg>';
        return el;
    }
});
seekcx commented 5 years ago

sorry, I didn't expect this implementation.

HotspurHN commented 5 years ago

el.innerText will not work in that case. It should be el.innerHTML if you want to insert html, like that svg here.

Also that not works in actions 🤔