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: 8 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 (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-08-31T10:58:54.000Z (over 2 years ago)
- Last Synced: 2025-03-13T18:17:35.813Z (9 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: 83
- Watchers: 1
- Forks: 13
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-zh - Vue-SVG-ๅกซๆ - ็จไบ่ชๅฎไนsvgๆไปถ็Vue็ปไปถ๐๐จ (vue 2.x) . (UIๅฎ็จ็จๅบ / SVG)
- awesome-vue - vue-svg-filler โ 56 - Vue component for custom your svg file ๐ ๐จ (vue 2.x). (UI Utilities / SVG)
- awesome-vue - vue-svg-filler - Vue component for custom your svg file ๐ ๐จ (vue 2.x). (UI Utilities / SVG)
- awesome-vue - vue-svg-filler - Vue component for custom your svg file ๐ ๐จ (vue 2.x). (Components & Libraries / UI Utilities)
- awesome-vue - vue-svg-filler - Vue component for customize your svg file. (For Vue CLI 2) ` ๐ a year ago` (UI Utilities [๐](#readme))
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 โ๏ธ