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' }} />