Unocss icons preset as class feature

[brokuka]

trafficstars

Is any chance in future to get https://unocss.dev/presets/icons like behavior ?

[antfu]

Can you elaborate on what you are expecting?

[brokuka]

Using Icon component may cause SSR issue.

Toggle dark theme implementation with UnoCSS:

<script setup lang="ts">
const color = useColorMode()

const isDark = computed(() => color.value === 'dark')
const tooltipText = computed(() => `Change to ${isDark.value ? 'light' : 'dark'} theme`)

function toggleDark() {
  color.preference = isDark.value ? 'light' : 'dark'
}
</script>

<template>
  <Tooltip :text="tooltipText" visible-on-click>
    <UiButton size="icon" variant="outline" @click="toggleDark">
      <span class="i-mdi:weather-sunny dark:i-mdi:weather-night text-xl" />
    </UiButton>
  </Tooltip>
</template>

With Icon component will be:

<template>
	<Tooltip :text="tooltipText" visible-on-click>
		<UiButton size="icon" variant="outline" @click="toggleDark">
			<Icon v-if="isDark" name="mdi:weather-night" />
			<Icon v-else name="mdi:weather-sunny" />
		</UiButton>
	</Tooltip>
</template>

Where you will SSR issue

Of course for "try" to fix this, you have to using Client component, but then there may be UX problems, for example icon loading.

Presumably, to solve this problem you can simply add an optional prop :dark or somehow give the opportunity to use a class instead of icon

[cyberalien]

If you want to get rid of warning, which is visible only in dev mode and not really an issue, wrap component in <ClientOnly> tag. Dark/light switch is meaningless when UI is not interactive anyway.

[murshex]

@antfu Im wondering about this too, will it be possible?