Newman's Personal Motorcade

    vue-svg-layer

    0.2.0 • Public • Published

    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 ]

    Example

    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
    })

    Install

    npm i vue-svg-layer

    DownloadsWeekly Downloads

    4

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    98.4 kB

    Total Files

    19

    Last publish

    Collaborators

    • tbayet