【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>
相关推荐
zwjapple20 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
伍哥的传说3 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python