Nuxt Icon - Simplify Your Nuxt 3 Project with Customizable Icons

Nuxt, the powerful framework for building Vue.js applications, offers a wide range of features to streamline the development process. One of these features is Nuxt Icon, which provides a straightforward way to incorporate customizable icons from Iconify into your Nuxt 3 projects. In this blog post, we will dive into the details of Nuxt Icon, learn how to use it effectively, and explore the available icon options.

Nuxt Icon is an official Nuxt.js module that integrates with popular icon libraries to simplify the inclusion and customization of icons in your Nuxt 3 project. It provides a convenient way to incorporate SVG icons and easily control their appearance without the need for manual configuration.

Getting Started with Nuxt Icon

To begin using Nuxt Icon, you'll need to install it as a dependency in your Nuxt 3 project. Open your terminal and navigate to your project directory. Run the following command:

npm install --save-dev nuxt-icon

Once the installation is complete, you can enable the module by adding it to your nuxt.config.ts file:

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-icon']
})

Using Nuxt Icon in Nuxt Project

Now we can use the <Icon> components in the nuxt project and it enables 100,000 open source vector icons via Iconify. Nuxt Icon also supports Emoji. The icons are loaded from the Iconify CDN by an http request and the icons won't be loaded on initial load.

Nuxt Icon Props and Attributes

There are two props for the nuxt icon:

• name: this is a required prop and can be icon name, emoji or global component name
• size: this is optional and default to icon size 1em

Since the nuxt icon create <svg>, all the svg attributes can be passed to this component. You can get all the attributes from mdb web docs

Override Default configurations of Nuxt Icon

The default size and class can be updated for the Nuxt Icon by creating an app.config.ts file. Here is an example of updating the default size to 32px and class to icon

// app.config.ts
export default defineAppConfig({
  nuxtIcon: {
    size: '32px', // default <Icon> size applied
    class: 'icon', // default <Icon> class applied
    
  }
})

Available Icon Libraries in Nuxt Icon

Unlike the older version of the nuxt icon based on nuxt 2, with this version you dont need to install any font libraries packages. All the icons available under the Iconify are open source and can be used directly with this packages. Below are some of the example of using the Nuxt Icon with popular icon libraries like font awesome, material design, ant design,

Nuxt Font Awesome Icons

<Icon icon="fa6-solid:bed" size="32px"/>

<Icon name='mdi:bed' size="32px" color="green"/>