Open
Description
Version
5.0.4
Reproduction link
Environment info
➜ broken-svgs git:(main) vue info
Environment Info:
System:
OS: macOS 12.2.1
CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
Binaries:
Node: 17.8.0 - ~/.nvm/versions/node/v17.8.0/bin/node
Yarn: 1.22.18 - /usr/local/bin/yarn
npm: 8.5.5 - ~/.nvm/versions/node/v17.8.0/bin/npm
Browsers:
Chrome: 99.0.4844.84
Edge: Not Found
Firefox: 95.0
Safari: 15.3
npmPackages:
@vue/babel-helper-vue-jsx-merge-props: 1.2.1
@vue/babel-helper-vue-transform-on: 1.0.2
@vue/babel-plugin-jsx: 1.1.1
@vue/babel-plugin-transform-vue-jsx: 1.2.1
@vue/babel-preset-app: 5.0.4
@vue/babel-preset-jsx: 1.2.4
@vue/babel-sugar-composition-api-inject-h: 1.2.1
@vue/babel-sugar-composition-api-render-instance: 1.2.4
@vue/babel-sugar-functional-vue: 1.2.2
@vue/babel-sugar-inject-h: 1.2.2
@vue/babel-sugar-v-model: 1.2.3
@vue/babel-sugar-v-on: 1.2.3
@vue/cli-overlay: 5.0.4
@vue/cli-plugin-babel: ~5.0.0 => 5.0.4
@vue/cli-plugin-eslint: ~5.0.0 => 5.0.4
@vue/cli-plugin-router: 5.0.4
@vue/cli-plugin-vuex: 5.0.4
@vue/cli-service: ~5.0.0 => 5.0.4
@vue/cli-shared-utils: 5.0.4
@vue/component-compiler-utils: 3.3.0
@vue/web-component-wrapper: 1.3.0
eslint-plugin-vue: ^8.0.3 => 8.5.0
svg-to-vue: 0.7.0
vue: ^2.6.14 => 2.6.14
vue-eslint-parser: 8.3.0
vue-hot-reload-api: 2.3.4
vue-loader: 17.0.0 (15.9.8)
vue-style-loader: 4.1.3
vue-svg-loader: ^0.16.0 => 0.16.0
vue-template-compiler: ^2.6.14 => 2.6.14
vue-template-es2015-compiler: 1.9.1
npmGlobalPackages:
@vue/cli: 5.0.4
Steps to reproduce
- Create a Vue 2 project
- Install vue-svg-loader, vue-template-compiler, file-loader
- Update webpack config like https://github.com/orbitalwitness/broken-svgs/blob/main/vue.config.js
- Start the app (npm-run-serve)
- Import icon as a component (inline)
import IconWord from './assets/icon-word.svg?inline'
- Try to render it as an image src (external)
<img src="./assets/icon-word.svg" />
What is expected?
Icons should be rendered.
What is actually happening?
None of the icons is rendered.
I suspect this is connected to Asset Modules in Webpack (https://webpack.js.org/guides/asset-modules/).
Currently, we have both inline and external SVGs in our project but it doesn't seem to work after the Vue CLI upgrade.
Metadata
Metadata
Assignees
Labels
No labels