1.0.0 • Published 4 years ago
@sumcoding/svgtojs v1.0.0
svg-to-js-cli
A simple cli for converting svgs into a javascript object
Install
npm install svg-to-js-cli
or
yarn add svg-to-js-cli
Usage
$ svgtojs [source] [destination]
Creates a javascript object:
icons/index.js
export const icons = {
[name of icon in camelCase]: {
height: [viewBox height],
width: [viewBox width],
viewBox: [viewBox],
path: [everything between the svg tag]
}
}
Example vue component
<template>
<svg v-if="icon" :viewBox="viewBox" v-html="icon.path" :style="{ width, height }" />
</template>
<script>
import icons from '@/icons';
export default {
name: 'Icon',
props: {
name: String,
width: {
type: Number,
default: 24
},
height: {
type: Number,
default: 24
}
},
computed: {
icon() {
return icons[name];
},
viewBox() {
return `0 0 ${this.width} ${this.height}`;
},
width() {
return `${this.width}px`;
},
height() {
return `${this.height}px`;
}
},
}
</script>
<style scoped>
svg path {
fill: blue;
}
</style>
1.0.0
4 years ago