A dynamic inline SVG injection component for vue using SVGInjector
# with npm
npm install svginjector-vue
# or ...
# with yarn
yarn add svginjector-vue
You can easily register SVGInjector plugin in your app entry point:
import Vue from 'vue'
import SVGInjectorVue from 'svginjector-vue'
Vue.use(SVGInjectorVue)
If you're using nuxt you can include it as module.
modules: [
'svginjector-vue/nuxt',
// or without ssr
['svginjector-vue/nuxt', { ssr:false }]
]
<svg-injector :class-name="'js-svg-injector'" :src="require('~/assets/svg/reports.svg')"></svg-injector>
You can also use SVGInjector as plugin instead of a module
// nuxt.config.js (nuxt.js)
plugins: [
'~/plugins/svginjector.js'
]
// plugins/svginjector.js
import Vue from 'vue'
import SVGInjectorVue from 'svginjector-vue'
Vue.use(SVGInjectorVue)
You can use this plugin also without Server side rendering. But it's not recommend. Just put tag around it
<no-ssr>
<svg-injector :class-name="'js-svg-injector'" :src="require('~/assets/svg/reports.svg')"></svg-injector>
</no-ssr>
- Make this plugin more flexible with additional props (if necessary)
- 1.0.1 SSR is working
- 1.0.0 Working version