N
Nuxt•2mo ago
thasmo

Configure default nuxt/icon icon-set to leave out prefix

Would it be possible to configure a default icon-set to be able to leave out the prefix:
<Icon name="search" />
Instead of:
<Icon name="prefix:search" />
3 Replies
kapa.ai
kapa.ai•2mo ago
Hi @thasmo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, there isn't specific information about configuring a default icon-set in Nuxt to leave off the prefix in the <Icon> component. The documentation shows that Nuxt UI uses the i- prefix for icons, as seen in examples like: 
<template>
  <UIcon name="i-heroicons-light-bulb" class="w-5 h-5" />
</template>
<template>
  <UIcon name="i-heroicons-light-bulb" class="w-5 h-5" />
</template>
Nuxt UI Components - Icon explains that you can use any name from the Iconify collection with the i- prefix, and it's recommended to install the specific icon collections you need. The theming documentation also shows examples of configuring default icons in app.config.ts, but all examples still use the prefix format (like i-octicon-sync-24): 
export default defineAppConfig({
  ui: {
    button: {
      default: {
        loadingIcon: 'i-octicon-sync-24'
      }
    },
    // other components...
  }
})
export default defineAppConfig({
  ui: {
    button: {
      default: {
        loadingIcon: 'i-octicon-sync-24'
      }
    },
    // other components...
  }
})
Nuxt UI Getting Started - Theming Icons The knowledge sources don't mention a way to configure a default icon-set that would allow you to omit the prefix entirely. If you need this functionality, you might want to check the official Nuxt Icon documentation or consider creating a wrapper component that adds the prefix automatically. Is there anything else about Nuxt icons you'd like to know? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@110478559113416704> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
thasmo
thasmoOP•2mo ago
Didn't find a configuration option, but I managed to wrap the icon component in a custom component like this: 
<script setup lang="ts">
import { computed } from '#imports';

const { name } = defineProps<{
    name: string;
}>();

const prefixedName = computed(() => `ri:${name}`);
</script>

<template>
    <NuxtIcon :name="prefixedName" />
</template>
<script setup lang="ts">
import { computed } from '#imports';

const { name } = defineProps<{
    name: string;
}>();

const prefixedName = computed(() => `ri:${name}`);
</script>

<template>
    <NuxtIcon :name="prefixedName" />
</template>

Did you find this page helpful?