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
Vue
🚨 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./
Example directory structure
my-project
├── ...
│
├── src
├── static
│ ├── icon
│ │ └── bitcoin.svg
│ │ └── palette.svg
│ │ └── frog.svg
│ ├── github.svg
│ └── vuejs.svg
│
└── ...
Example
Simple usage
Customize fill & size
Fill & stroke
Hover
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
- 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 ☕️