What is Iconify? How to integrate Iconify into Vue . app

The best web app is actually a text and image gallery. In addition to the aesthetic feel that photos bring to web apps, they also provide visual cues and improve user engagement with the app.

Iconify is an icon framework that provides a large-scale SVG icon collection from various icon packs, including Bootstrap and Material Design icons. Iconify supports various front-end JavaScript frameworks, making it a flexible solution for adding icons to web applications.

How to integrate Iconify in Vue . apps

You can leverage Iconify in Vue apps using the @iconify/vue npm package . This package integrates Vue for the Iconify icon framework.

@iconify/vue provides a seamless solution for using icons in Vue apps. This package allows you to quickly add and customize icons in your project. To install @iconify/vue in your Vue application, run the following npm command in the terminal of the application root directory.

npm install --save-dev @iconify/vue

This command installs the @iconify/vue package which is a development dependency in a Vue application.

This package will only work for the 3 apps that you need to track in this example. This package does not support Vue 2 apps. However, to use Iconify in Vue 2, simply run the following npm command:

npm install @iconify/vue2

Since Vue 2 is no longer supported as of December 31, 2023, you should learn how to use Vue 3 and its features. This ensures you are always up to date with the latest & relevant information in the Vue community.

How to add an icon to a Vue . component

You can add icons by importing the Icon component from the package in the Vue component. To add an icon, paste the following code in the Vue component's command block:

After this step, you can access all icons in Iconify library. To add icons, go to Iconify web. When navigating the web, you will enter the name of the icon needed in the application.

The following image shows the search results for the check icon.

You can then select the required check icon style by clicking on the icon. You can customize the icon further in the Color , Size , Flip and Rotate fields .

With the above fields, you can choose the color, size, position and orientation for the icon. Then, use the icon in your Vue app by copying the component's code on the web page.

The above code block sets the color of the icon to red. It also defines the height and width of each side as 500 pixels.

Previewing the application, you will see an image similar to the image below:

Although, adding icons to the application using the @iconify/vue package is usually simple, but sometimes it still throws an error. Some common problems include prerendering errors, error messages in the DOM, and Vue not rendering the appropriate element.

These problems arise due to the time of the component mounting process associated with loading the icon. You can work around this with the unplugin-icons library .

Add icons to the unplugin-Icons . library

The unplugin-icons library provides an error-free alternative to importing and using icons directly in your templates.

The icon integration method for handling errors is highlighted by @iconify/vue , ensuring Vue automatically includes each icon you use into the accompanying app.

To get started with the unplugin-icons library , open a terminal and install the library by running the following npm command:

npm install unplugin-icons

Once installed, you need to configure the build tool. Vue 3 uses Vite as its build tool. Go to vite.config.js and configure this file so that it looks exactly like the code block below:

import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import Icons from 'unplugin-icons/vite'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue(), Icons()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } })

The above code block describes the Vite configuration file. This code imports the Icons plugin from unplugin-icon/vite . This block of code then sets Icons as a plugin in the plugins array .

You can install the entire icon to maximize the selection of the icon. To install all icon files, run the following npm command in the terminal of the application directory:

npm i -D @iconify/json

This code installs all available icon sets for Iconify. The installation size of this package is about 200 MB. You can also install only a specific set of icons, instead of all of them, to reduce package size:

npm i -D @iconify-json/ph

The above code only installs the icon from the Phosphor icon set, which Iconify denotes by ph .

Once installed, you can import this icon component into your Vue app. You must enter the icon name according to the ~icons/{set}/{iconName} convention to use the icons in the element.

The description of the symbol input convention is as follows:

1. ~icons : Icons only path
2. { set } : Icon collection only
3. { iconName } : Indicates the name of the icon in the kebab-case.

Example showing the input component and using the CheckFill icon :

This code shows how to enter icon names according to the convention ~icons/ph/check-fill . In addition, it also imports the CheckFill icon component from the Phosphor icon set . It then sets the element's color, width, and height properties in the Vue template.

Previewing the application from the above code block will give the same result as the image you saw earlier.

Iconify is a valuable library for apps created with Vue because it allows you to easily integrate it into your app's interface. Iconify's large icon library provides better customization options for your apps.

Isabella Humphrey

Update 03 August 2023