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' }} />
相关推荐
brzhang3 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in4 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课6 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登7 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
蓝婷儿7 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl