@element-plus/icons-vue

@element-plus/icons-vue packages the entire Element Plus icon set (roughly 295 SVG icons) as ready-to-use Vue 3 components, generated automatically from a shared packages/svg source directory in this monorepo. Each icon is exported as its own component (<House />, <Search />, <WarningFilled />, etc.) plus a ./global entry point that registers every icon globally on a Vue app in one call.

While built as the companion icon package for the Element Plus UI library, it works standalone in any Vue 3 project, and ships pre-built ESM/CJS/IIFE bundles along with full TypeScript types for each icon component.

What You Get

• Around 295 individually importable Vue 3 icon components (e.g. House, Search, WarningFilled) generated from the shared SVG source set
• A ./global entry point that registers every icon as a global Vue component in one app.use()-style call
• Pre-built ESM, CJS, and browser IIFE bundles (via unpkg/jsdelivr fields) alongside full TypeScript type declarations
• Tree-shakeable per-icon imports, so bundlers only include the icon components actually used

Common Use Cases

• Adding consistent iconography to a Vue 3 app already using the Element Plus component library
• Importing individual icon components on demand in a tree-shaken build to keep bundle size minimal
• Registering the full icon set globally in smaller apps or prototypes via the ./global import
• Using the icon SVGs directly (from the sibling packages/svg package) in non-Vue contexts like static builds or design tooling

Under The Hood

Architecture — The repository is a pnpm monorepo with two packages: packages/svg holds the ~295 raw SVG icon files as the single source of truth, and packages/vue’s build script (packages/vue/build/generate.ts) reads those SVGs and code-generates a corresponding Vue single-file/render-function component plus barrel exports (src/index.ts, src/global.ts) for each icon, which build.ts then bundles into the published dist/ outputs. Tech Stack — TypeScript and Vue 3 throughout, built with the project’s own build.ts/generate.ts scripts, linted with a shared @sxzz/eslint-config/@sxzz/prettier-config, type-checked via vue-tsc, and versioned across the workspace with bumpp. Code Quality — Because each icon component is generated deterministically from its SVG source rather than hand-written, the risk of per-icon bugs is low, and the codebase enforces eslint/prettier/vue-tsc checks; the visible test surface is thin (icon components are structurally simple), and recent GitHub activity is limited despite the package’s high download volume. API Design — Consumers import icons exactly like any other Vue component (import { Search } from '@element-plus/icons-vue') with no wrapper or configuration step, and the optional ./global entry trades tree-shaking for one-line convenience registration — a straightforward, low-friction API surface.