A Guide to Using Nuxt Icon in Your Nuxt.js Application

Nuxt 3 icon module

When working on a project, the use of icons becomes crucial as they play a vital role in driving user engagement and enhancing overall website usability.

Icons serve as essential components within web applications, offering visual cues that elevate the user experience. In this comprehensive guide, we will delve into the integration of the ‘Nuxt Icon’ module into your Nuxt.js applications. This package grants you access to a vast library of over 100,000 pre-designed icons, harnessing the capabilities of Iconify. Leveraging the Nuxt icon library simplifies the process of adding icons to your project, providing a seamless and efficient solution.

The Advantages of Nuxt Modules for Customization in Your Application

The Nuxt icon package is a Nuxt.js module that presents several distinct benefits for developers. Nuxt modules champion modularity, streamlining code management and facilitating the seamless integration of new functionalities into Nuxt projects. This empowers developers to enhance their applications rapidly without the need to reinvent the wheel. Modules simplify customization and empower the incorporation of robust features such as authentication systems, SEO optimizations, and, as demonstrated in this tutorial, icons.

Furthermore, Nuxt modules streamline the process of updates and adhere to standardized approaches, promoting consistency throughout the development lifecycle.

Installation of the nuxt module

To begin, let’s install the “Nuxt Icon” module. Open your project’s terminal and execute the following command:

npm install --save-dev nuxt-icon

Alternatively, if you’re using yarn, run the following command:

yarn add --dev nuxt-icon

Nuxt project configuration

Once the package is installed, you need to configure your Nuxt.js application to utilize the “Nuxt Icon” module. In your nuxt.config.ts file, locate the modules array and add 'nuxt-icon' as a module:

import { defineNuxtConfig } from 'nuxt'

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

With the module installed and configured, we can now start using the <Icon /> component in our Vue components. The <Icon /> component accepts various props and attributes for customization.

Let’s explore some examples

  1. We can use use an Iconify dataset:
<Icon name="uil:github" color="black" />
  1. However, we are also not only limited to iconify icons. It is also posible to use use an emoji:
<Icon name="🚀" />
  1. Or use a Vue component:
<Icon name="NuxtIcon" />

(Note: Ensure that the NuxtIcon component is placed inside the components/global/ folder as demonstrated in the example.)

The configuration options:

The “Nuxt Icon” module provides additional configuration options to suit your project’s needs. Create an app.config.ts file and define the following options:

export default defineAppConfig({
  nuxtIcon: {
    size: '24px', // default <Icon> size applied
    class: 'icon', // default <Icon> class applied
    aliases: {
      'nuxt': 'logos:nuxt-icon',
    }
  }
})

You can modify the size and class properties to customize the default size and class of the <Icon /> component, respectively. Additionally, aliases can be defined to simplify icon swapping.

Working with render functions and icon module

For those working with render functions, the <Icon /> component can be used by importing it from the #components directory. Here’s an example:

<script setup>
import { Icon } from '#components'

const MyIcon = h(Icon, { name: 'uil:twitter' })
</script>

<template>
  <p><MyIcon /></p>
</template>

CSS Icons: The “Nuxt Icon” module offers experimental support for CSS icons. CSS Icons enables the use of CSS icons instead of SVG icons, which can improve performance and reduce DOM size. You can leverage CSS Masks and background color settings to achieve this. Here’s an example:

<template>
  <IconCSS name="uil:twitter" />
</template>

Please note, that CSS Masks have limited support, and you can refer to caniuse.com/css-masks for more information. Additionally, the icons will be loaded asynchronously via an HTTP request to the Iconify CDN.

Nuxt Icon video guide

If you want to learn from video, you can watch this instalation tutorial video, that show you a quick installation guide.

Leave a Comment

Your email address will not be published. Required fields are marked *