1.0.6 ā¢ Published 6 years ago
vue-svg-filler v1.0.6
Vue SVG Filler š šØ
Vue component for customize your svg file.
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 !
- Your
svg
file must only contain in/static
directory path
must be full 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
<svg-filler path="static/github.svg"/>
Customize fill & size
<svg-filler path="static/icon/bitcoin.svg" fill="#FF9900" width="50px" height="50px"/>
Fill & stroke
<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
<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
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
- Fork this repository.
- Create new branch with feature name.
- Run
npm install
andnpm run dev
. - Create your feature.
- Commit and set commit message with feature name.
- Push your code to your fork repository.
- Create pull request. š
Support
If you like this project, You can support me with starring ā this repository.
License
Developed with ā¤ļø and āļø
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
0.9.9
6 years ago
0.1.0
6 years ago
0.0.17
6 years ago
0.0.16
6 years ago
0.0.15
6 years ago
0.0.14
6 years ago
0.0.13
6 years ago
0.0.12
6 years ago
0.0.11
6 years ago
0.0.10
6 years ago
0.0.9
6 years ago
0.0.8
6 years ago
0.0.7
6 years ago
0.0.6
6 years ago
0.0.5
6 years ago
0.0.4
6 years ago
0.0.3
6 years ago
0.0.2
6 years ago
0.0.1
6 years ago
1.0.0
6 years ago