https://github.com/pakholeung37/vite-plugin-vue2-svg

load SVG files as Vue components, for Vue2.x only.
https://github.com/pakholeung37/vite-plugin-vue2-svg

svg vite vite-plugin vue

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/pakholeung37/vite-plugin-vue2-svg
• Owner: pakholeung37
• License: mit
• Created: 2021-03-01T16:14:44.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-11-04T06:13:37.000Z (11 months ago)
• Last Synced: 2024-04-19T01:34:08.097Z (5 months ago)
• Topics: svg, vite, vite-plugin, vue
• Language: TypeScript
• Homepage:
• Size: 327 KB
• Stars: 18
• Watchers: 1
• Forks: 8
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-vite - v2 - Load SVG files as Vue components. (Plugins / Vue)
• awesome-vite - v2 - Load SVG files as Vue components. (Plugins / Vue)

README

        
# vite-plugin-vue2-svg

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

[![NPM](https://nodei.co/npm/vite-plugin-vue2-svg.png)](https://npmjs.org/package/vite-plugin-vue2-svg/)

## Install

```bash

yarn add vite-plugin-vue2-svg

# or

npm install vite-plugin-vue2-svg

```

## Usage

```js

// 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()],

});

```

```vue

  

import Icon from "./icon.svg";

export default {

  components: {

    Icon,

  },

};

```

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

```typescript

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

```

## Options

```js

createSvgPlugin({

  svgoConfig: SVGO.Options, // check https://github.com/svg/svgo

});

```

## License

[MIT](LICENSE)