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

文章目录

  1. 打开阿里图标库 ==》 选择相应图标项目
    在这里插入图片描述

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

在这里插入图片描述

  1. 基于antd新建一个JS文件 MyIcon.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
import {
    MyIcon } from '@/components/MyIcon';

export default function(){
   

	return (
		<MyIcon type="icon-add-file" style={
   {
    fontSize: '15px' }} />
	)
}

相关推荐

  1. React使用动态图标

    2024-01-31 18:54:02       41 阅读
  2. ReactReact项目是如何使用Redux的?

    2024-01-31 18:54:02       21 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-31 18:54:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-31 18:54:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-31 18:54:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-31 18:54:02       20 阅读

热门阅读

  1. oracle http使用实例

    2024-01-31 18:54:02       31 阅读
  2. Python异常处理与调试

    2024-01-31 18:54:02       34 阅读
  3. ES面试题合集

    2024-01-31 18:54:02       33 阅读
  4. python数据生成excel文件实现

    2024-01-31 18:54:02       33 阅读
  5. K210 UART串口通信介绍与 STM32通信

    2024-01-31 18:54:02       32 阅读
  6. 【FINS5513】Financial Excel

    2024-01-31 18:54:02       43 阅读
  7. 面试 CSS 框架八股文十问十答第二期

    2024-01-31 18:54:02       38 阅读
  8. 设计模式——单例模式

    2024-01-31 18:54:02       41 阅读
  9. 部署mongodb服务

    2024-01-31 18:54:02       31 阅读