Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

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

Top GitHub Comments

4reactions

cyberaliencommented, Feb 28, 2022

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

3reactions

danielroecommented, Feb 25, 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

Top Results From Across the Web

Inline Icons in Iconify for Vue

This tutorial is part of Iconify for Vue tutorial. Icons have 2 modes: inline and block. Difference between modes is vertical-align that is...

Building a button component - web.dev

In this post I want to share my thoughts on how to build a color-adaptive, responsive, and accessible <button> element.

Vue.js 3 Complete Guide - Level Up Coding

The text template is created using two nested curly brackets. It is known as the mustache tag. It creates a scope where Vue...

Table | Components - BootstrapVue

For displaying tabular data. supports pagination, filtering, sorting, custom rendering, events, and asynchronous data. For simple display of tabular data ...

5 Gotchas You're Gonna Face Getting Inline SVG Into ...

Rob is a Senior UI/UX Developer at Mavenlink, and coauthor of the Unicorn UI CSS Button Library. Their 2.0 release is using an...