@vup/iconfont Icon Component

Universal Iconfont component and resource package, providing a unified icon font solution with support for custom icon resources.

Technical Stack

• Iconfont - Alibaba icon library
• Vue 3 - Progressive JavaScript framework
• TypeScript - Type safety

Quick Start

Installation

pnpm add @vup/iconfont

Component Usage

Import and use directly in components:

<script setup lang="ts">
import { VIconFont } from '@vup/iconfont';
</script>

<template>
  <VIconFont name="icon-add" />
  <VIconFont name="icon-delete" size="24" color="#4096ff" />
</template>

Global Registration

After global registration in the application entry file, you don't need to import separately in business components:

import { createApp } from 'vue';
import App from './App.vue';
import { VIconFont } from '@vup/iconfont';

const app = createApp(App);
app.component('VIconFont', VIconFont);
app.mount('#app');

After global registration, you can use it directly in any component:

<template>
  <VIconFont name="icon-home" />
</template>

Component API

Props

Parameter	Description	Type	Default
name	Icon name (corresponds to class name in iconfont.css)	string	-
size	Icon size	string | number	16
color	Icon color	string	inherit

Usage Examples

<template>
  <div class="icon-demo">
    <!-- Basic usage -->
    <VIconFont name="icon-add" />

    <!-- Custom size -->
    <VIconFont name="icon-edit" size="24" />
    <VIconFont name="icon-delete" :size="32" />

    <!-- Custom color -->
    <VIconFont name="icon-success" color="#52c41a" />
    <VIconFont name="icon-error" color="#f5222d" />

    <!-- Combined usage -->
    <VIconFont name="icon-user" size="20" color="#1677ff" />
  </div>
</template>

<script setup lang="ts">
import { VIconFont } from '@vup/iconfont';
</script>

Replace Custom Icon Resources

You can directly replace files in the following directory (keeping file names consistent):

packages/iconfont/src/assets/
  ├─ iconfont.css
  ├─ iconfont.woff
  ├─ iconfont.woff2
  └─ iconfont.ttf

Replacement Steps

1. Create project and add icons on Iconfont website

   • Visit Iconfont website
   • Create a project and add required icons
   • Download font files

2. Replace files

   • Replace downloaded font files to packages/iconfont/src/assets/ directory
   • Keep file names consistent: iconfont.css, iconfont.woff, iconfont.woff2, iconfont.ttf

3. Check paths

   • Ensure font file paths in iconfont.css use relative paths (e.g., ./iconfont.woff2)
   • Component style import paths should match actual files

Example: Replace Icon Resources

# 1. Download font files from Iconfont
# 2. Replace files
cp ~/Downloads/iconfont.css packages/iconfont/src/assets/
cp ~/Downloads/iconfont.woff packages/iconfont/src/assets/
cp ~/Downloads/iconfont.woff2 packages/iconfont/src/assets/
cp ~/Downloads/iconfont.ttf packages/iconfont/src/assets/

Directory Structure

packages/iconfont/
  ├─ src/
  │  ├─ iconfont/
  │  │  ├─ VIconFont.vue    # Icon component
  │  │  └─ types.ts          # Type definitions
  │  ├─ assets/
  │  │  ├─ iconfont.css      # Icon style file
  │  │  ├─ iconfont.woff     # Font file
  │  │  ├─ iconfont.woff2    # Font file (recommended)
  │  │  └─ iconfont.ttf      # Font file
  │  └─ index.ts             # Export file
  ├─ package.json
  └─ tsconfig.json

Usage Scenarios

Using Icons in Buttons

<template>
  <VButton>
    <VIconFont name="icon-add" />
    Add
  </VButton>
</template>

Using Icons in Menus

<template>
  <VMenu>
    <VMenuItem>
      <VIconFont name="icon-home" />
      Home
    </VMenuItem>
    <VMenuItem>
      <VIconFont name="icon-user" />
      User
    </VMenuItem>
  </VMenu>
</template>

Dynamic Icons

<template>
  <VIconFont :name="iconName" :size="iconSize" :color="iconColor" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VIconFont } from '@vup/iconfont';

const iconName = ref('icon-home');
const iconSize = ref(20);
const iconColor = ref('#1677ff');
</script>

Notes

• Icon names must match class names defined in iconfont.css (remove .icon- prefix)
• If icons don't display, check if font file paths are correct
• It's recommended to use woff2 format for better performance and compatibility
• After replacing icon resources, you need to rebuild the project for changes to take effect

Related Resources

• Iconfont Website
• Vue 3 Official Documentation