Some svg are not loaded

[viniazvd]

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 }
})

[pakholeung37]

It seems it's not a vite plugin bug more like a vue feature. I simply placed the svg in <template> and I got this. Seems vue don't compile it

[viniazvd]

looks like the style tag is not parsed... could it be svg's fault?

any idea how to solve this?

[viniazvd]

i tested it with vue/cli + vue-svg-loader and the template is still not able to interpret the style within the svg, reproducing the same error.

but loading an svg file, and it loaded normal =(

the problem is that some svg files are loaded, and others are not (like in the example in my first message)

[pakholeung37]

Just delete the style tag in template. If you real want to style this svg, move it in style scope in .vue file