【React】在项目中使用阿里图标库

文章目录

  1. 打开阿里图标库 ==》 选择相应图标项目

  2. 选择Symbol格式,并复制链接

  1. 基于antd新建一个JS文件 MyIcon.js,并绑定上面复制的链接
js 复制代码
import { createFromIconfontCN } from '@ant-design/icons';

// 图标有更新时,需更新下面图标链接
export const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/c/font_4427318_zv4a7bz2oo.js',
});
  1. 在项目中使用,先复制好图标代码,例如icon-add-file
  1. 将图标代码绑定到type
js 复制代码
import { MyIcon } from '@/components/MyIcon';

export default function(){

	return (
		<MyIcon type="icon-add-file" style={{ fontSize: '15px' }} />
	)
}
相关推荐
yannick_liu5 分钟前
nuxt4 + nuxt-swiper实现官网全屏播放
前端
苏打水com7 分钟前
JS基础事件处理与CSS常用属性全解析(附实战示例)
前端
W.Y.B.G9 分钟前
JavaScript 计算闰年方法
开发语言·前端·javascript
渣哥17 分钟前
你以为只是名字不同?Spring 三大注解的真正差别曝光
javascript·后端·面试
小六路18 分钟前
可以横跨时间轴,分类显示的事件
前端·javascript·vue.js
SuperherRo19 分钟前
JS逆向-安全辅助项目&JSRpc远程调用&Burp插件autoDecode&浏览器拓展V_Jstools(上)
javascript·安全·项目
比老马还六27 分钟前
Blockly文件积木开发
前端
Nayana35 分钟前
Element-Plus源码分析--form组件
前端
Bellafu66637 分钟前
selenium对每种前端控件的操作,python举例
前端·python·selenium
littleboyck1 小时前
VSCode 全自动调试Vue/React项目
前端·visual studio code