Skip to content

A simple Vue.js plugin that allows you to load a SVG image as an inline SVG with an access to change its fill colors

License

Notifications You must be signed in to change notification settings

seiyable/vue-simple-svg

Repository files navigation

vue-simple-svg (V2)

A simple Vue.js plugin that allows you to use a component that dynamically loads a .svg file as an inline SVG so you can easily control its style programmatically. No jQuery required.

I recommend using vue-svg-loader for many cases when you just need to load a SVG file as a component. This plugin is built to cover some other cases the library doesn't fit, which are:

  • loading a SVG file dynamically. You don't have to hardcode the filename in the source code. Instead you can specify it at rendering time or change it even after the component is rendered.
  • changing fill color or stroke color of the SVG programmatically with ease and no global css usage.

Installation:

$ npm install vue-simple-svg

Usage:

  1. initialize in your 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)
  1. specify which elements in the SVG will be manipulated their fill and stroke colors by setting dedicated class names to them
<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <path class="fill-to-change" d="XXXXX XXXXX XXXXX" />
    <path class="stroke-to-change" d="XXXXX XXXXX XXXXX" />
  </g>
</svg>
  1. and use it in your component,
<simple-svg
  :src="svgSrc"
  fill-class-name="fill-to-change"
  :fill="svgFillColor"
  stroke-class-name="stroke-to-change"
  :stroke="svgFillColor"
  width="100%"
  height="100%"
  custom-id="my-id"
  custom-class-name="my-class"
  @load="svgLoaded()"
/>

Available props and events:

props type description default
src string path to your SVG file *required
fillClassName string class name set to the elements in your SVG file whose fill color you want to change ''
fill string CSS-valid fill color value ''
strokeClassName string class name set to the elements in your SVG file whose stroke color you want to change ''
stroke string CSS-valid stroke color value ''
width string root SVG element's style width 'auto'
height string root SVG element's style height 'auto'
customId string root SVG element's id ''
customClassName string root SVG element's class ''
events description
@load called when the inline SVG is generated

Notes:

  • To generate the inline SVG properly, you need to manually clean up and edit your SVG files beforehand. Tips: remove all hardcoded inline styles and unnecessary attributes, especially the ones specifying colors.

Demo:

result

To run demo in your local environment,

$ npm run dev-demo

You can see the example of how to use simple-svg component at demo/components/SvgButton.vue

Reference:

About

A simple Vue.js plugin that allows you to load a SVG image as an inline SVG with an access to change its fill colors

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published