图标
WARNING
请勿使用 Unicode 引用图标（或者它的变体 font-class 引用），因为它不支持彩色图标，需要引入字体文件，使用方式复杂且文件较大，涉及到图标请使用 SVG 图片。
为什么使用 SVG？
- 支持多色图标。
- 矢量可无限缩放。
- 无兼容性问题。
- 轻量级，文件小。
- 支持像字体那样，通过 font-size，color 来调整样式。
ant design 图标
想要使用 Ant Design Icons 提供的图标，在项目中可以直接使用：
tsx
import {
HomeOutlined,
SettingFilled,
SmileOutlined,
} from "@ant-design/icons";
// <HomeOutlined />
// <SettingFilled />
// <SmileOutlined />更多图标请查看 Ant Design Icons 官网。
SVG 插件
推荐安装 VSCode 插件 —— jock.svg，可以方便的本地预览和编辑 SVG 文件。
SVG 作为图标？
使用了优秀的 svgr 来为项目赋能，默认开启了压缩，安装以下插件即可使用：
- vite-plugin-svgr
@svgr/plugin-jsx和@svgr/plugin-svgo
所有的图标放在 src/icons 目录下，在 svg 文件中放入 svg 源文件，然后在 icons/index.tsx 文件中导出即可使用。
tsx
// 导出图标
import Icon from "@ant-design/icons";
import Moon from "./svg/moon.svg?react";
export function MoonIcon(props: Partial<CustomIconComponentProps>) {
return <Icon component={Moon} {...props} />;
}其他文件中使用这个图标：
tsx
import { FollowSystemIcon, MoonIcon, SunIcon } from "#src/icons";
// 图标自动响应设置的字体和文字颜色
// <MoonIcon className="text-xl" />SVG 作为图片？
假如一个 svg 文件不是图标，仅仅作为图片使用，可以把这个文件放在在 src/assets/svg 目录下，那么在代码中这样使用：
作为组件使用
tsx
import Logo from "#src/assets/svg/logo.svg?react";
// <Logo />作为 img 标签的地址
tsx
import logo from "#src/assets/svg/logo.svg?url";
// <img src={logo} alt="logo" />项目如何管理 SVG 图标？
推荐下面两个在线网站，UI 可以方便上传项目 SVG 文件，开发人员也可以方便下载：
为什么不使用图标精灵？
如果你喜欢图标精灵，那么可以使用 vite-plugin-svg-icons 插件来实现，但是这个插件需要手动配置，使用起来比较麻烦。
最重要的是，图标精灵使用方式也是以一个组件的方式，所以没必要引入图标精灵。
为什么不使用 iconify 图标？
iconify 是在线图标且是外网，第一次访问下载图标需要时间，所以第一次加载页面会闪动。，而且 iconify 是外链，万一外链挂了，图标就找不到了。正因为此，我们集成 iconify 到项目中。
但是非常推荐在 iconify 中寻找项目需要的图标，然后下载到本地使用，推荐第一个链接进行查找。