Varlet Icon Builder: Fast Creation of Enterprise Icon Libraries with Vue and React Support

The author, known as varlet (https://github.com/varletjs/varlet), celebrates three years of the open‑source Varlet component library and its related tools, including the Varlet CLI, which many companies now use as a foundation for building component libraries.

This guide presents a new toolchain that lets developers quickly set up an internal or open‑source icon library for Varlet. A starter template (https://github.com/varletjs/varlet-icons-library-starter) is provided to accelerate onboarding.

Features include conversion of SVG icon sets to Vue 3, React, and both ESM/CJS modules; generation of web‑font files; automatic import of icon components; a built‑in theme preview site; Figma document extraction; and publishing utilities for npm, git, and changelog generation.

Usage examples :

import '<packageName>/svg-fonts/css/i-icons.css'

Vue component usage:

<script setup>
import { XIcon, AccountCircleOutline } from '<packageName>'
</script>

<template>
  <x-icon>
    <account-circle-outline />
  </x-icon>
  <x-icon color="red" :size="30">
    <account-circle-outline />
  </x-icon>
</template>

React component usage:

import { XIcon, AccountCircleOutline } from '<packageName>'

function Demo() {
  return (
    <>
)
}

The tool also generates a resolver for unplugin-vue-components , enabling automatic component import via Vite:

// vite.config.ts
import components from 'unplugin-vue-components/vite'
import XIconResolver from '<packageName>/resolver'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    components({
      resolvers: [XIconResolver()]
    })
  ]
})

Framework support : Vue 3 is the default compilation target. To generate React components, add a framework: 'react' option in the configuration:

// vi.config.ts
import { defineConfig } from '@varlet/icon-builder'

export default defineConfig({
  name: 'i-icons',
  namespace: 'i',
  fontFamilyClassName: 'i',
  output: './svg-fonts',
  generate: {
    framework: 'react'
  }
})

Package.json peer dependencies should be adjusted accordingly (replace Vue with React):

{
  "peerDependencies": {
    "unplugin-vue-components": "^0.27.0",
    "react": "^18.3.1"
  }
}

Figma integration allows automatic extraction of SVG icons. The steps are:

Create a Figma file with a page named Icons and note its file ID.

Obtain a Figma access token (see https://www.figma.com/developers/api#authentication).

Set the token and file ID in the script (preferably via CI environment variables).

// package.json
"scripts": {
  "icons:figma": "VI_FIGMA_TOKEN=
vi figma -f
"
}

For continuous updates, teams can configure a Figma webhook so that any design change automatically triggers a CI build of the icon library.

Core CLI commands :

pnpm dev – start the icon site in development mode.

pnpm build – build the theme preview site.

pnpm preview – preview the built site.

pnpm icons:build – generate web‑font files.

pnpm icons:generate – create icon components and ESM/CJS modules.

pnpm icons:figma – fetch all SVG files from a Figma document.

pnpm release – publish the theme library.

For further information, see the related repositories: Varlet component library (https://github.com/varletjs/varlet) and the starter template (https://github.com/varletjs/varlet-icons-library-starter).