Open pincman opened 3 years ago
What's your <Icon/>
component?
@antfu It just hoc component, I clear the code,
<a onClick={toggleTheme}>
{currentTheme?.name === 'dark-default' ? (
<span data-icon="mdi:lightbulb-outline" className="iconify" />
) : (
<span data-icon="mdi:lightbulb-on-outline" className="iconify" />
)}
</a>
but also can not dynamic change according to state
Iconify has a runtime that replaces the DOM with [data-icon]
and I guess that's the reason the VDom is mismatched with the real ones. I am not very familiar with React, but maybe try
<a onClick={toggleTheme}>
{currentTheme?.name === 'dark-default' ? (
<span><span data-icon="mdi:lightbulb-outline" className="iconify" /></span>
) : (
<span><span data-icon="mdi:lightbulb-on-outline" className="iconify" /></span>
)}
</a>
Or you can give a try with the official react component for Iconify: https://github.com/iconify/iconify-react
{currentTheme?.name === 'dark-default' ? (
<span>
<span data-icon="mdi:lightbulb-outline" className="iconify" />
</span>
) : (
<span>
<span data-icon="mdi:lightbulb-on-outline" className="iconify" />
</span>
)}
still can't work π
Hii @antfu I'm facing a similar situation with Vue,
<script setup lang="ts">
import { defineProps } from 'vue';
defineProps({
size: String,
icon: String,
});
</script>
<template>
<span v-bind="$attrs">
<i
:style="{ fontSize: size || '20px', verticalAlign: '-0.25em' }"
class="iconify"
:data-icon="icon"
:data-inline="true"
/>
</span>
</template>
This is where I want to use it dynamically,
<FButton
@click="handleCommentCollapse"
:icon="isExpand ? 'ion:expand-outline' : 'ion:contract-outline'"
size="17px"
sm
:title="`${isExpand ? 'Expand' : 'Collapse'} comments`"
/>
Currently I'm using :key="isExpand ? 'e' : 'c'"
as a hack, not sure if it's the correct approach or not.
I have a similar issue here using Nuxt JS. Trying to toggle the icon but it doesn't change
<template>
<button @click="toggleMenu" >
<span
v-if="isMenuOpen"
class="h-6 w-6 iconify"
fill-rule="evenodd"
clip-rule="evenodd"
data-icon="ion:close"
></span>
<span
v-else
class="h-6 w-6 iconify"
fill-rule="evenodd"
clip-rule="evenodd"
data-icon="ion:menu"
></span>
</button>
</template>
Hey @antfu, I have an isolated Vitesse repro for this issue. Let me know if you need anything else. Absolutely loving this setup.
<div class="w-400px text-center mx-auto my-0">
<p>Click <a class="underline text-indigo-500" @click="show = !show">here</a></p>
<p>Showing? {{ show }}
<i :data-icon="show ? 'mdi:heart' : 'mdi:heart-broken'" class="iconify text-red-500" />
</p>
</div>
@JessicaSachs it's kinda a limitation of how Iconify runtime implemented https://github.com/antfu/purge-icons/issues/17#issuecomment-815498834
you can try to adapt to this component: https://github.com/antfu/antfu.me/blob/master/src/components/Icon.vue
Ohhh. Now I understand that comment. Honestly, since the iconify runtime causes a FOUC I just switched to using your Vite Icons Plugin. π
Icon always be static,like follow image
vite config
main.tsx
icon code, always be first icon 'lightbulb-outline'
but antd icon use its own component work fine
and![bbb](https://user-images.githubusercontent.com/74093067/113977755-a31b4100-9875-11eb-904c-f13b0c4c4650.gif)