dw个人网站制作教程,深圳营销型网站建,大良营销网站建设特色,大型网站建设定制react引入iconfont的svg图标 本文目录 react引入iconfont的svg图标普通图标通过link引入css组件内引入css使用 svg图标通过script引入js组件内引入js使用 通过封装组件自定义封装组件中调用 通过antd封装使用 普通图标
通过link引入css
link relstylesheet h…react引入iconfont的svg图标 本文目录 react引入iconfont的svg图标普通图标通过link引入css组件内引入css使用 svg图标通过script引入js组件内引入js使用 通过封装组件自定义封装组件中调用 通过antd封装使用 普通图标
通过link引入css
link relstylesheet href/src/assets/iconfont/iconfont.css组件内引入css
import /assets/iconfont/iconfont.css;使用
i classNameiconfont icon-zhuye/isvg图标 通过script引入js
在index.html引入js文件
html langenhead.../headbodydiv idroot/divscript typemodule src/src/main.tsx/scriptscript src/src/assets/iconfont/iconfont.js/script/body组件内引入js
import /assets/iconfont/iconfont.js使用
import ./about.css;svg classNameicon aria-hiddentrueuse 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.ComponentSvgIconProps {static defaultProps: PartialSvgIconProps {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-hiddentrueuse href{iconName}/use/svg);}
}export default SvgIcon;组件中调用
import SvgIcon from ./SvgIcon;SvgIcon iconzhuye size24px /通过antd
封装
需要把iconfont放在public目录下通过antd的createFromIconfontCNscriptUrl本质是通过网络资源get获取
import { createFromIconfontCN } from ant-design/icons;
// import { icon } from /assets/iconfont/iconfont.jsconst IconFont createFromIconfontCN({scriptUrl: /public/iconfont/iconfont.js
});export default IconFont;使用
import IconFont from ./IconFont;IconFont typeicon-zhuye style{{ fontSize: 24px }} /
