Simple SVG Manipulation Library For Vue.js

Simple SVG Manipulation Library For Vue.js

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.

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-svg

Usage:

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:

result

To run demo in your local environment,

$ npm run dev-demo

You 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

Github Repository

Tags: #Vue.js