use unocss preset icons as page content icon

[GreyXor]

Is your feature request related to a problem? Please describe

I try to use icon from unocss/nuxt like my other component

but in nuxt-content it's not working

Describe the solution you'd like

Icon should be showed because icon exist

  <v-list nav>
    <ContentNavigation v-slot="{ navigation }">
      <v-list-item
        v-for="link of navigation"
        :key="link._path"
        :title="link.title"
        :prepend-icon="link.icon"
        :to="link._path"
      ></v-list-item>
    </ContentNavigation>
  </v-list>

Describe alternatives you've considered

Additional context

  "devDependencies": {
    "@iconify-json/mdi": "^1.1.66",
    "@nuxt/content": "^2.12.1",
    "@unocss/nuxt": "^0.61.0",
    "nuxt": "^3.12.2",
    "vuetify-nuxt-module": "^0.14.1"
  }

[owljacob]

What are the values of link.title and link.icon? Did you check?

[GreyXor]

What are the values of link.title and link.icon? Did you check?

Hello, yes, link.title and link.icon have the good value", as expected it's working, and link.icon is correctly i-mdi:home. and i-mdi:home is a working icon. You can have a look here :

---
navigation:
  title: 'i-mdi:home'
  icon: 'i-mdi:home'
---

# Dashboard

But if I set the icon directly like this

  <v-list nav>
    <v-list-item title="Dashboard" prepend-icon="i-mdi:home" to="/" />
  </v-list>

[owljacob]

Please, try to use i-mdi-home or mdi-home instead.

What are the values of link.title and link.icon? Did you check?

Hello, yes, link.title and link.icon have the good value", as expected it's working, and link.icon is correctly i-mdi:home. and i-mdi:home is a working icon. You can have a look here :

---
navigation:
  title: 'i-mdi:home'
  icon: 'i-mdi:home'
---

# Dashboard

But if I set the icon directly like this

  <v-list nav>
    <v-list-item title="Dashboard" prepend-icon="i-mdi:home" to="/" />
  </v-list>

[GreyXor]

Please, try to use i-mdi-home or mdi-home instead.

Thank you, but it doesn't work either.

[GreyXor]

I've noticed that if (in dev) I replace :prepend-icon="link.icon" with prepend-icon="mdi-home". then it works, and if I put back (still in the same dev session) :prepend-icon="link.icon". then it still work. It's as if the SSR icon didn't exist because it wasn't "generated".

[farnabaz]

This might related to how unocss scanner acts and detects the icon names.

/cc @antfu What do you think about this issue?

[antfu]

UnoCSS detects usages via the transform pipeline, where in Nuxt Content, the content doesn't go into the bundler transform processor. Thus you will need to configure UnoCSS to scan from fs explicitly: https://unocss.dev/guide/extracting#extracting-from-filesystem

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.