【若依】svgIcon组件使用指南

一、组件基础配置

1. SVG文件准备‌

• 将SVG图标文件存放于src/assets/icons/svg目录下，支持批量自动导入‌。
• 若需使用阿里图标库的SVG文件，需通过「批量去色」处理后下载，并手动存入上述目录‌。

2. 构建工具配置

• ‌Vue CLI项目‌：需在vue.config.js中添加svg-sprite-loader配置，确保Webpack正确处理SVG文件‌。
• ‌Vite项目‌：安装vite-plugin-svg-icons插件，并在vite.config.ts中配置iconDirs路径‌。

3. 全局组件注册

• 在src/assets/icons/index.js中导入并注册全局组件svg-icon，通过require.context自动导入所有SVG文件‌。

二、组件使用方式

1. 基础语法

<svg-icon icon-class="图标文件名（不含.svg后缀）" class-name="自定义CSS类名" />

• icon-class为必填项，对应SVG文件名‌（区分大小写）；
• class-name用于自定义样式（如调整颜色、大小）‌。

2. 示例

<svg-icon icon-class="password" class-name="text-blue-500 w-6 h-6" />