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的createFromIconfontCN，scriptUrl本质是通过网络资源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' }} />