Skip to main content

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

4
  • The first solution is very elegant, thank you! There is one problem, the line <path v-for="(props, key) in icons[icon]" :key="key" v-bind="props" /> doesn't work for me, I understand what you are trying to achieve but I get an error Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name. Commented Aug 18, 2024 at 7:18
  • I also had to use icons[props.icon] instead of icons[icon], but I don't think this is the problem. Commented Aug 18, 2024 at 7:19
  • I temporaly used this code: <path :d="icons[props.icon]['d']" :fill="icons[props.icon]['fill']" :fill-rule="icons[props.icon]['fillRule']" :clip-rule="icons[props.icon]['clipRule']"/>, will be happy to replace it to something more elegant... Commented Aug 18, 2024 at 7:52
  • You don't need the props. prefix inside <template> (vue automatically exposes all props to the template). And if it's key of icons, <path v-bind="icons[icon]"> will do. Working example. Commented Aug 19, 2024 at 6:15