Vant 组件按需自动引入与多方案图标集成

方案简介

该配方解决移动端模板中组件库与图标的引入效率问题。全量引入 Vant 组件库太过臃肿，模板使用 unplugin-vue-components 插件进行按需自动引入组件；同时集成多种图标方案：推荐 Iconify 图标（数量超过 20 万），并提供本地 SVG 文件图标方案。由于项目使用了 unplugin-vue-components 自动引入组件，main.ts 中无需注册全局图标组件。

组成与分工

• Vant：移动端组件库，配合 unplugin-vue-components 按需引入避免臃肿
• unplugin-vue-components：构建时自动扫描并按需引入组件，免去手动注册
• Iconify：图标库（Iconify for Vue 封装为 i-icon 组件），支持在线 API 与离线图标集两种用法

实施步骤

1. Vant 按需引入

使用 unplugin-vue-components 插件进行按需自动引入组件，可通过官方文档了解更多。

2. Iconify 在线用法

基于 Iconify 图标集网站获取图标名称后填入 i-icon 组件的 icon 属性：

vue

3. Iconify 离线用法（内网环境）

安装图标对应的图标集依赖包：

shell
pnpm i -D @iconify-icons/fa6-solid

引入图标 data 赋值给 icon 属性：

ts
import Fa6SolidHeart from '@iconify-icons/fa6-solid/heart'

4. 本地 SVG 图标

将 svg 图标文件放在 src/icons/svg 目录下，使用 即可。

注意事项与常见问题

• 方法⑴是通过 Iconify API 按需请求获取图标，如果项目仅在内网环境部署，可通过方法⑵离线使用图标
• 依赖包名规则：@iconify-icons/[图标集]；图标路径规则：@iconify-icons/[图标集]/[图标名]
• 项目中使用了 unplugin-vue-components 自动引入组件，所以 main.ts 中无需注册全局图标组件
• 配合 VS Code 编辑器扩展可在编码时实时预览图标

优缺点

• ✓ 组件按需自动引入，无需手动注册
• ✓ 图标数量超过 20 万
• ✕ Iconify API 按需请求，内网需

出处

本方案挖掘自开源项目 yulimchen/vue3-h5-template，方案内容与实施命令均来自其 README 原文。