在 umi 项目优雅地使用 SVG 图标

项目初期，我们借助 svg-sprite-loader 实现 SVG 图标的加载，操作简便，仅需指定 name 即可。然而，随着图标数量的增加，维护变得异常困难，loader 会在页面上渲染所有图标，组件声明中也需指定 name，导致维护成本上升。

为解决这一问题，实现像 ant-design 样式的智能提示与按需引用，无需额外 webpack 配置，诞生了 umi-plugin-icons。安装插件后，仅需指定 SVG 文件路径，即可在项目中直接使用图标。

步骤如下：初始化 umi 项目并安装 umi-plugin-icons 插件，配置 .umirc.ts 或 config/config.ts 中的 icons 配置项。确保 svg 文件夹内包含 filled、outlined 文件夹，以兼容线性（outlined）与填充（filled）两种风格的图标，解决名称冲突问题。大部分图标采用 outlined 风格。

引入图标，名称为「图片名」+「风格名」，大写驼峰命名，如「LikeOutlined」。插件内置 @icons 别名与对应的 babel-plugin-import 配置，简化引入过程。同时，新增或修改 svg 文件时，插件可实时生成组件。

常见问题包括 classnames、@ant-design/colors 依赖找不到。解决方法是安装 antd 或直接安装这两个依赖。利用 umi-plugin-icons 提升项目中 SVG 图标的使用效率与体验。