Home

Awesome

ā›”ļø DEPRECATED <no-maintenance-intended> This repo has not been maintained

<p> <a href="https://npmjs.com/package/vue-svg-filler"><img src="https://img.shields.io/npm/v/vue-svg-filler.svg?style=flat" alt="NPM version"></a> <a href="https://npmjs.com/package/vue-svg-filler"><img src="https://img.shields.io/npm/dm/vue-svg-filler.svg?style=flat" alt="NPM downloads"></a> <a href="https://www.npmjs.com/package/vue-svg-filler"><img src="https://img.shields.io/npm/l/vue-svg-filler.svg?style=flat" alt="License"></a> <a href="https://www.npmjs.com/package/vue-svg-filler"><img src="https://travis-ci.org/biigpongsatorn/biigpongsatorn.github.io.svg?branch=dev" alt="Build Status"></a> </p>

Vue SVG Filler šŸ– šŸŽØ

Vue component for customize your svg file.

Demo Page

Documentation & Demo Page

Install

npm install vue-svg-filler --save

or

yarn add vue-svg-filler

Usage

import SvgFiller from 'vue-svg-filler'

Vue.component('svg-filler', SvgFiller)

šŸšØ Please note that !

  1. Your svg file must only contain in /static directory
  2. The path must be a relative path e.g. static/icon.svg or /static/icon/file.svg , Can't use ../ or ./
<svg-filler path="static/PATH/OF/YOUR/FILE.svg"/>

Example directory structure

my-project
ā”œā”€ā”€ ...
ā”‚
ā”œā”€ā”€ src
ā”œā”€ā”€ static
ā”‚   ā”œā”€ā”€ icon
ā”‚   ā”‚    ā””ā”€ā”€ bitcoin.svg
ā”‚   ā”‚    ā””ā”€ā”€ palette.svg
ā”‚   ā”‚    ā””ā”€ā”€ frog.svg
ā”‚   ā”œā”€ā”€ github.svg
ā”‚   ā””ā”€ā”€ vuejs.svg
ā”‚
ā””ā”€ā”€ ...

Example

Simple usage

<img src="https://raw.githubusercontent.com/biigpongsatorn/vue-svg-filler/HEAD/static/example/ex1.png"/> 
<svg-filler path="static/github.svg"/>

Customize fill & size

<img src="https://raw.githubusercontent.com/biigpongsatorn/vue-svg-filler/HEAD/static/example/ex2.png"/> 
<svg-filler path="static/icon/bitcoin.svg" fill="#FF9900" width="50px" height="50px"/>

Fill & stroke

<img src="https://raw.githubusercontent.com/biigpongsatorn/vue-svg-filler/HEAD/static/example/ex3.png"/> 
<template>
  <div>
    <svg-filler path="/static/vue-svg-filler/icon/palette.svg" class="cs-pointer" :fill="svgPalette.color" :width="svgPalette.width" :height="svgPalette.height" @click="svgPalette.color = randomColor()"/>

    <svg-filler path="/static/vue-svg-filler/icon/palette.svg" class="cs-pointer" :stroke="svgPalette.color" fill="none" :width="svgPalette.width" :height="svgPalette.height" @click="svgPalette.color = randomColor()"/>
  </div>
</template>

<script>
export default {
  data () {
    return {
      svgPalette: {
        color: this.randomColor(),
        width: '150px',
        height: '150px'
      }
    }
  },
  methods: {
    randomColor () {
      let length = 6
      let chars = '0123456789ABCDEF'
      let hex = '#'
      while (length--) hex += chars[(Math.random() * 16) | 0]
      return hex
    }
  }
}
</script>

Hover

<img src="https://raw.githubusercontent.com/biigpongsatorn/vue-svg-filler/HEAD/static/example/ex4.png"/> 
<template>
  <div>
    <svg-filler path="/static/vuejs.svg" fill="#42b883" width="150px" height="150px":hover-color="#35495e"/>
    <div>Hover me !</div>
  </div>
</template>

Options

Props

PropsTypeDefaultDescription
pathString-Path of your svg file in /static
widthString24pxWidth
heightString24pxHeight
fillString#000Fill color
hover-colorString-Fill color when hover icon
strokeStringnoneStroke color
hover-stroke-colorString-Stroke color when hover icon

Events

NameTypeDefaultDescription
clickFunction-Triggers when click
[any].nativeevent: $event-Listen to any native event, e.g. mouseover.native

Contributing

  1. Fork this repository.
  2. Create new branch with feature name.
  3. Run npm install and npm run dev.
  4. Create your feature.
  5. Commit and set commit message with feature name.
  6. Push your code to your fork repository.
  7. Create pull request. šŸ™‚

Support

If you like this project, You can support me with starring ā­ this repository.

License

MIT

Developed with ā¤ļø and ā˜•ļø