【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/Icon.tsx
import React from 'react';
import { createFromIconfontCN } from '@ant-design/icons';

// 1. 静态导入所有SVG图标（注意后面要加?react）
import 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

另外， 这个地方可能类型验证会报错
import SearchIcon from '../../assets/icons/menu/search.svg?react';

如果不想爆红，可以同目录下新增一个名为type.d.ts的文件：

declare module '*.svg?react' {
    import React from 'react';
    const ReactComponent: React.FC>;
    export default ReactComponent;
}

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

3.使用Icon组件

在其他组件内：

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