Rapid Icon Library Toolchain for Vue and React with Varlet

The author, haoziqaq, creator of the Varlet component library, introduces a new toolchain for quickly building internal or open‑source icon libraries, originally created for the Varlet official icon set.

Features include converting SVG icon sets into Vue 3 and React components, generating ESM/CJS modules, producing web fonts, supporting automatic component import via unplugin‑vue‑components, providing a built‑in icon preview site, fetching SVGs directly from Figma files, and offering release utilities for npm and git.

Icon usage examples show how to import the generated SVG font CSS and use font icons, as well as how to use the generated Vue and React components with optional color and size props.

Automatic component import is demonstrated by configuring vite.config.ts with unplugin-vue-components and the provided XIconResolver to auto‑import icon components.

Framework support defaults to Vue 3; to generate React components, set framework: 'react' in the configuration and adjust peer dependencies accordingly.

Fetching icons from Figma involves creating a Figma file named "Icons", obtaining its file ID and access token, and configuring the token in the script (recommended via CI environment variables).

CI integration can be achieved by using a Figma webhook to trigger rebuilds whenever designers update the icon library.

Core commands include pnpm dev (start preview site), pnpm build (build preview site), pnpm preview (preview mode), pnpm icons:build (build web font), pnpm icons:generate (generate components and modules), pnpm icons:figma (fetch SVGs from Figma), and pnpm release (publish the icon library).

The article concludes by encouraging readers to contribute via PRs, issues, or stars, and provides links to the Varlet component library and the icon library starter template repositories.