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
Taskify uses mainly heroicons icons. You can learn more about Nuxt Icon here.
Here is an example of how Taskify 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.