You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The instruction example refers to svg-file-path/arrow.svg. However I did not find this file and added my own arrow.svg. The problem is that I am unable to get the svg to display.
Also I created the project with:
npm create vuetify@latest
this is my Login.vue
<script setup lang="ts">
//import arrowData from "./arrow.svg"
</script>
<template>
<div>
<!-- <icon :data="arrowData" /> -->
<!-- It is recommended to configure transformAssetUrls，. You can directly pass in the svg file path. -->
<icon data="./arrow.svg" width="190" height="190" />
</div>
</template>
this is my main.js:
/**
* main.js
*
* Bootstraps Vuetify and other plugins then mounts the App`
*/
import { VueSvgIconPlugin } from '@yzfe/vue-svgicon'
import '@yzfe/svgicon/lib/svgicon.css'
// Plugins
import { registerPlugins } from '@/plugins'
// Components
import App from './App.vue'
// Composables
import { createApp } from 'vue'
const app = createApp(App)
registerPlugins(app)
app.mount('#app')
app.use(VueSvgIconPlugin, {tagName: 'icon'})
I expect to see an icon or an error but I see neither error nor icon
Additionally if I change Login.vue in this way:
<script setup lang="ts">
import arrowData from "./arrow.svg"
</script>
<template>
<div>
< <icon :data="arrowData" />
<!-- It is recommended to configure transformAssetUrls，. You can directly pass in the svg file path.
<icon data="./arrow.svg" width="190" height="190" /> -->
</div>
</template>
At compilation time I get:
C:\Users\vis\Corso_vue\prova3\mybadge>npm run dev
> [email protected] dev
> vite
VITE v5.4.14 ready in 518 ms
➜ Local: http://localhost:3000/
➜ Network: use --host to expose
➜ press h + enter to show help
21:53:31 [vite] hmr update /src/views/session/Login.vue
21:53:31 [vite] Internal server error: Failed to resolve import "./arrow.svg" from "src/views/session/Login.vue". Does the file exist?
Plugin: vite:import-analysis
File: C:/Users/vis/Corso_vue/prova3/mybadge/src/views/session/Login.vue:2:22
1 | /* unplugin-vue-components disabled */import { defineComponent as _defineComponent } from "vue";
2 | import arrowData from "./arrow.svg";
| ^
3 | const _sfc_main = /* @__PURE__ */ _defineComponent({
4 | __name: "Login",
at TransformPluginContext._formatError (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:49257:41)
at TransformPluginContext.error (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:49252:16)
at normalizeUrl (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:64199:23)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:64331:39
at async Promise.all (index 1)
at async TransformPluginContext.transform (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:64258:7)
at async PluginContainer.transform (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:49098:18)
at async loadAndTransform (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:51931:27)
at async viteTransformMiddleware (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:62031:24)
and finally this is my vite.config.mjs (I do not know why extension is .mjs)
// Plugins
import Components from 'unplugin-vue-components/vite'
import Vue from '@vitejs/plugin-vue'
import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
import ViteFonts from 'unplugin-fonts/vite'
import VueRouter from 'unplugin-vue-router/vite'
// Utilities
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
VueRouter(),
Vue({
template: { transformAssetUrls }
}),
// https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
Vuetify({
autoImport: true,
styles: {
configFile: 'src/styles/settings.scss',
},
}),
Components(),
ViteFonts({
google: {
families: [{
name: 'Roboto',
styles: 'wght@100;300;400;500;700;900',
}],
},
}),
//svgicon({
// include: ['**/assets/svg/**/*.svg'],
// svgFilePath: path.join(__dirname, 'src/assets/svg'),
// // If you are using react, it is recommended to configure the component option for react and load the svg file as react components.
// component: 'react',
// }),
],
define: { 'process.env': {} },
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
extensions: [
'.js',
'.json',
'.jsx',
'.mjs',
'.ts',
'.tsx',
'.vue',
],
},
server: {
port: 3000,
},
css: {
preprocessorOptions: {
sass: {
api: 'modern-compiler',
},
},
},
})
It can be a bug on vite? in particular the second case, even if I'm sure that arrow.svg is there, it is unable to be load
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I followed the svgicon instructions here:
https://mmf-fe.github.io/svgicon/guide/#vue-3-x
The instruction example refers to svg-file-path/arrow.svg. However I did not find this file and added my own arrow.svg. The problem is that I am unable to get the svg to display.
Also I created the project with:
npm create vuetify@latestthis is my Login.vue
this is my main.js:
this is my arrow.svg:
But when I'm going to see the icon i see:
I expect to see an icon or an error but I see neither error nor icon
Additionally if I change Login.vue in this way:
At compilation time I get:
and finally this is my vite.config.mjs (I do not know why extension is .mjs)
It can be a bug on vite? in particular the second case, even if I'm sure that arrow.svg is there, it is unable to be load
Beta Was this translation helpful? Give feedback.
All reactions