How to add vite plugin?

[iodum]

I want to import SVG as a component and use vite-svg-loader plugin for this in Vite+Vue3. It works correctly
But when I try to add this plugin to vuepress config like

module.exports = {
  bundler: '@vuepress/vite',
  bundlerConfig: {
    viteOptions: {
      plugins: [svgLoader()]
    }
  },
  ...

I get error
Failed to execute 'createElement' on 'Document': The tag name provided ('...svg') is not a valid name..

How can I use the plugin with Vuepress or is there another way to solve the SVG problem?

[meteorlxy]

I should work. Please provide a reproduce repo.

[iodum]

https://github.com/iodum/vuepress-vite

[meteorlxy]

Should be an issue of vite-svg-loader because it does not provide a default export.

We didn't enable esModuleInterop when transforming ts code.

Use following snippet instead:

// .vuepress/config.js
const svgLoader = require('vite-svg-loader')

module.exports = {
  bundler: '@vuepress/vite',
  bundlerConfig: {
    viteOptions: {
      plugins: [svgLoader()]
    }
  },
  ...

[iodum]

THis snippet doesn't work too. Ok, I'll try to find another svg plugin

[plexus77]

You can achieve what you want by doing the following:

import svgTest from './../public/icons/test.svg?raw'

No loader needed! Output it using v-html

[ptandler]

I got a suggestion from @Mister-Hope that helped me:
#795 (comment)