vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.88k stars 6.96k forks source link

[Documentation] SVG icon documentation contains broken code #15986

Closed FossPrime closed 1 year ago

FossPrime commented 2 years ago

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 Vuetify@3.0.0-beta.15

Reproduction Link

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

KaelWD commented 2 years ago

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

timstallmann commented 1 year ago

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

See screenshot

Screen Shot 2022-11-10 at 11 38 15 AM

KaelWD commented 1 year ago

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 }} }