unplugin / unplugin-icons

šŸ¤¹ Access thousands of icons as components on-demand universally.

Home Page:https://www.npmjs.com/package/unplugin-icons

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Dynamic components: Unable to use component v-bind:is=

Codermar opened this issue Ā· comments

Hi,
I am enjoying using your plugin immensely. Thanks!

However, I have an action bar component where I would like to setup a button with a dynamic icon but the svg does not get rendered.

This is the partial code for my action bar component:

<button v-if="addButton && !addButton.hide" :class="{ reversed: addButton.reversed }" :data-cy="`${dataCy}-add`" @click.prevent.stop="$emit('add')">
  <SymbolPlusSquare width="20" height="20" :fill="addButton.fill || 'gray'" />
  <span v-if="addButton.label">{{ addButton.label }}</span>
</button>
<button v-if="customButton && !customButton.hide" :class="{ reversed: customButton.reversed }" :data-cy="`${dataCy}-custom`" @click.prevent.stop="$emit('custom')">
  <component v-bind:is="customButton.icon" v-if="customButton.icon" width="20" height="20" :fill="customButton.fill || 'gray'"></component>
  <span v-if="customButton.label">{{ customButton.label }}</span>
</button>

I am passing props: :customButton="{ label: null, icon: 'SymbolPlusSquare', label: 'My Action' }"

What gets rendered is:

<symbolplussquare data-v-9af60b78="" width="20" height="20" fill="gray"></symbolplussquare>

I am using Vue2/Vite 2.8.6 and

"unplugin-icons": "0.14.1",
"unplugin-vue-components": "0.18.4",
"unplugin-vue2-script-setup": "0.10.0",
"vite": "2.8.6",
"vite-plugin-components": "0.13.3",