Integrations

Nuxt Icon

1. About Nuxt Icon

Nuxt Icon is a module that allows you to use icons in your Nuxt project. It is built on top of the native <Icon> tag and provides a set of directives to optimize icons. Here are some features of Nuxt Icon:

  • Nuxt 3 ready
  • SSR friendly
  • Support 200,000 open-source vector icons via Iconify
  • Support both CSS mode / SVG mode
  • Custom SVG support (via Vue component, or via local SVG files)
2. Usage

Nexus AI uses mainly heroicons icons. You can learn more about Nuxt Icon here.

Here is an example of how Nexus AI uses Nuxt Icon:

<Icon name="heroicons:inbox-stack" size="16px" />

As you can see, we use name attribute to specify the icon name and size attribute to specify the icon size. You can also use class attribute to specify the icon class.

If you want to use other icon libraries from Iconify, then simply replace heroicons with the name of the icon library.

Browse through Iconify to find more icons.

Nuxt Studio
Nuxt Image

© 2024 Stylokit. All rights reserved.