Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

vue-simple-svg

1.3.2 • Public • Published

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:

install

npm i vue-simple-svg

Downloadsweekly downloads

650

version

1.3.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability