vue-svg-layer

A container displaying SVGs as masks in layers with dynamic colors and style binding. Because it is always an hard task to deal with SVG, you know that.

[ demo here ]

Installation

First install the package

npm install --save vue-svg-layer

Then import it and use it

import VueSvgLayer from 'vue-svg-layer'

<template>
	<vue-svg-layer :paths="paths" />
</template>

<script>
export  default {
  name: 'app',
  components: {
    VueSvgLayer
  },
  data: () => ({
    paths: [
      { 'link': '', 'style': { 'zIndex': 0, 'backgroundColor': '#EB8F5E' } },
      { 'link': require('./assets/backgroundSVG/sky2.svg'), 'style': { 'zIndex': 0, 'backgroundColor': '#E5B395' } },
      { 'link': require('./assets/backgroundSVG/sun.svg'), 'style': { 'zIndex': 8, 'maskRepeat': 'no-repeat', 'maskSize': 'auto 90%', 'backgroundColor': '#FBEFBF' } },
      { 'link': require('./assets/backgroundSVG/sky1.svg'), 'style': { 'zIndex': 0, 'backgroundColor': '#B1766F' } },
      { 'link': require('./assets/backgroundSVG/horizon.svg'), 'style': { 'zIndex': 0, 'backgroundColor': '#6EB3B6' } },
      { 'link': require('./assets/backgroundSVG/city2.svg'), 'style': { 'zIndex': 0, 'backgroundColor': '#3F6E77' } },
      { 'link': require('./assets/backgroundSVG/city1.svg'), 'style': { 'zIndex': 0, 'backgroundColor': '#242A37' } }
    ]
  })
}
</script>

Usage

Props:

prop	type	default	description
paths	Array [Object]	[{ link: 'assets/...', style: {} }]	all paths links with their style
defaultColor	String	'transparent'	default color for background or 'unique svg' usage

(paths is required)

You can provide different types for paths, see valid exemple of usage :

data: () => ({
  paths: './assets/backgroundSVG/sky2.svg', // link for 'unique svg' usage
  paths: ['./assets/backgroundSVG/sky2.svg', '#000000'], // link, fillColor
  paths: ['./assets/backgroundSVG/sky2.svg', { backgroundColor: '#000000', ... }], // link, style object
})