Can the Base component be changed to "NuxtIcon" instead of "Icon" with the "name" attribute?

[ZackPlauche]

In my own projects I want to name how I build the component "Icon".

I think as a package it would make way more sense for the component name to be "NuxtIcon" with an "icon" class instead of just "Icon" with name.

Also see this: https://vuejs.org/style-guide/rules-essential.html#use-multi-word-component-names (not super relevant due to how I would use it probably lol)

I'd like to look at my own codebase and make the icon component custom, like:

<!-- Icon.vue -->
<template>
<div class="aspect-square rounded-full h-20 text-2xl flex items-center justify-center text-white">
    <NuxtIcon :icon="icon" />
</div>
</template>

<script setup>
defineProps({ icon: String })
</script>

[tidan-16]

I thought I was the only one thinking about this, but It honestly would make more sense and will also follow the vue ecosystem naming conventions (vuetify, quasar and other popular libraries use prefixes).

It is not a huge dealbreaker for me since we can still create our own component, but still is something that could be better in my opinion.

[antfu]

I am up for that and I think it would make sense. What do you think /cc @Atinux @benjamincanac?

[Atinux]

Already mentioned in #3

This would be a big breaking change to rename it NuxtIcon and other frameworks also take the <Icon> approach though.

I also talked to Evan about this and seems ok with also having <Icon>.

I also use <NuxtIcon/> when it's about showing the Nuxt icon in my app :D

But I am OK to add a prefix option to the module so it can become Nuxt or U (for Nuxt UI) so it can solve your usecase @ZackPlauche

Happy to open a PR if good for you @antfu ?

[ZackPlauche]

prefix option works for me haha

[antfu]

In that case, it's already customizable: https://github.com/nuxt-modules/icon/blob/221d1932eb52568b468e37d06df339a99c7b3fe6/src/module.ts#L26

So I think we would still keep the default as Icon while it's possible for users to change it. Consider this issue solved

[ZackPlauche]

Ah cool!

[ZackPlauche]

In that case, it's already customizable:

https://github.com/nuxt-modules/icon/blob/221d1932eb52568b468e37d06df339a99c7b3fe6/src/module.ts#L26

So I think we would still keep the default as Icon while it's possible for users to change it. Consider this issue solved

actually, how do you use it to add the option? I couldn't find in the docs 😅

EDIT: This didn't work

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxtjs/tailwindcss',
    'nuxt-icon',
  ],
  nuxtIcon: {
    defaults: {
      componentName: 'NuxtIcon',
    }
  },
})

[antfu]

Oh it's

export default defineNuxtConfig({
  modules: [
    'nuxt-icon',
  ],
  icon: {
    componentName: 'NuxtIcon',
  },
})

[ZackPlauche]

Oh it's

export default defineNuxtConfig({
  modules: [
    'nuxt-icon',
  ],
  icon: {
    componentName: 'NuxtIcon',
  },
})

Hi, so I just tried this but it still only appears when using <Icon name="..." /> :|

Config:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    "@nuxtjs/tailwindcss",
    "@storyblok/nuxt",
    "nuxt-icon",
  ],
  icon: {
    componentName: 'NuxtIcon',
  },
})