https://github.com/multipliedtwice/svgtovue-cli
Small Node.JS library based on SVGO for creating svg-icon components for Vue.JS + vIcon.vue component.
https://github.com/multipliedtwice/svgtovue-cli
icon-management svg svg-files svg-icons svg-sprites svgtovue vue
Last synced: 3 months ago
JSON representation
Small Node.JS library based on SVGO for creating svg-icon components for Vue.JS + vIcon.vue component.
- Host: GitHub
- URL: https://github.com/multipliedtwice/svgtovue-cli
- Owner: multipliedtwice
- License: mit
- Created: 2019-03-13T11:59:44.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-05-08T07:48:09.000Z (about 4 years ago)
- Last Synced: 2025-03-08T04:45:16.436Z (3 months ago)
- Topics: icon-management, svg, svg-files, svg-icons, svg-sprites, svgtovue, vue
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/svgtovue-cli
- Size: 50.8 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# svgtovue-cli
Change language: [RU](https://github.com/thousandsofraccoons/svgtovue-cli/blob/master/readme.ru.md)
----
Small Node.JS library based on SVGO for converting svg to vue templates. + BaseIcon.vue component.
----
## About
:mag: icons will be added to components automatically (no need to import it)
:v: SSR & Nuxt ready
:lock: no ```v-html``` used
:boom: 834 bytes Gzipped
:hocho: automatic optimization of SVG
:performing_arts: fully customizable template
:wink: viewbox will be added automatically
:innocent: WAI-ARIA ready
## Demo
[CodeSandBox](https://codesandbox.io/s/40xr5nv8w7)
```bash
# Global installation
npm i svgtovue-cli -g
```
## CLI Usage
Just execute ```v-svg ./path/to/svg```. Your vue svg templates will appear at ```./path/to/templates/```.
Click here to see expected output for svg files.
export default {
data() {
return {
viewbox: "0 0 20 20"
};
},
mounted() {
this.$emit("onMounted", this.viewbox);
}
}
### Usage in Vue
#### The easiest way to use results produced by this plugin is following component. Just copy and paste it, then add globally in main.js.
##### ./components/BaseIcon.vue
Click here to expand. Just create file ./components/BaseIcon.vue with following content:
{{ title }}
{{desc}}
export default {
name: 'v-icon',
data() {
return {
component: () => (
/* specify path to generated templates here */
import(`./templates/${this.it}.vue`)
.then(template => template)),
viewbox: '0 0 20 20',
};
},
props: {
it: {
type: String,
default: 'default',
},
desc: {
type: String,
},
role: {
type: String,
default: 'img',
},
tabindex: {
type: [Number, String],
default: 0,
},
title: {
type: String,
default: '',
},
iconStyle: {
type: String,
default: '',
},
width: {
type: [Number, String],
default: 24,
},
height: {
type: [Number, String],
default: 24,
},
color: {
type: [String],
default: '#333',
},
},
methods: {
getViewbox(viewbox) {
this.viewbox = viewbox;
},
},
};
##### main.js
import BaseIcon from './components/BaseIcon.vue'
Vue.component("v-icon", BaseIcon);
##### Why copy&paste? :rage:
Unfortunately I haven't found any appropriate way to pack it as npm plugin because ```() => import()``` currently doesn't allow to use fully dynamic paths. Any advice would be greatly appreciated.
## Usage of v-icon
Default size is 24 x 24.
``it`` parameter should be same as name of *.vue template file, generated by plugin
```html
```
Of course, component can be used as
```html
```
## TODO
- GUI
- v-icon component generator