Unable to Display Icons Using iconify i-mdi-light

[ooooshino]

tried to import the mdi-light pack from iconify on my project. My tailwind.config.cjs file is correctly configured, and the plugin works fine. However, when I created a secondary component MenuItem, the icon did not display, and I didn’t receive any error messages.

Here’s the code for my MenuItem component:

<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps<{
  icon?: string,
  title?: string,
  selected?: boolean
}>()
const menuSelected = computed(() => props.selected ? 'bordered' : '')
const menuIcon = computed(() => props.icon ? `i-mdi-light-${props.icon}` : '')
</script>

<template>
  <li :class="menuSelected">
    <a>
      <span :class="menuIcon" class=" text-white h-4 w-4" />
      {{ props.title }}
    </a>
  </li>
</template>

I used the following code to import MenuItem in my menu:

<menu-item icon="home" title="DashBoard" selected />

I ran pnpm dev and didn’t see any icons on the page. Opening the console, the computed property had successfully changed the class to i-mdi-light-home

Strange thing is that after adding the complete class name to the span<span :class="menuIcon" class="i-mdi-light-home" />, the icon appeared on the page. However, even after removing the class, the icon remained visible on the page. But when the “pnpm dev” process was stopped using “ctrl+c” and started again, the icon disappeared again.

Device information

macOS 13.1 (22C65)
chrome version 111.0.5563.110 (arm64)
vscode Version: 1.76.2

dependencies

"dependencies": {
    "@egoist/tailwindcss-icons": "^1.0.7",
    "@iconify/json": "^2.2.40",
    "tailwindcss": "^3.2.7",
    "daisyui": "^2.51.5",
    "autoprefixer": "^10.4.14",
    "axios": "^1.3.4",
    "vue": "^3.2.47",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "vite": "^4.2.0"
  }

[ModyQyW]

https://tailwindcss.com/docs/content-configuration#dynamic-class-names

I think better replace const menuIcon = computed(() => props.icon ? i-mdi-light-${props.icon} : '') with const menuIcon = computed(() => props.icon || ''), and pass a full class name asprops.icon.

[hyoban]

Close as this is not an issue. If you have any questions more, feel free to reopen it.