react引入iconfont的svg图标
本文目录
- react引入iconfont的svg图标
- 普通图标
- 通过link引入css
- 组件内引入css
- 使用
- svg图标
- 通过script引入js
- 组件内引入js
- 使用
- 通过封装组件
- 自定义封装
- 组件中调用
- 通过antd
- 封装
- 使用
普通图标
通过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' }} />
)
)
