【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' }} />
	)
}
相关推荐
溯水流光几秒前
React 源码解析
前端
Aomnitrix2 分钟前
知识管理新范式——cpolar+Wiki.js打造企业级分布式知识库
开发语言·javascript·分布式
光影少年4 分钟前
Typescript工具类型
前端·typescript·掘金·金石计划
北风GI8 分钟前
如何在 vue3+vite 中使用 Element-plus 实现 自定义主题 多主题切换
前端
月亮慢慢圆8 分钟前
网络监控状态
前端
_AaronWong13 分钟前
实现 Electron 资源下载与更新:实时进度监控
前端·electron
Doris_202314 分钟前
Python条件判断语句 if、elif 、else
前端·后端·python
Doris_202319 分钟前
Python 模式匹配match case
前端·后端·python
森林的尽头是阳光33 分钟前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
YiHanXii35 分钟前
React.memo 小练习题 + 参考答案
前端·javascript·react.js