Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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 6 years ago)
- Default Branch: master
- Last Pushed: 2023-08-31T10:58:54.000Z (about 1 year ago)
- Last Synced: 2024-07-02T08:06:21.034Z (2 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: 12
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - biigpongsatorn/vue-svg-filler - 🎨 Vue component for customize your svg file. (For Vue CLI 2) (JavaScript)
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 ☕️