vue-simple-svg
A simple Vue.js plugin that allows you to use a component that loads a .svg image as an inline SVG so you can easily control its fill color from the parent component. No jQuery required.
Installation:
$ npm install vue-simple-svgUsage:
initialize in your Vue's main file,
// as a plugin import VueSimpleSVG from 'vue-simple-svg' Vue.use(VueSimpleSVG) // or as a component import {SimpleSVG} from 'vue-simple-svg' Vue.component('simple-svg', SimpleSVG)and use in your component,
<simple-svg :filepath="'/PATH_/TO_/YOUR_/FILE.svg'" :fill="getFillColor" :stroke="getStrokeColor" :width="'400px'" :height="'400px'" :id="'custom-id'" @ready="onSvgReady()" />Available props and events:
| props | type | description | default |
|---|---|---|---|
| filepath | string | path to your svg file | |
| fill | string | svg's fill color | 'black' |
| stroke | string | svg's stroke color | 'black' |
| width | string | svg's width | '1em' |
| height | string | svg's height | '1em' |
| id | string | custom color | '' |
| events | description |
|---|---|
| @ready | called when the svg is loaded |
Notes:
- inline svg element has a class '.simple-svg'
- inline svg has a div wrapper with a class '.simple-svg-wrapper'
- fill/stroke style set to a path of a SVG will be removed unless its value is 'none'
Demo:
To run demo in your local environment,
$ npm run dev-demoYou can find the code of an example component that has a simple-svg component as its child in demo/components/SvgButton.vue
Todo:
- enable applying various colors to multiple paths in an SVG
Reference:
- Loading a SVG with XMLHttpRequest and DOMParser https://github.com/jonnyhaynes/inline-svg
- Parsing inline svg tags https://github.com/MMF-FE/vue-svgicon
