当前位置：首页 > news >正文

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

news 来源：原创 2025/6/6 12:49:41

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.tsx
import React from 'react';
import { createFromIconfontCN } from '@ant-design/icons';// 1. 静态导入所有SVG图标（注意后面要加?react）
// @ts-ignore
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 (<Iconfonttype={`${name}`}className={className}style={{fontSize: `${size}px`,color,...style}}{...rest}/>);}// @ts-ignoreconst SvgIcon = svgList[name];return SvgIcon ? (<SvgIconwidth={size}height={size}fill={color || 'currentColor'}classNa me={className}style={{verticalAlign: '-0.25em',...style}}{...rest}/>) : null;
};
export default Icon

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

3.使用Icon组件

在其他组件内：

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