search

jpkleemans / vite-svg-loader

Vite plugin to load SVG files as Vue components
MIT License
555 stars 59 forks source link

Vite dev build works perfectly; production build does not load raw SVGs #54

Closed adamdehaven closed 1 year ago

adamdehaven commented 2 years ago

I have a Vue 2 + Vite project utilizing this plugin. 

import svgLoader from 'vite-svg-loader'
...
svgLoader({
  defaultImport: 'raw'
})

When I run vite (or yarn dev) everything works fine and all svg assets are properly rendered.

When I build for production, the assets are instead loaded as a url (I think?) and just the asset path is outputted into the DOM image

I can't seem to put together a decent reproduction, but I'm happy to provide more info or pair as needed.

Click to expand more info I also control the repository these icons are sourced from. That repository utilizes webpack and Vue 2, and includes a svg rule in the `chainWebpack` config like this: ```js svgRule.uses.clear() svgRule .oneOf('external') .resourceQuery(/external/) .use('url') .loader('url-loader') .options({ limit: 10000, name: 'img/[name].[hash:7].[ext]' }).end().end() .oneOf('normal') .use('raw') .loader('raw-loader') .end().end() ``` If you look above, this is where the asset URLs (with the hash) are being generated from; however, I can't figure out how to get around this.
jpkleemans commented 2 years ago

Hi, could you share some code of the component where you load your svg file?

adamdehaven commented 2 years ago

Here's an example: 

// I can't add `?raw` here since it's a native JS import
import chevronRight from './icn-chevron-right.svg'
adamdehaven commented 2 years ago

It's weird that everything works fine on a dev build, but not production build for certain components

jpkleemans commented 2 years ago

That's strange indeed. Have you tried adding ?raw? That should also work with native JS imports

adamdehaven commented 2 years ago

When I add ?raw to the JS imports/exports, I get an error from the build that it can't find the modules, so that's not an option (they come from a separate package)

kingyue737 commented 1 year ago

Does this plugin support vue 2? https://github.com/jpkleemans/vite-svg-loader/issues/10

gkatsanos commented 1 year ago

When I add ?raw to the JS imports/exports, I get an error from the build that it can't find the modules, so that's not an option (they come from a separate package)

is this still an issue? you can import a file from a separate package if you reference the full name including the node_module namespace e.g. @organization/my-icons/clock.svg?raw