Why Is My SVG Icon Not Displaying in My Vue App Using vue-svgicon?

I followed the svgicon instructions from the guide:

https://mmf-fe.github.io/svgicon/guide/#vue-3-x

The guide’s example uses svg-file-path/arrow.svg, but I couldn’t find that file so I added my own arrow.svg. However, the SVG icon doesn’t display in the browser – I see neither an error nor the icon.

I created the project with:

BASHCopied
npm create vuetify@latest

This is my Login.vue:

VUECopied
<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:

JAVASCRIPTCopied
/**
 * 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'})

This is my arrow.svg:

XMLCopied
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<style type="text/css">
    .st0{display:none;fill:#191919;}
    .st1{display:none;fill-rule:evenodd;clip-rule:evenodd;fill:#191919;}
    .st2{display:none;}
    .st3{display:inline;fill-rule:evenodd;clip-rule:evenodd;fill:#191919;}
    .st4{display:inline;fill:#191919;}
    .st5{fill:#191919;}
</style>
<g id="row3">
    <path id="nav:5_3_" class="st0" d="M17.7,59.6c0,7.2,5.9,13,13.3,13c5.5,0,10.2-3.3,12.2-7.9l40.5,8.1c0,3.6,1.5,6.8,3.9,9.1
        l-13.9,21.6c-1.9-1-4.1-1.6-6.4-1.6c-7.3,0-13.3,5.8-13.3,13c0,7.2,5.9,13,13.3,13s13.3-5.9,13.3-13c0-2.9-0.9-5.5-2.5-7.7
        l14.4-22.3c1.4,0.5,2.9,0.8,4.5,0.8c7.3,0,13.3-5.8,13.3-13s-5.9-13-13.3-13c-5.4,0-10,3.2-12.1,7.7l-40.7-8.1
        c-0.1-4.1-2.1-7.7-5.2-10l10.1-23.5c1,0.2,2,0.4,3.1,0.4c7.3,0,13.3-5.8,13.3-13S59.5,0,52.2,0c-7.3,0-13.3,5.8-13.3,13
        c0,4.2,2,7.9,5.1,10.3L33.8,46.9c-0.9-0.2-1.9-0.3-2.8-0.3C23.7,46.6,17.7,52.4,17.7,59.6z M45.5,13c0-3.6,3-6.5,6.6-6.5
        c3.7,0,6.6,2.9,6.6,6.5s-3,6.5-6.6,6.5C48.5,19.6,45.5,16.6,45.5,13z M90.4,72.7c0-3.6,3-6.5,6.6-6.5c3.7,0,6.6,2.9,6.6,6.5
        s-3,6.5-6.6,6.5C93.3,79.2,90.4,76.3,90.4,72.7z M67.3,108.4c3.7,0,6.6,2.9,6.6,6.5c0,3.6-3,6.5-6.6,6.5c-3.7,0-6.6-2.9-6.6-6.5
        C60.7,111.3,63.7,108.4,67.3,108.4z M24.4,59.6c0-3.6,3-6.5,6.6-6.5c3.7,0,6.6,2.9,6.6,6.5c0,3.6-3,6.5-6.6,6.5
        C27.3,66.2,24.4,63.2,24.4,59.6z"/>
    <path id="nav:4_2_" class="st0" d="M68.6,46.6H58.3l-2.6,15.5h15.5L68.6,46.6z M110,66.5c-9.9,0-18,7.9-18,17.7
        c0,9.8,8,17.7,18,17.7c9.9,0,18-7.9,18-17.7C128,74.4,120,66.5,110,66.5z M110,89.2l-7.6,4.5l7.6-20.9l7.6,20.9L110,89.2z
         M108.2,61.6c-1.7,0.1-3.3,0.4-4.8,0.9L92.1,30.8H67.4l1.7,10H57.8l1.7-10H38.6L8.3,90.4h44l3.4-20.3h15.6l3.4,20.3H88
        c0.5,1.6,1.1,3.2,1.9,4.6H0l36-68.8h58.9L108.2,61.6z"/>
    <path id="nav:3_4_" class="st1" d="M128,64L90.3,50.3l10.5-22.5L77.9,38.1L64,1L50,38.1L27.2,27.8l10.5,22.5L0,64l37.7,13.7
        l-10.5,22.5L50,89.9L64,127l14-37.1l22.8,10.3L90.3,77.7L128,64z M11,64.2l29.1-8.7l5.7-1.7l15.1,10.4H11z M64,115.5l-8.7-28
        l-1.9-6.2L64,66.5V115.5z M64,12.5l8.7,28l1.9,6.2L64,61.6V12.5z M82.2,74.3L67.2,63.9H117l-29.1,8.7L82.2,74.3z"/>
    <path id="nav:2_1_" class="st1" d="M110.5,12.7c-9.7,0-17.5,7.7-17.5,17.1c0,4.2,5.2,13.1,5.2,13.1l8.8,14.5
        c-13.2,0.8-33.4,7.5-34,28.9c-0.1,4.9-2,8.9-5.7,12.3c-10.5,9.7-32.5,10.9-40.6,11l12.5-21.8c0,0,8-12.1,8-17.7
        c0-12.8-10.6-23.2-23.7-23.2C10.6,46.9,0,57.3,0,70.1c0,5.7,7.1,17.7,7.1,17.7L23.6,115l0,0.3c0.2,0,1,0,2.4,0
        c7.9,0,32.8-1,45.3-12.5c4.8-4.4,7.3-9.9,7.5-16.3c0.6-23.2,29.1-23.6,31.7-23.5h0.1l0.1-0.1l11.5-20c0,0,5.9-8.9,5.9-13.1
        C128,20.4,120.2,12.7,110.5,12.7z M23.7,82c-7.7,0-14-6.1-14-13.6c0-7.5,6.3-13.7,14-13.7c7.7,0,14,6.1,14,13.7
        C37.7,75.9,31.4,82,23.7,82z M110.5,38.6c-5.7,0-10.3-4.5-10.3-10.1c0-5.6,4.6-10.1,10.3-10.1c5.7,0,10.3,4.5,10.3,10.1
        C120.8,34.1,116.2,38.6,110.5,38.6z"/>
    <path id="nav:1_3_" class="st0" d="M0,86.7c0.6,10.1,4.7,20,12.6,27.8c7.9,7.8,17.9,11.8,28.2,12.4l-0.5-5
        c-8.9-0.4-17.8-3.8-24.6-10.5C9,104.7,5.5,96,5.1,87.3L0,86.7z M11.8,86.2c0.1,7.5,2.9,14.8,8.8,20.5c5.7,5.6,13.2,8.5,20.7,8.7
        l-0.9-4.9c-6,0-12.1-2.2-16.7-6.8c-4.7-4.6-7-10.8-6.9-16.8L11.8,86.2z M23.6,86.5c-0.2,4.5,1.4,9,4.8,12.4c3.5,3.5,8.2,5,12.8,4.7
        l-1.7-4.8c-2.9,0.2-5.8-0.8-8-2.9c-2.4-2.4-4.1-5.1-3.6-8.2L23.6,86.5z M126.1,87.6l-26.5-26l6.7-6.6l-6.3-6.2l3.9-3.8L83.8,25.1
        l-3.9,3.8l-6.7-6.6l-6.7,6.6L40,2.9c-2.4-2.4-6.6-2.4-9,0L7.9,25.6c-2.5,2.4-2.5,6.4,0,8.9l26.5,26l-5.1,5c-1.7,1.7-1.7,4.3,0,5.9
        l8.8,8.7l-6.6,6.4l9.5,9.4l6.5-6.5l8.8,8.7c1.7,1.6,4.3,1.6,6,0l5.1-5l26.5,26c1.2,1.2,2.8,1.8,4.5,1.8c1.7,0,3.3-0.6,4.5-1.8
        l23.1-22.7c1.2-1.2,1.9-2.8,1.9-4.4C128,90.4,127.3,88.8,126.1,87.6z M37.4,57.6l-26.5-26c-0.8-0.8-0.8-2.1,0-2.9l2.7-2.6
        l27.9,27.5L37.4,57.6z M43.1,52L15.1,24.5l3.9-3.8L47,48.1L43.1,52z M48.5,46.6L20.5,19.2l3.9-3.8l27.9,27.5L48.5,46.6z M53.9,41.3
        L26,13.8l3.9-3.8l27.9,27.5L53.9,41.3z M59.3,36L31.4,8.5L34,5.9c0.4-0.4,0.9-0.6,1.5-0.6c0.6,0,1.1,0.2,1.5,0.6l26.5,26L59.3,36z
         M100,116.2c-0.8,0.8-2.2,0.8-3,0l-26.5-26l4.2-4.1l28,27.5L100,116.2z M104.2,112.1l-28-27.5l3.9-3.8l28,27.5L104.2,112.1z
         M109.6,106.8l-28-27.5l3.9-3.8l28,27.5L109.6,106.8z M115.1,101.5L87.1,74l3.9-3.8l28,27.5L115.1,101.5z M123.1,93.5l-2.7,2.6
        l-28-27.5l4.2-4.1l26.5,26c0.4,0.4,0.6,0.9,0.6,1.5C123.8,92.6,123.5,93.1,123.1,93.5z"/>
</g>
</svg>

However, when I view the icon in the browser, I only see an empty image placeholder:

I expected either a visible icon or an error message.

Additionally, if I change Login.vue as follows:

VUECopied
<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 compile time I get the following error:

BASHCopied
C:\Users\vis\Corso_vue\prova3\mybadge>npm run dev

> mybadge@0.0.0 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 viteTransformMiddleware (file:///C:/Users/vis\Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:62031:24)