Vue component for customize your svg file.
npm install vue-svg-filler --saveor
yarn add vue-svg-fillerimport SvgFiller from 'vue-svg-filler'
Vue.component('svg-filler', SvgFiller)- Your
svgfile must only contain in/staticdirectory - The
pathmust be a relative path e.g.static/icon.svgor/static/icon/file.svg, Can't use../or./
<svg-filler path="static/PATH/OF/YOUR/FILE.svg"/>my-project
├── ...
│
├── src
├── static
│ ├── icon
│ │ └── bitcoin.svg
│ │ └── palette.svg
│ │ └── frog.svg
│ ├── github.svg
│ └── vuejs.svg
│
└── ...
<svg-filler path="static/github.svg"/>
<svg-filler path="static/icon/bitcoin.svg" fill="#FF9900" width="50px" height="50px"/>
<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>
<template>
<div>
<svg-filler path="/static/vuejs.svg" fill="#42b883" width="150px" height="150px":hover-color="#35495e"/>
<div>Hover me !</div>
</div>
</template>| 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 |
| Name | Type | Default | Description |
|---|---|---|---|
| click | Function | - | Triggers when click |
| [any].native | event: $event | - | Listen to any native event, e.g. mouseover.native |
- Fork this repository.
- Create new branch with feature name.
- Run
npm installandnpm run dev. - Create your feature.
- Commit and set commit message with feature name.
- Push your code to your fork repository.
- Create pull request. 🙂
If you like this project, You can support me with starring ⭐ this repository.
Developed with ❤️ and ☕️