[Bug]: VIcon is not working with SVG paths

[rudolfbyker]

Contact Details

rudolfbyker@gmail.com

What happened?

When trying to use VIcon with SVG paths, I get an error.

Reproduction: https://codesandbox.io/p/sandbox/zen-wood-npt83m (Check the yarn dev setup task in the terminal)

Version

1.0.2 (Default)

What browsers are you seeing the problem on?

No response

Relevant log output

[Vue warn]: Invalid prop: type check failed for prop "icon". Expected Null | Null | Null | Null, got String with value "M23,10C23,8.89 22.1,8 21,8H14.68L15.64,3.43C15.66,3.33 15.67,3.22 15.67,3.11C15.67,2.7 15.5,2.32 15.23,2.05L14.17,1L7.59,7.58C7.22,7.95 7,8.45 7,9V19A2,2 0 0,0 9,21H18C18.83,21 19.54,20.5 19.84,19.78L22.86,12.73C22.95,12.5 23,12.26 23,12V10M1,21H5V9H1V21Z".
[Vue warn]: Component VSvgIcon is missing template or render function.

Additional context

No response

[fikrihanda]

yeah i counter this error. i end up change manual for vuetify

[Dominic-Marcelino]

Is there any solution for this?

Using the following config:

import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';

// defineNuxtConfig - vuetify:
vuetify: {
    /* vuetify options */
    vuetifyOptions: {
        icons: {
            defaultSet: 'mdi',
            aliases,
            sets: {
              mdi,
            },
          },
        },
    }
}

But still getting the error

[AchoArnold]

Also having the error.

[sniperadmin]

@AchoArnold @rudolfbyker @fikrihanda @Dominic-Marcelino @jvhellemondt As a workaround you can import the icons as follows:

<script lang="ts" setup>
import {mdiGoogle} from '@mdi/js'
</script>

<template>
  <v-icon :icon="`svg:${mdiGoogle}`" />
</template>

This does not need any pre-configuration settings

Now the real issue comes when implementing custom icons and hopefully this gets supported soon.

In nuxt.config.ts file, this is the config:

vuetifyOptions: {
      icons: {
        sets: {
          custom: {
            EIconGoogle: {
              component: () => import('@/components/icons/EIconGoogle/Index.vue'),
              props: {
                name: 'EIconGoogle'
              }
            }
          }
        }
      },
    },

in the template of any component:

<v-icon icon="custom:EIconGoogle" />

Here is the Error generating when using SSR:

500
src.replace is not a function

at renderVNode (C:\Users\Nasr\Desktop\egab-nuxt3\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:720:34)
at renderComponentSubTree (C:\Users\Nasr\Desktop\egab-nuxt3\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:698:7)
at renderComponentVNode (C:\Users\Nasr\Desktop\egab-nuxt3\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:631:12)
at renderVNode (C:\Users\Nasr\Desktop\egab-nuxt3\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:743:14)
at renderVNodeChildren (C:\Users\Nasr\Desktop\egab-nuxt3\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:759:5)
at renderElementVNode (C:\Users\Nasr\Desktop\egab-nuxt3\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:806:9)
at renderVNode (C:\Users\Nasr\Desktop\egab-nuxt3\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:741:9)
at renderComponentSubTree (C:\Users\Nasr\Desktop\egab-nuxt3\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:698:7)
at renderComponentVNode (C:\Users\Nasr\Desktop\egab-nuxt3\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:631:12)

[kstraszewski]

I'm also having this error, but i can confirm, that this workaround works for now

<script lang="ts" setup>
import {mdiGoogle} from '@mdi/js'
</script>

<template>
  <v-icon :icon="`svg:${mdiGoogle}`" />
</template>

[ConnorGDevelopment]

I believe this is an issue related to Vuetify, I'm having the same problem using vuetify-nuxt-module. On browser inspect, the SVG path gets added to the element's class attribute.