Why does my icon sometimes fail to display?
So in my code, I use an icon in the following way:
<template>
<IconTeamJournal class="w-4 h-4" />
</template>
<script setup lang="ts">
import IconTeamJournal from '~/components/icon/IconTeamJournal.vue';
</script>
The icon is as follows:
<template>
<svg
width="844"
height="844"
viewBox="0 0 844 844"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M843.995 430.44H0.00476076C0.690863 465.408 5.63102 499.333 14.3292 531.72H829.671C838.369 499.333 843.309 465.408 843.995 430.44Z"
fill="url(#paint0_linear_29_3)"
/>
<path
d="M824.755 548.6H19.2449C28.5687 578.28 41.0839 606.548 56.3886 633H787.612C802.916 606.548 815.431 578.28 824.755 548.6Z"
fill="url(#paint1_linear_29_3)"
/>
<path
d="M777.31 649.88H66.6904C82.3345 674.213 100.411 696.834 120.576 717.4H723.424C743.589 696.834 761.666 674.213 777.31 649.88Z"
fill="url(#paint2_linear_29_3)"
/>
<path
d="M705.897 734.28H138.103C163.265 757.16 191.203 777.042 221.353 793.36H622.647C652.797 777.042 680.735 757.16 705.897 734.28Z"
fill="url(#paint3_linear_29_3)"
/>
<path
d="M587.697 810.24H256.303C307.175 831.971 363.182 844 422 844C480.818 844 536.826 831.971 587.697 810.24Z"
fill="url(#paint4_linear_29_3)"
/>
<path
d="M843.995 413.56H0.00476074C0.90267 367.797 9.0866 323.82 23.4446 282.74H820.555C834.914 323.82 843.097 367.797 843.995 413.56Z"
fill="url(#paint5_linear_29_3)"
/>
<path
d="M814.245 265.86C752.16 110.089 599.939 0 422 0C244.061 0 91.8397 110.089 29.7551 265.86H814.245Z"
fill="url(#paint6_linear_29_3)"
/>
<defs>
<linearGradient
id="paint0_linear_29_3"
x1="422"
y1="0"
x2="422"
y2="844"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#C24CFC" />
<stop
offset="1"
stop-color="#FFD500"
/>
</linearGradient>
<linearGradient
id="paint1_linear_29_3"
x1="422"
y1="0"
x2="422"
y2="844"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#C24CFC" />
<stop
offset="1"
stop-color="#FFD500"
/>
</linearGradient>
<linearGradient
id="paint2_linear_29_3"
x1="422"
y1="0"
x2="422"
y2="844"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#C24CFC" />
<stop
offset="1"
stop-color="#FFD500"
/>
</linearGradient>
<linearGradient
id="paint3_linear_29_3"
x1="422"
y1="0"
x2="422"
y2="844"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#C24CFC" />
<stop
offset="1"
stop-color="#FFD500"
/>
</linearGradient>
<linearGradient
id="paint4_linear_29_3"
x1="422"
y1="0"
x2="422"
y2="844"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#C24CFC" />
<stop
offset="1"
stop-color="#FFD500"
/>
</linearGradient>
<linearGradient
id="paint5_linear_29_3"
x1="422"
y1="0"
x2="422"
y2="844"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#C24CFC" />
<stop
offset="1"
stop-color="#FFD500"
/>
</linearGradient>
<linearGradient
id="paint6_linear_29_3"
x1="422"
y1="0"
x2="422"
y2="844"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#C24CFC" />
<stop
offset="1"
stop-color="#FFD500"
/>
</linearGradient>
</defs>
</svg>
</template>
This is how it looks when the icon is shown:
This is what it looks like when the icon is not being shown:
I use Vue, Nuxt, and Ionic, and sometimes the icon would disappear after refreshing the page multiple times or navigating from another page. The behavior was random, and I couldn’t figure out why. However, I found a fix and want to share it.
I fixed the problem by adding the key to the path and the linearGradient as follows:
<template>
<svg
width="844"
height="844"
viewBox="0 0 844 844"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
:key="`path0-${key}`"
d="M843.995 430.44H0.00476076C0.690863 465.408 5.63102 499.333 14.3292 531.72H829.671C838.369 499.333 843.309 465.408 843.995 430.44Z"
:fill="`url(#paint0_linear_${key})`"
/>
<path
:key="`path1-${key}`"
d="M824.755 548.6H19.2449C28.5687 578.28 41.0839 606.548 56.3886 633H787.612C802.916 606.548 815.431 578.28 824.755 548.6Z"
:fill="`url(#paint1_linear_${key})`"
/>
<path
:key="`path2-${key}`"
d="M777.31 649.88H66.6904C82.3345 674.213 100.411 696.834 120.576 717.4H723.424C743.589 696.834 761.666 674.213 777.31 649.88Z"
:fill="`url(#paint2_linear_${key})`"
/>
<path
:key="`path3-${key}`"
d="M705.897 734.28H138.103C163.265 757.16 191.203 777.042 221.353 793.36H622.647C652.797 777.042 680.735 757.16 705.897 734.28Z"
:fill="`url(#paint3_linear_${key})`"
/>
<path
:key="`path4-${key}`"
d="M587.697 810.24H256.303C307.175 831.971 363.182 844 422 844C480.818 844 536.826 831.971 587.697 810.24Z"
:fill="`url(#paint4_linear_${key})`"
/>
<path
:key="`path5-${key}`"
d="M843.995 413.56H0.00476074C0.90267 367.797 9.0866 323.82 23.4446 282.74H820.555C834.914 323.82 843.097 367.797 843.995 413.56Z"
:fill="`url(#paint5_linear_${key})`"
/>
<path
:key="`path6-${key}`"
d="M814.245 265.86C752.16 110.089 599.939 0 422 0C244.061 0 91.8397 110.089 29.7551 265.86H814.245Z"
:fill="`url(#paint6_linear_${key})`"
/>
<defs>
<linearGradient
:key="`linearGradient0-${key}`"
:id="`paint0_linear_${key}`"
x1="422"
y1="0"
x2="422"
y2="844"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#C24CFC" />
<stop
offset="1"
stop-color="#FFD500"
/>
</linearGradient>
<linearGradient
:key="`linearGradient1-${key}`"
:id="`paint1_linear_${key}`"
x1="422"
y1="0"
x2="422"
y2="844"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#C24CFC" />
<stop
offset="1"
stop-color="#FFD500"
/>
</linearGradient>
<linearGradient
:key="`linearGradient2-${key}`"
:id="`paint2_linear_${key}`"
x1="422"
y1="0"
x2="422"
y2="844"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#C24CFC" />
<stop
offset="1"
stop-color="#FFD500"
/>
</linearGradient>
<linearGradient
:key="`linearGradient3-${key}`"
:id="`paint3_linear_${key}`"
x1="422"
y1="0"
x2="422"
y2="844"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#C24CFC" />
<stop
offset="1"
stop-color="#FFD500"
/>
</linearGradient>
<linearGradient
:key="`linearGradient4-${key}`"
:id="`paint4_linear_${key}`"
x1="422"
y1="0"
x2="422"
y2="844"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#C24CFC" />
<stop
offset="1"
stop-color="#FFD500"
/>
</linearGradient>
<linearGradient
:key="`linearGradient5-${key}`"
:id="`paint5_linear_${key}`"
x1="422"
y1="0"
x2="422"
y2="844"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#C24CFC" />
<stop
offset="1"
stop-color="#FFD500"
/>
</linearGradient>
<linearGradient
:key="`linearGradient6-${key}`"
:id="`paint6_linear_${key}`"
x1="422"
y1="0"
x2="422"
y2="844"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#C24CFC" />
<stop
offset="1"
stop-color="#FFD500"
/>
</linearGradient>
</defs>
</svg>
</template>
<script setup lang="ts">
import { ref } from 'vue';
function randomString() {
return Math.random().toString(36).substring(2, 15);
}
const key = ref(randomString());
</script>
Rendered SVG that does not show the icon:
<svg data-v-1825e573="" width="844" height="844" viewBox="0 0 844 844" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4"><path d="M843.995 430.44H0.00476076C0.690863 465.408 5.63102 499.333 14.3292 531.72H829.671C838.369 499.333 843.309 465.408 843.995 430.44Z" fill="url(#paint0_linear_29_3)"></path><path d="M824.755 548.6H19.2449C28.5687 578.28 41.0839 606.548 56.3886 633H787.612C802.916 606.548 815.431 578.28 824.755 548.6Z" fill="url(#paint1_linear_29_3)"></path><path d="M777.31 649.88H66.6904C82.3345 674.213 100.411 696.834 120.576 717.4H723.424C743.589 696.834 761.666 674.213 777.31 649.88Z" fill="url(#paint2_linear_29_3)"></path><path d="M705.897 734.28H138.103C163.265 757.16 191.203 777.042 221.353 793.36H622.647C652.797 777.042 680.735 757.16 705.897 734.28Z" fill="url(#paint3_linear_29_3)"></path><path d="M587.697 810.24H256.303C307.175 831.971 363.182 844 422 844C480.818 844 536.826 831.971 587.697 810.24Z" fill="url(#paint4_linear_29_3)"></path><path d="M843.995 413.56H0.00476074C0.90267 367.797 9.0866 323.82 23.4446 282.74H820.555C834.914 323.82 843.097 367.797 843.995 413.56Z" fill="url(#paint5_linear_29_3)"></path><path d="M814.245 265.86C752.16 110.089 599.939 0 422 0C244.061 0 91.8397 110.089 29.7551 265.86H814.245Z" fill="url(#paint6_linear_29_3)"></path><defs><linearGradient id="paint0_linear_29_3" x1="422" y1="0" x2="422" y2="844" gradientUnits="userSpaceOnUse"><stop stop-color="#C24CFC"></stop><stop offset="1" stop-color="#FFD500"></stop></linearGradient><linearGradient id="paint1_linear_29_3" x1="422" y1="0" x2="422" y2="844" gradientUnits="userSpaceOnUse"><stop stop-color="#C24CFC"></stop><stop offset="1" stop-color="#FFD500"></stop></linearGradient><linearGradient id="paint2_linear_29_3" x1="422" y1="0" x2="422" y2="844" gradientUnits="userSpaceOnUse"><stop stop-color="#C24CFC"></stop><stop offset="1" stop-color="#FFD500"></stop></linearGradient><linearGradient id="paint3_linear_29_3" x1="422" y1="0" x2="422" y2="844" gradientUnits="userSpaceOnUse"><stop stop-color="#C24CFC"></stop><stop offset="1" stop-color="#FFD500"></stop></linearGradient><linearGradient id="paint4_linear_29_3" x1="422" y1="0" x2="422" y2="844" gradientUnits="userSpaceOnUse"><stop stop-color="#C24CFC"></stop><stop offset="1" stop-color="#FFD500"></stop></linearGradient><linearGradient id="paint5_linear_29_3" x1="422" y1="0" x2="422" y2="844" gradientUnits="userSpaceOnUse"><stop stop-color="#C24CFC"></stop><stop offset="1" stop-color="#FFD500"></stop></linearGradient><linearGradient id="paint6_linear_29_3" x1="422" y1="0" x2="422" y2="844" gradientUnits="userSpaceOnUse"><stop stop-color="#C24CFC"></stop><stop offset="1" stop-color="#FFD500"></stop></linearGradient></defs></svg>
Rendered SVG that does show the icon:
<svg data-v-1825e573="" width="844" height="844" viewBox="0 0 844 844" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4"><path d="M843.995 430.44H0.00476076C0.690863 465.408 5.63102 499.333 14.3292 531.72H829.671C838.369 499.333 843.309 465.408 843.995 430.44Z" fill="url(#paint0_linear_29_3)"></path><path d="M824.755 548.6H19.2449C28.5687 578.28 41.0839 606.548 56.3886 633H787.612C802.916 606.548 815.431 578.28 824.755 548.6Z" fill="url(#paint1_linear_29_3)"></path><path d="M777.31 649.88H66.6904C82.3345 674.213 100.411 696.834 120.576 717.4H723.424C743.589 696.834 761.666 674.213 777.31 649.88Z" fill="url(#paint2_linear_29_3)"></path><path d="M705.897 734.28H138.103C163.265 757.16 191.203 777.042 221.353 793.36H622.647C652.797 777.042 680.735 757.16 705.897 734.28Z" fill="url(#paint3_linear_29_3)"></path><path d="M587.697 810.24H256.303C307.175 831.971 363.182 844 422 844C480.818 844 536.826 831.971 587.697 810.24Z" fill="url(#paint4_linear_29_3)"></path><path d="M843.995 413.56H0.00476074C0.90267 367.797 9.0866 323.82 23.4446 282.74H820.555C834.914 323.82 843.097 367.797 843.995 413.56Z" fill="url(#paint5_linear_29_3)"></path><path d="M814.245 265.86C752.16 110.089 599.939 0 422 0C244.061 0 91.8397 110.089 29.7551 265.86H814.245Z" fill="url(#paint6_linear_29_3)"></path><defs><linearGradient id="paint0_linear_29_3" x1="422" y1="0" x2="422" y2="844" gradientUnits="userSpaceOnUse"><stop stop-color="#C24CFC"></stop><stop offset="1" stop-color="#FFD500"></stop></linearGradient><linearGradient id="paint1_linear_29_3" x1="422" y1="0" x2="422" y2="844" gradientUnits="userSpaceOnUse"><stop stop-color="#C24CFC"></stop><stop offset="1" stop-color="#FFD500"></stop></linearGradient><linearGradient id="paint2_linear_29_3" x1="422" y1="0" x2="422" y2="844" gradientUnits="userSpaceOnUse"><stop stop-color="#C24CFC"></stop><stop offset="1" stop-color="#FFD500"></stop></linearGradient><linearGradient id="paint3_linear_29_3" x1="422" y1="0" x2="422" y2="844" gradientUnits="userSpaceOnUse"><stop stop-color="#C24CFC"></stop><stop offset="1" stop-color="#FFD500"></stop></linearGradient><linearGradient id="paint4_linear_29_3" x1="422" y1="0" x2="422" y2="844" gradientUnits="userSpaceOnUse"><stop stop-color="#C24CFC"></stop><stop offset="1" stop-color="#FFD500"></stop></linearGradient><linearGradient id="paint5_linear_29_3" x1="422" y1="0" x2="422" y2="844" gradientUnits="userSpaceOnUse"><stop stop-color="#C24CFC"></stop><stop offset="1" stop-color="#FFD500"></stop></linearGradient><linearGradient id="paint6_linear_29_3" x1="422" y1="0" x2="422" y2="844" gradientUnits="userSpaceOnUse"><stop stop-color="#C24CFC"></stop><stop offset="1" stop-color="#FFD500"></stop></linearGradient></defs></svg>
Okay, now I am interested in why this fixed the problem and what the problem actually is. Could somebody help me explain it?
Solution
The 2 last snippets of code are exactly the same.
This is probably related to the fact that you need to have unique ids on your page and maybe some hydration/lifecycle hooks messed up that one.
The browser may still display it sometimes because it's clever enough. But as a whole, it doesn't sound like a Vue/Nuxt-specific issue.
Maybe Ionic is the issue here too, not sure because I do not have any experience with that one specifically. Hence I could recommend trying those icons instead and see if those battle-tested ones also have a similar issue. Idea would be to narrow down the things that doesn't work as much as possible.
- Uncaught TypeError: this._map is null (Vue.js 3, Leaflet)
- WebStorm not recognizing methods of reactive objects
- How to set compilerOptions.isCustomElement for VueJS 3 in Laravel project
- how to get value name in object user with v-for in nuxt js?
- Unable to locate file in Vite manifest: resources/js/Pages/MainPage.vue
- Why does my icon sometimes fail to display?
- duplicate "Unknown at rule @apply css(unknownAtRules)" errors in Vue.js project
- Redirect main title link in vitepress to my personal website
- how to download a csv generated from papaparse?
- laravel/vue design: different ways to handle a loader on a SPA while laravel is processing a job
- How can I read values from a static config.json file to TypeScript in a Vue file after running build:electron in Vue CLI 3?
- Service worker not generated when building vue 3
- Is it ok to detach and reattach Vue.js nodes outside a Vue.js document?
- Vite, VueJs, Inertia, SSR and dynamic javascript package loading
- Cookies headers are present but Cookies are not stored in browser
- defineConfig is undefined when required from @vue/cli-service - vue.config.js
- Validated a lazy load component when auto filling it with data
- Vuetify3 autocomplete with per-item tooltips not clickable
- Why using toRef(props) and is it good idea to change their value in CompositionAPI?
- How to use axios to get a file stored in s3
- Nuxt i18n: Failed to resolve import “locales/en.json” (Does the file exist?)
- Unexpected First Line Indentation
- Skipping larger chunks while running "Npm run build"
- How to write e2e tests with Cypress for a Vue Tailwind CSS app?
- Refused to apply style from '' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled
- What is ServerPlaceholder in Nuxt.js and how is it used?
- How to use vite build use another config file instead of vite.config.js
- AWS Amplify Auth - The requested module does not provide an export named 'Auth'
- VueJS: Is it possible to use spread operator for computed properties?
- Vuejs: V-HTML data binding of html data against eslint rule