Nuxt•3mo ago

Is it possible to use a custom icon in NuxtUI "<UIcon />"?

I need to create a custom icon, I currently did it using an image but I would like to know if it is possible to add icons locally to my project that are not included in the https://icones.js.org/ packages

3 Replies

tobi•3mo ago

I think it's not possible as stated in the docs: You can use any name from the https://icones.js.org collection such as the i- prefix: Why not just creating a simple wrapper component for using your icon?

FoxForGate•3mo ago

I'm currently using it this way, but I was wondering if it wasn't possible to simply add new icons

saltytostitos•2mo ago

I'm using this way in nuxt.config (referencing svgs)

icon: {customCollections: [{ prefix: "local", dir: "./app/assets/icons" }]},

icon: {customCollections: [{ prefix: "local", dir: "./app/assets/icons" }]},

Then use

<UIcon name="local:filename" />

<UIcon name="local:filename" />

context: https://github.com/nuxt/icon?tab=readme-ov-file#custom-local-collections

GitHub

GitHub - nuxt/icon: The component, supporting Iconify, Emojis and ...

The component, supporting Iconify, Emojis and custom components. - nuxt/icon

Gaming

Programming

Is it possible to use a custom icon in NuxtUI "<UIcon />"?