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' }} />
相关推荐
斯~内克4 小时前
Electron 菜单系统深度解析:从基础到高级实践
前端·javascript·electron
数据知道4 小时前
【YAML】一文掌握 YAML 的详细用法(YAML 备忘速查)
前端·yaml
dr李四维4 小时前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数
旭久5 小时前
react+antd中做一个外部按钮新增 表格内部本地新增一条数据并且支持编辑删除(无难度上手)
前端·javascript·react.js
windyrain5 小时前
ant design pro 模版简化工具
前端·react.js·ant design
浪遏5 小时前
我的远程实习(六) | 一个demo讲清Auth.js国外平台登录鉴权👈|nextjs
前端·面试·next.js
GISer_Jing5 小时前
React-Markdown详解
前端·react.js·前端框架
太阳花ˉ5 小时前
React(九)React Hooks
前端·react.js
拉不动的猪7 小时前
vue与react的简单问答
前端·javascript·面试