JS Frameworks

[timbomckay]

Does this work with a JS Framework such as React or Vue? Would the function needed to be called any time there's a change to the DOM?

[DmitriyKurto]

@timbomckay, work with Vue (tested in IE11)

[Ericky14]

@DmitriyKurto How and where do you call the function? Please explain, I'm not being able to use it.

[DmitriyKurto]

@Ericky14 I show you the part of code from my main.js

import Vue from 'vue' import App from './App.vue' import svg4everybody from 'svg4everybody'

Vue.component('app', App) svg4everybody() new Vue().$mount('#app')

[timbomckay]

That doesn't look like svg4everybody() is running in the vue instance, only when the main.js is loaded. When Vue changes the DOM with new content that has an SVG in the new content does this script need to run again?

@Ericky14 here's my Vue SPA solution: icon.vue

I need to update some documentation on it and change out some styling. If the user agent is IE it'll fetch the svg sprite using axios and place in the body with display:none and adjusts the <use href path accordingly via the computed property. THEME_URI is a variable I defined in my webpack configuration, just update the let url = variable to match the path to your sprite.

Add as global component to the Vue instance:

import icon from './elements/icon.vue'

Vue.component('icon', icon)

new Vue({
  el: '#main',
  render: (h) => h(Main),
});

Add icon in vue template:

<icon href="facebook"></icon>

[Ericky14]

Thanks for the replies.

[yellow1912]

My current solution is to re-run svg4everybody everytime I update the content. @jonathantneal I would like to limit the performance penalty by giving it a container to run (instead of running inside the whole document). I'm thinking of passing an optional container element to the options. Would that be okie?

[yellow1912]

Also, a minor refractor to run the svg4everybody on a specific element would be nice as well. I will do something about it and post some sample code here.

[wmcmurray]

I believe it can't work in a dynamic environment since the list of <use> tags never get updated after being initially fetched here :

https://github.com/jonathantneal/svg4everybody/blob/8bd711049ba3faefb8285ca70c63a67efc35636c/lib/svg4everybody.js#L135-L136

I would personally refetch those tags inside the loop already available (using a modulo to reduce the rate at which it refreshes them). This way no breaking/API changes would be introduced.