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' }} />
相关推荐
遂心_5 分钟前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit6 分钟前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言
龙在天11 分钟前
ts中的函数重载
前端
卓伊凡27 分钟前
非常经典的Android开发问题-mipmap图标目录和drawable图标目录的区别和适用场景实战举例-优雅草卓伊凡
前端
前端Hardy27 分钟前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy29 分钟前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼41 分钟前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
我是天龙_绍42 分钟前
🔹🔹🔹 vue 通信方式 eventBus
前端
一个不爱写代码的瘦子1 小时前
迭代器和生成器
前端·javascript
拳打南山敬老院1 小时前
漫谈 MCP 构建之概念篇
前端·后端·aigc