[BUG REPORT]An error occurred when using with nuxt-icon.

[yongho0605]

OS: macOS latest
Browser: chrome latest
node version: 20.9.0
Nuxt version: 3.8.1
nuxt-icon version: 0.6.6
@nuxtjs/storybook version: 7.0.0

how can i do?

I've tried many times to disable the vite plugin, but failed to clear the error

[alexcroox]

Did you find a way around this?

[cain]

Same error i have, fresh nuxt project

[sbloska]

I've got around this problem by copying the nuxt icon component into my repo. Its not the most elegant solution but it works as a temporary work around

// components/NuxtIcon.vue
<template>
  <span
    class="nuxt-icon"
    :class="{
      'nuxt-icon--fill': !filled,
      'nuxt-icon--stroke': hasStroke && !filled
    }"
    v-html="icon"
  />
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    name: string
    filled?: boolean
  }>(),
  { filled: false }
)

const icon = ref<string | Record<string, any>>('')
let hasStroke = false

async function getIcon() {
  try {
    const iconsImport = import.meta.glob('assets/icons/**/**.svg', {
      as: 'raw',
      eager: false
    })
    const rawIcon = await iconsImport[`/assets/icons/${props.name}.svg`]()
    if (rawIcon.includes('stroke')) {
      hasStroke = true
    }
    icon.value = rawIcon
  } catch {
    console.error(
      `[nuxt-icons] Icon '${props.name}' doesn't exist in 'assets/icons'`
    )
  }
}

await getIcon()

watchEffect(getIcon)
</script>

<style>
.nuxt-icon svg {
  width: 1em;
  height: 1em;
  margin-bottom: 0.125em;
  vertical-align: middle;
}
.nuxt-icon.nuxt-icon--fill,
.nuxt-icon.nuxt-icon--fill * {
  fill: currentColor !important;
}

.nuxt-icon.nuxt-icon--stroke,
.nuxt-icon.nuxt-icon--stroke * {
  stroke: currentColor !important;
}
</style>

[tobiasdiez]

This should be fixed in the next version (i.e. in the main branch).