【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>
相关推荐
海在掘金6112716 小时前
从"万能函数"到"精准工具":泛型如何消除重复代码
前端
云心雨禅16 小时前
DNS工作原理:从域名到IP
运维·前端·网络协议·tcp/ip·github
Dorian_Ov016 小时前
Mybatis操作postgresql的postgis的一些总结
前端·gis
Moshow郑锴17 小时前
从 “瞎埋点” 到 “精准分析”:WebTagging 设计 + 页面埋点指南(附避坑清单)
前端
非凡ghost17 小时前
PixPin截图工具(支持截长图截动图) 中文绿色版
前端·javascript·后端
૮・ﻌ・17 小时前
Vue2(一):创建实例、插值表达式、Vue响应式特性、Vue指令、指令修饰符、计算属性
前端·javascript·vue.js
半生过往18 小时前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
程序员包打听18 小时前
Vitest 4.0 重磅发布:Browser Mode 正式稳定,前端测试进入新纪元
前端
BumBle18 小时前
UniApp 多页面编译优化:编译时间从10分钟到1分钟
前端
星链引擎18 小时前
大语言模型的技术突破与稳定 API 生态的构建
前端