How do I use Phosphor Icons with VerticalNavigation Nuxt UI Component

[brazen oxide]

Ref: https://ui.nuxt.com/navigation/vertical-navigation

So, I am trying to use Phosphor icons from Iconify, and I noticed I can't get any of them to load. So, I tried a heroicon as per the example on that nuxt UI reference link above, and it worked.

So, I asked Phind Ai if it supports more than just "heroicons" and the answer it gave is "it supports hero icons and simple icons", and that if I want to add support for more icons, I should build a custom vertical navigation component, and it specifically recommended against extending the Vertical Navigation UI Component.

Am I missing something? Is there a way to use Phosphor icons in the Vertical Navigation component? If, so, how?

I'm using Windows 11 Pro 64bit, Tauri v1.5.9, Vue v3.4.15, Nuxt v3.9.3, TailwindCSS v3.4.1, Typescript

[brazen cape]

It's not related to vertical navigation specifically but to the module config
You have to add your icons collections to the module config and install them.
Then the icon will show up
https://ui.nuxt.com/getting-started/theming#collections

defineNuxtConfig({
// Add all icons collections you want to use
ui: { icons: ['heroicons', 'phosphor'] 
})

[brazen oxide]

Hi @merry juniper

I believe I tried something like that earlier.

This is the error I receive when I try to add that:

[{
    "resource": "/d:/Users/neilv/Documents/GitHub/Media-Re-Kebab-Nuxt/nuxt.config.ts",
    "owner": "typescript",
    "code": "2322",
    "severity": 8,
    "message": "Type '\"phosphor\"' is not assignable to type '\"material-symbols\" | \"material-symbols-light\" | \"ic\" | \"mdi\" | \"ph\" | \"solar\" | \"tabler\" | \"mingcute\" | \"ri\" | \"bi\" | \"carbon\" | \"iconamoon\" | \"iconoir\" | \"ion\" | \"lucide\" | \"uil\" | ... 145 more ... | \"pepicons\"'.",
    "source": "ts",
    "startLineNumber": 2,
    "startColumn": 30,
    "endLineNumber": 2,
    "endColumn": 40
}]

[brazen cape]

yeah that's because its name is ph and not phosphor. It's confusing and I myself did it in the example above

[brazen oxide]

retrying now 🙂

const links = [
  {
    label: "Media Kitchen",
    icon: "i-ph-house-thin",
    to: "/media-kitchen",
  },

it works!

Thank you so much!

[brazen cape]

No problem glad it worked 😁

[merry juniper]

You tagged me above 😂

[brazen oxide]

Lol oops sorry

[brazen cape]

I noticed it then because we have the same name 😂