https://github.com/biigpongsatorn/vue-svg-filler

🎨 Vue component for customize your svg file. (For Vue CLI 2)
https://github.com/biigpongsatorn/vue-svg-filler

change color component customization demo fill fill-color height plugin svg svg-files vue vue-components vue-svg-filler width

Last synced: 3 months ago
JSON representation

🎨 Vue component for customize your svg file. (For Vue CLI 2)

• Host: GitHub
• URL: https://github.com/biigpongsatorn/vue-svg-filler
• Owner: biigpongsatorn
• License: mit
• Archived: true
• Created: 2018-04-11T09:33:13.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-08-31T10:58:54.000Z (over 1 year ago)
• Last Synced: 2024-10-06T06:45:14.167Z (4 months ago)
• Topics: change, color, component, customization, demo, fill, fill-color, height, plugin, svg, svg-files, vue, vue-components, vue-svg-filler, width
• Language: JavaScript
• Homepage: https://biigpongsatorn.github.io/#/vue-svg-filler
• Size: 2.31 MB
• Stars: 84
• Watchers: 2
• Forks: 13
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ⛔️ DEPRECATED  This repo has not been maintained



  

  

  

  



# Vue SVG Filler 🖍 🎨 

Vue component for customize your svg file.

# Demo Page

[Documentation & Demo Page](https://biigpongsatorn.github.io/#/vue-svg-filler)

# Install

```sh

npm install vue-svg-filler --save

```

or

```sh

yarn add vue-svg-filler

```

# Usage

```javascript

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 `./`

```html

```

### Example directory structure

```

my-project

├── ...

│

├── src

├── static

│   ├── icon

│   │    └── bitcoin.svg

│   │    └── palette.svg

│   │    └── frog.svg

│   ├── github.svg

│   └── vuejs.svg

│

└── ...

```

# Example

## Simple usage



```html

```

## Customize fill & size



```html

```

## Fill & stroke



```html

  


    


    

  


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

    }

  }

}

```

## Hover



```html

  


    

    
Hover me !

  


```

# Options

## Props

| Props       | Type          | Default  | Description  |

| ----------- |:--------------| ---------|--------------|

| path         | String        | -        | Path of your svg file in `/static`  |

| width       | String        | 24px     | Width |

| height      | String        | 24px     | Height |

| fill        | String        | #000     | Fill color |

| hover-color        | String        | -     | Fill color when hover icon |

| stroke        | String        | none     | Stroke color |

| hover-stroke-color        | String        | -     | Stroke color when hover icon |

## Events

| Name          | Type          | Default  | Description  |

| --------------|:--------------|--------------|--------------|

| click        | Function       | -     | Triggers when click |

| [any].native | event: $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](LICENSE)

Developed with ❤️ and ☕️