[Documentation] SVG icon documentation contains broken code

[FossPrime]

trafficstars

Environment

Browsers: Safari OS: Android

Steps to reproduce

https://stackblitz.com/edit/bug-vuetify3-svg-icon?file=src%2FApp.vue,index.html,ReadMe.md,src%2Fenv.d.ts,package.json,src%2Fplugins%2Fvuetify.ts

Expected Behavior

How to use an SVG for an icon

Actual Behavior

The code references an SVG path string, but that's not actually supported. The result is the content is added to the class list, verbatim. This is not how SVG's work in [email protected]

Reproduction Link

https://next.vuetifyjs.com/en/components/buttons/#icon

[KaelWD]

I don't see an SVG path string in the example you linked.

[timstallmann]

Here's another example of the same issue @FossPrime is reporting, I think -- https://next.vuetifyjs.com/en/components/icons/

See screenshot

[KaelWD]

Notice the mdiSvg: prefix in that example, and the alert above it explaining why. @FossPrime <v-icon>customSvg</v-icon> is not implied to work anywhere, you aren't actually passing that variable in anywhere. <v-icon>{{ customSvg }}</v-icon> or <v-icon :icon="customSvg" /> will work if you set defaultSet: 'mdi' or { defaultSet: 'svg', sets: { svg: { component: VSvgIcon }} }