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

1.安装相关包

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

npm下载包

javascript 复制代码

npm i vite-plugin-svgr

vite.config.ts文件内：

javascript 复制代码

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

2.封装Icon组件

Icon.tsx文件内：

javascript 复制代码

// 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 (
            <Iconfont
                type={`${name}`}
                className={className}
                style={{
                    fontSize: `${size}px`,
                    color,
                    ...style
                }}
                {...rest}
            />
        );
    }

    // @ts-ignore
    const SvgIcon = svgList[name];

    return SvgIcon ? (
        <SvgIcon
            width={size}
            height={size}
            fill={color || 'currentColor'}
            classNa me={className}
            style={{
                verticalAlign: '-0.25em',
                ...style
            }}
            {...rest}
        />
    ) : null;
};
export default Icon

另外，这个地方可能类型验证会报错

import SearchIcon from '../../assets/icons/menu/search.svg?react';

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

javascript 复制代码

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

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

3.使用Icon组件

在其他组件内：

javascript 复制代码

import Icon from '../../Icon'
//....
<Icon type={'iconfont'} name={'icon-weibo'}></Icon>
<Icon type={'svg'} color={'#fff'} size={14} name={'search'}></Icon>