Why

Provide a more efficient and convenient way to use svg in vite projects.

How

Install

npm install -D @qigy/vite-plugin-svg

Usage

import svgPlugin from '@qigy/vite-plugin-svg';

export default defineConfig({
  plugins: [
    svgPlugin(options)
  ]
})

Options

• input
  • Required
  • The path where the SVG file is located
• output
  • Required
  • The path where the generated components are stored
• format
  • Optional
  • Custom component generation logic. Accepts two parameters, code and compsName, and must return the component content

Example

Base

import svgPlugin from '@qigy/vite-plugin-svg';

export default defineConfig({
  plugins: [
    svgPlugin({
      input: 'assets/svg',
      input: 'components/svg',
    })
  ]
})

Advanced

import svgPlugin from '@qigy/vite-plugin-svg';

const format = (code, compsName) => {
  return `
  <template>
  ${code}
  </template>
  <script lang="ts" setup>
  defineOptions({ name: '${compsName}' });
  </script>`
}

export default defineConfig({
  plugins: [
    svgPlugin({
      input: 'assets/svg',
      input: 'components/svg',
      format
    })
  ]
})