vite plugin and react dynamic change icon not work

[pincman]

Icon always be static,like follow image

vite config

PurgeIcons({
            // globs for searching source file to analyze
            content: ['**/*.html', '**/*.jsx', '**/*.tsx'],
        }),

main.tsx

import '@purge-icons/generated';
//...

icon code, always be first icon 'lightbulb-outline'

  <a onClick={toggleTheme}>
                {/* always be first icon 'lightbulb-outline' */}
                {currentTheme?.name === 'dark-default' ? (
                    <Icon name="mdi:lightbulb-outline" type="ionify" />
                ) : (
                    <Icon name="mdi:lightbulb-on-outline" type="ionify" />
                )}
            </a>
//......................
const Ionify: FC<IconProps<{ name: string; prefix?: string }>> = (props) => {
    const { name, style, classes, iconfont, prefix, ...rest } = useIcon(props);
    const iconName = prefix ? `${prefix}:${name}` : name;
    return (
        <span {...rest} className={classNames(classes)} style={style}>
            <span data-icon={iconName} className="iconify" />
        </span>
    );
};

but antd icon use its own component work fine

<a onClick={toggleTheme}>
                {currentTheme?.name === 'dark-default' ? (
                    <Icon component={() => <PieChartOutlined />} type="antd" />
                ) : (
                    <Icon component={() => <DotChartOutlined />} type="antd" />
                )}
            </a>
// ..............
const AntdIcon: FC<
    IconProps<{
        component: AntdIconComponent;
        twoToneColor?: TwoToneColor;
    }>
> = (props) => {
    const { component: IconComponent, style, classes, iconfont, ...rest } = useIcon(props);
    return <IconComponent {...rest} style={style} className={classNames(classes)} />;
};
export default AntdIcon;

and

[antfu]

What's your <Icon/> component?

[pincman]

@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

[antfu]

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

[pincman]

{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 😂

[soulsam480]

Hii @antfu I'm facing a similar situation with Vue,
components

<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.

[vineryap]

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>

[JessicaSachs]

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>

[antfu]

@JessicaSachs it's kinda a limitation of how Iconify runtime implemented #17 (comment)

you can try to adapt to this component:
https://github.com/antfu/antfu.me/blob/master/src/components/Icon.vue

[JessicaSachs]

Ohhh. Now I understand that comment. Honestly, since the iconify runtime causes a FOUC I just switched to using your Vite Icons Plugin. 😅