深入解析：【react+antd+vite】优雅的引入svg和阿里巴巴图标

1.安装相关包

由于是vite项目，要安装插件来帮助svg文件引入进来，否则会失败

npm下载包 

npm i vite-plugin-svgr

vite.config.ts文件内：

import svgr from "vite-plugin-svgr";//...export default defineConfig({  plugins: [react(),svgr({    svgrOptions: {      icon: true,  // 自动转换为 1em 基准尺寸      replaceAttrValues: { currentColor: '{props.color}' } // 支持颜色动态传递    }  })],})

2.封装Icon组件

Icon.tsx文件内：

// src/components/BiliIcon.tsximport React from 'react';import { createFromIconfontCN } from '@ant-design/icons'; // 1. 静态导入所有SVG图标（注意后面要加?react）// @ts-ignoreimport SearchIcon from '../../assets/icons/menu/search.svg?react'; // 图标映射表const svgList = {    search: SearchIcon,} ; // 2. 阿里云图标库配置 (去阿里巴巴图标库自行生成symbol 引用的在线链接)const Iconfont = createFromIconfontCN({    scriptUrl: '//at.alicdn.com/t/c/xxxxxx.js'    }); // 3. 类型定义 type SvgIconName = keyof typeof svgList; interface IconProps {    name:SvgIconName|`icon-${string}`;    type:'svg'|'iconfont'    size?: number | string;    color?: string;    className?: string;    style?: React.CSSProperties;}  // 4. 主图标组件  const Icon = (props: IconProps) => {    const { type = 'svg', name, size = 20, color, className, style, ...rest } = props;     if (type === 'iconfont') {        return (                    );    }     // @ts-ignore    const SvgIcon = svgList[name];     return SvgIcon ? (            ) : null;};export default Icon

注意要自己去阿里巴巴图标库内生成在线链接哦，这个链接的稳定性不做担保，所以最好就个人项目用用吧。

3.使用Icon组件

在其他组件内：

import Icon from '../../Icon'//....