【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>
相关推荐
灵感__idea6 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴7 小时前
Mix
前端·webgl
代码续发7 小时前
前端组件梳理
前端
试图让你心动8 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码8 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记8 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏8 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数9 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante9 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam9 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript