CODEWITHSUNDEEP
vue.jsnuxt.jsnuxt3.js
Dominic Meyer
Dominic Meyer

Reputation: 43

Nuxt v-bind not working with NuxtUI icons and util file

I have a Nuxt 3 App with NuxtUI as UI Framework. To reuse icons and to avoid typos I create a file /utils/Icon.ts that looks like this:

export enum IconSet {
  HeroIcons = 'heroicons'
}

export class Icon {
   readonly set: IconSet
   readonly name: string

   constructor(set: IconSet, name: string) {
     this.set = set
     this.name = name
   }

   toString(): string {
     return `i-${this.set}-${this.name}`
   }

   static preConfigured = {
     home: new Icon(IconSet.HeroIcons, 'home').toString(),
     user: new Icon(IconSet.HeroIcons, 'user').toString(),
     lock_open: new Icon(IconSet.HeroIcons, 'lock-open').toString(),
     lock_closed: new Icon(IconSet.HeroIcons, 'lock-closed').toString(),
     gear: new Icon(IconSet.HeroIcons, 'cog-6-tooth').toString(),
   }
}

The preConfigured Icons are the ones im trying to use like this:

<template>
  <UButton :ui="ui" :icon="Icon.preConfigured.user" />
</template>

<script setup lang="ts">
import { Icon } from '#imports';

defineProps({
  ui: Object
})
console.log(Icon.preConfigured)
</script>

But for some reason this isn't working. The logged output is as expected:

{
  home: 'i-heroicons-home',
  user: 'i-heroicons-user',
  lock_open: 'i-heroicons-lock-open',
  lock_closed: 'i-heroicons-lock-closed',
  gear: 'i-heroicons-cog-6-tooth'
}

I also tested every icon name, it's working if I use them like this:

<template>
  <UButton :ui="ui" :icon="icon" />
  <UButton :ui="ui" icon="i-heroicons-user" />
</template>

<script setup lang="ts">
defineProps({
  ui: Object
})
const icon = 'i-heroicons-user'
</script>

When expecting the icon element in the browser, it always looks like this, no matter if the icon is there or not:

<span class="i-heroicons-user flex-shrink-0 h-5 w-5" aria-hidden="true"></span>

It gets even weirder, because when I'm testing and switching back from an working example to my Icon class, the icon still is there, but only until I restart the dev server. Does anyone know, what might cause this?

Upvotes: 0

Views: 428

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

It uses the egoist/tailwindcss-icons which based on Tailwind engine that bundles only the static icons declared in your code as explained here. So you need to hardcode them statically then get access them using a literal object or an array. You can use vscode-iconify extension that shows valid icons directly in the editor.

Upvotes: 0

Related Questions