react引入iconfont的svg图标

react引入iconfont的svg图标

本文目录

普通图标

通过link引入css
复制代码
<link rel="stylesheet" href="/src/assets/iconfont/iconfont.css">
组件内引入css
复制代码
import "@/assets/iconfont/iconfont.css";
使用
复制代码
<i className="iconfont icon-zhuye"></i>

svg图标

通过script引入js

index.html引入js文件

复制代码
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <script src="/src/assets/iconfont/iconfont.js"></script>
  </body>
组件内引入js
复制代码
import "@/assets/iconfont/iconfont.js"
使用
复制代码
import "./about.css";

<svg className="icon" aria-hidden="true">
  <use xlinkHref="#icon-zhuye1"></use>
</svg>

/* about.css */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

通过封装组件

自定义封装
复制代码
import React from 'react';
import "@/assets/iconfont/iconfont.js"
import './about.css';

// 定义Props接口
interface SvgIconProps {
  icon: string; // 必须的属性
  color?: string; // 可选属性
  size?: string | number; // 可以是字符串或数字
  className?: string; // 可选字符串
  style?: React.CSSProperties; // React内置的CSSProperties类型用于样式对象
  svgClass?: string; // 用于额外的SVG CSS类
}

class SvgIcon extends React.Component<SvgIconProps> {
    static defaultProps: Partial<SvgIconProps> = {
        size: '2.67em', // 默认大小
        svgClass: 'svg-icon' // 默认SVG类名
    }

    render() {
        const { svgClass, className, style, color, size, icon } = this.props;
        const iconSize = typeof size === 'number' ? `${size}em` : size;
        const iconName = `#icon-${icon}`; // 构建用于<use>标签的href属性值

        return (
            <svg className={`${svgClass} ${className || 'icon'}`}
                 style={{ fill: color, width: iconSize, height: iconSize, ...style }}
                 aria-hidden="true">
                <use href={iconName}></use>
            </svg>
        );
    }
}

export default SvgIcon;
组件中调用
复制代码
import SvgIcon from './SvgIcon';

<SvgIcon icon="zhuye" size="24px" />

通过antd

封装

需要把iconfont放在public目录下,通过antd的createFromIconfontCNscriptUrl本质是通过网络资源get获取

复制代码
import { createFromIconfontCN } from '@ant-design/icons';
// import { icon } from '@/assets/iconfont/iconfont.js'

const IconFont = createFromIconfontCN({
    scriptUrl: '/public/iconfont/iconfont.js'
});
 
export default IconFont;
使用
复制代码
import IconFont from './IconFont';

<IconFont type="icon-zhuye" style={{ fontSize: '24px' }} />
相关推荐
恋猫de小郭14 分钟前
Flutter Riverpod 3.0 发布,大规模重构下的全新状态管理框架
android·前端·flutter
wordbaby15 分钟前
用 window.matchMedia 实现高级响应式开发:API 全面解析与实战技巧
前端·javascript
薄雾晚晴20 分钟前
Rspack 实战,构建流程升级:自动版本管理 + 命令行美化 + dist 压缩,一键输出生产包
前端·javascript
huabuyu24 分钟前
在 Taro 小程序中实现完整 Markdown 渲染器的实践
前端
Running_slave26 分钟前
位运算左移右移应该怎么玩?
前端·javascript·算法
晚星star26 分钟前
在 Web 前端实现流式 TTS 播放
前端·vue.js
huabuyu26 分钟前
基于 Taro 的 Markdown AST 渲染器实现
前端
薄雾晚晴27 分钟前
Rspack 性能优化实战:JS/CSS 压缩 + 代码分割,让产物体积直降 40%
前端·javascript
本末倒置18327 分钟前
前端面试高频题:18个经典技术难点深度解析与解决方案
前端·vue.js·面试
狗头大军之江苏分军1 小时前
Meta万人裁员亲历者自述:小扎尝到了降本的甜头
前端·后端·github