pakholeung37 / vite-plugin-vue2-svg

load SVG files as Vue components, for Vue2.x only.

vite-plugin-vue2-svg

load SVG files as Vue components, for Vue2.x only.

Install

yarn add vite-plugin-vue2-svg
# or
npm install vite-plugin-vue2-svg

Usage

// vite.config.ts
import { defineConfig } from "vite";
import { createVuePlugin } from "vite-plugin-vue2"; // vue2 plugin
import { createSvgPlugin } from "vite-plugin-vue2-svg";

export default defineConfig({
  plugins: [createVuePlugin(), createSvgPlugin()],
});

<!-- App.vue -->
<template>
  <Icon />
</template>
<script>
import Icon from "./icon.svg";

export default {
  components: {
    Icon,
  },
};
</script>

If you want disabled this plugin for specific file, just add ?raw when you import.

import Icon from "./icon.svg?raw"; // svg file import without transform

Options

createSvgPlugin({
  svgoConfig: SVGO.Options, // check https://github.com/svg/svgo
});

License

MIT

vite-plugin-vue2-svg's Issues

not working with typescript

i install the plugin with vite3.2 ，vue2.7 ，typescript4.7 and config it with demo,

but when running, show the error:

failed to load config from /xxxxx/vite.config.ts
error when starting dev server:
TypeError: (0 , import_vite_plugin_vue2_svg.default) is not a function

and IDEA show me an error reason:

TS2349: This expression is not callable.   Type 'typeof import("/xxx/node_modules/.pnpm/[email protected]_s72bufat24j4xi363kb5czieqe/node_modules/vite-plugin-vue2-svg/lib/index")' has no call signatures.

Some svg are not loaded

example of svg that is loaded:

<svg id="Layer_3" data-name="Layer 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <defs>
    <style>.cls-1{fill:none;stroke:#212121;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style>
  </defs>

  <g id="chevron-down">
    <polyline class="cls-1" points="15.5 5 8.5 12 15.5 19"/>
  </g>
</svg>

example of svg not loading:

<svg id="Layer_3" data-name="Layer 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <defs>
    <style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style>
  </defs>

  <line class="cls-1" x1="12" y1="2" x2="12" y2="22"/>
  <path class="cls-1" d="M16.55,5.64H9.73a3.18,3.18,0,0,0,0,6.36h4.54a3.18,3.18,0,0,1,0,6.36H6.55"/>
</svg>

vite.config.js

import path from 'path'
import { defineConfig } from 'vite'
import GlobPlugin from 'vite-plugin-glob'
import { createVuePlugin } from 'vite-plugin-vue2'
import { createSvgPlugin } from 'vite-plugin-vue2-svg'

export default defineConfig({
  base: '***',

  root: path.join(__dirname, '/'),

  build: {
    outDir: path.join(__dirname, 'docs')
  },

  optimizeDeps: {
    exclude: ['vue-demi']
  },

  plugins: [
    GlobPlugin(),
    createVuePlugin(),
    createSvgPlugin()
  ],

  server: { port: 8080 }
})

[Feature Request] Bump SVGO to version 2

SVGO v1 is deprecated. Is it possible to support SVGO 2?

fix vue-template-compiler < 2.7

Hi, @pakholeung37
As we know, vue 2.7 which enables developers use composition API in vue2 directly was released last week.
and vue-template-compiler 2.7 was released at the same time.

vue-template-compiler wasn't needed in 2.7 any longer

However, project using @vue/composition-api is incompatible with vue 2.7+, so we need vue< 2.7 and vue-template-compiler < 2.7 as well.
Could you please modify the vue-template-compiler version from '^2.6.0' to '~2.6.0'. Otherwise, vue-template-compiler 2.7 would be installed and the warning that vue and vue-template-compiler are mismatch would appear: (

Cheers : )

Add event listeners

The webpack svg loader vue-svg-loader allows event handling on svgs in templates like this:

<MySVG @click="myClickEvent" @mouseover="myMouseoverEvent" />

I think it works through this line:

svg = svg.replace('<svg', '<svg v-on="$listeners"');

Could this loader add the same feature?

Vite 3 support

添加import为url方式

和vite-svg-loader 保持一致
https://github.com/jpkleemans/vite-svg-loader#url

import iconUrl from './my-icon.svg?url'
// '/assets/my-icon.2d8efhg.svg'

Any way to disable svgo by default?

LIke the title says. I would like to have the option to import svgs but without a svgo config (I like to tweak my svg's by hand)