nuxt / icon

The <Icon> component, supporting Iconify, Emojis and custom components.
https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue
MIT License
961 stars 59 forks source link

Issues with update 1.8.0 (Fallthrough Attributes) #300

Closed N1cE-me closed 6 days ago

N1cE-me commented 6 days ago

After update with Suspense I can't pass class & event listeners for NuxtIcon component.

For example:

<Icon name="mdi:puzzle" class="absolute h-[40px] w-6 cursor-pointer rounded text-emerald-600" />

Now rendered as:

<span class="iconify i-mdi:puzzle" aria-hidden="true"></span>

Instead correct v1.7.6

<span class="iconify i-mdi:puzzle absolute h-[40px] w-6 cursor-pointer rounded text-emerald-600" aria-hidden="true"></span>

And with warnings:

 WARN  [Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes.
  at <NuxtIcon name="mdi:puzzle" class="h-[40px] w-6 cursor-pointer rounded text-emerald-600" >
  at <RouterLink ref=undefined to="/" activeClass=undefined  ... >
  at <NuxtLink href="/" >
  at <Error error= options.customise is not a function

  <span class="stack internal">at getCSS (node_modules\@nuxt\icon\dist\runtime\components\css.js:93:41)</span>
  <span class="stack internal">at node_modules\@nuxt\icon\dist\runtime\components\css.js:169:25</span></pre> >
  at <NuxtRoot>

Same issue with event listeners, for example:

<Icon name="ant-design:plus-outlined" class="icon" @click="popoverOpenIndex = index" @dblclick.stop />

@click not work now

With <Icon :suspensible="false" ... /> same issue


vue: 3.5.13 nuxt: 3.14.159 @nuxt/icon: 1.8.0 node: 22.10.0

wangziling commented 6 days ago

The same issue. 🤔

N1cE-me commented 6 days ago

fixed with v1.8.1: 291f5118c122f6a24d2caf11092865ce9b020def

@antfu Thank you!