iconify: Using Iconify Vue3 Icon Component in inline element causes inline elements content to render twice

When i use any iconify icon via its vue component within an <a> tag it causes the rest of the <a> tags content to render twice:

Usage:

 <a :href="'mailto:' + footer?.email">
          <Icon icon="ic:outline-email" :inline="true"></Icon>
          <span>{{ footer?.email }}</span>
</a>

Result: Bildschirmfoto 2022-02-24 um 21 03 15

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 27 (12 by maintainers)

Most upvoted comments

Published stable version 3.1.4, which fixes this issue. Also fixed similar issue in Vue 2 component.

cyberalien on Feb 28, 2022

This isn’t a Nuxt bug. Changing the component state before mounting will trigger a hydration error on any server-rendered app: https://stackblitz.com/edit/vitejs-vite-ahtqpq

danielroe on Feb 25, 2022

As i reported the issue and i am cleary not using nuxt (i am using vue 3 with vite, but no nuxt), it is cleary no nuxt issue, it’s a general one with SSR.

awacode21 on Feb 25, 2022

Sorry for confusion and thanks a lot for better reproduction repo!

cyberalien on Feb 25, 2022

Unfortunately that’s not it. Even when replacing event with onCreate and rendering icon immediately, bug still remains.

cyberalien on Feb 24, 2022

Tested with Nuxt and I can replicate that bug! Very weird bug. It is great news because now I can work on fixing it

cyberalien on Feb 24, 2022