svgtovue-cli

Change language: RU

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

# 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/.

<template>
    <g>
        <path d="M14.86 8.52A2.68 2.68 0 1 0 13 7.74a2.65 2.65 0 0 0 1.86.78zm-1-3.66a1.38 1.38 0 1 1 0 1.95 1.4 1.4 0 0 1-.39-1 1.44 1.44 0 0 1 .39-.95z"/>
        <path d="M18.42 0H1.58A1.58 1.58 0 0 0 0 1.58v16.84A1.58 1.58 0 0 0 1.58 20h16.84A1.58 1.58 0 0 0 20 18.42V1.58A1.58 1.58 0 0 0 18.42 0zm.32 18.44a.22.22 0 0 1-.22.22H1.58a.21.21 0 0 1-.22-.22V16H4.9a6.21 6.21 0 0 0 1.86-.32 6 6 0 0 0 1.68-.88l4.24-3.26a1.19 1.19 0 0 1 1.32 0l4.76 3.6zM7.66 13.8a4.47 4.47 0 0 1-1.32.68 4.82 4.82 0 0 1-1.46.26H1.26v-.22l.26-.24L6 10a1.19 1.19 0 0 1 1.58 0l2.22 2zM18.74 12v1.58l-4-3a2.34 2.34 0 0 0-1.42-.58 2.35 2.35 0 0 0-1.32.54l-1.12.86L8.4 9.18a2.43 2.43 0 0 0-3.3 0L1.26 12.8V1.58a.22.22 0 0 1 .22-.22h16.94a.22.22 0 0 1 .22.22z"/>
    </g>
</template>

<script>
export default {
    data() {
        return {
            viewbox: "0 0 20 20"
        };
    },
    mounted() {
        this.$emit("onMounted", this.viewbox);
        }
    }
</script>

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

<template>
<svg xmlns="http://www.w3.org/2000/svg"
  :height="height"
  :width="width"
  :viewBox="viewbox"
  :aria-labelledby="title"
  :aria-describedby="desc"
  :role="role"
  v-if="component">
    <title v-if="title">{{ title }}</title>
    <desc v-if="desc">{{desc}}</desc>

    <g :fill="color" :style="iconStyle" v-else>
        <component :is="component" @onMounted="getViewbox"></component>
    </g>

</svg>
</template>

<script>
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;
    },
  },
};
</script>

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

<v-icon it="arrow"/>

Of course, component can be used as

<vIcon
    @onClick="handleClick"
    it="star"
    color="#42b983"
    height="200"
    width="200">
</vIcon>

TODO

• GUI
• v-icon component generator