How to Use Icons

iconfont Icons

Simply import the IconFont component.

<template>
  <IconFont icon="xxxx"/>
</template>

Modify the iconfont.js file: Go to the iconfont official website, and find My Projects.

After selecting the corresponding project, click on the Symbol icon, then click the "Download to Local" button on the right to download the resource zip file.

Unzip the downloaded zip file, locate the iconfont.js file, and replace the existing iconfont.js file in your project.

TIP

VTS currently uses the Symbol format, but you can also choose other methods such as Unicode or Font Class. For more details, refer to the official help center.

iconify Icons

INFO

Iconify is a general icon library that allows you to load different icon sets using a unified API. It supports multiple frontend frameworks, including Vue, React, and Svelte.

Icones is an online icon search and preview tool based on Iconify, offering an intuitive interface to easily search and copy icons.

Relationship Between Iconify and Icones

• Iconify provides the icon API and allows these icons to be directly used in frontend projects.
• Icones is a UI tool that helps developers quickly find and copy icon names or SVG code from Iconify.
• Usage Process:
  1. Visit Icones
  2. Search for the desired icon
  3. Copy the icon name (e.g., mdi-light:home)

Using the icon:

<template>
  <!-- Directly use the icon component with the AutoIcon prefix -->
  <AutoIconMdiLightHome />

  <!-- Syntax: `i-icon-set:icon-name`, applying styles with Unocss/Tailwind Utility Class syntax -->
  <div class="i-mdi-light:home text-200px c-green"></div>
</template>

Preview: