antd使用阿里巴巴矢量图标

最近需要在antd引入中阿里矢量图标，看到几个关于antd使用iconfont的回答，其中关于Icon的引入，都是写的从antd引入

（不可用）旧版本：

import { Icon } from 'antd';

现在的版本中，4.0后版本，antd 不再内置 Icon 组件，而是从 @ant-design/icons 引入

直接使用 createFromIconfontCN 就可以

提前安装

npm install --save @ant-design/icons

配置

import {createFromIconfontCN} from '@ant-design/icons'const MyIcon = createFromIconfontCN({scriptUrl: 'iconfont的地址', });

使用

<Buttontype="dashed"onClick={() => add()}icon={<MyIcon type="icon-tongguo" /> }>点击
</Button>

antd使用阿里巴巴矢量图标相关推荐

React 使用阿里巴巴矢量图标库管理Icon图标的Icon-antd用法
Icon.jsx文件配置模板 import { Icon } from 'antd';const IconFont = Icon.createFromIconfontCN({scriptUrl: ' ...
阿里巴巴矢量图标库iconfont的使用
场景工作中如果用到常用的一些图片去哪寻找. 阿里巴巴矢量图标库: https://www.iconfont.cn/home/index 注: 博客主页: https://blog.csdn.net/ ...
阿里巴巴矢量图标库使用步骤
1.登陆官网,选择需要的图标,将其添加至项目,然后下载至本地. 2.解压文件. 3.在工程目录下新建CSS文件夹,在CSS文件夹之后新建iconfont文件夹,并且将下面四个文件复制在CSS/icon ...
微信小程序引入外部矢量图标（阿里巴巴矢量图标）
1.显示效果 2.实现步骤进入阿里巴巴矢量图标库搜索想要的矢量图标并加入购物车,点击右上角购物车将图标添加至项目更改项目设置将字体格式设置为TTF Base64 点击下载至本地在微信小程序 ...
微信小程序引入外部icon（阿里巴巴矢量图标）
1.实现效果 2.实现步骤阿里巴巴矢量图标库搜索想要的图标,添加购物车. 添加进自己的项目中获取代码(注意:当项目更新之后,该代码也需更新) 3.实现代码新建一个iconFont.wxss,复 ...
阿里巴巴矢量图标库icon图标在线引用
阿里巴巴矢量图标库icon图标在线引用写代码有时候不方便下载图标的时候可以直接引用阿里巴巴矢量图标库的图标,放在代码内具体步骤如下: 1.进入阿里巴巴矢量图标库选择需要的图标: 2.点击加入购物车 ...
Element引入Iconfont（阿里巴巴矢量图标库）第三方图标库
最近在使用vue-element-admin开源项目进行系统开发,但是在引入第三方图标库的时候,出现了一些问题,百度找了找,也没有找到自己想要的答案,最后经过多次尝试,将问题解决.所以特此记录一下,以 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
【uni-app怎么引用使用阿里巴巴矢量图标库iconfont】
uni-app引用使用阿里巴巴矢量图标库iconfont 1.新建文件(看了好几篇使用说明和官方说明总结出来的用法) 首先右击项目新建一个目录common和pages同级,右击common文件夹新建一 ...
阿里巴巴矢量图标库（网页）
首先,阿里巴巴矢量图标库网站资源非常齐全,主要包含了图标库,矢量插画库,3D插画库,动效库,字体库等等,基本能满足小伙伴们日常开发设计需求,里面的所有素材都可以免费使用. 图标库里包含有2300W+ ...

antd使用阿里巴巴矢量图标

antd使用阿里巴巴矢量图标相关推荐

最新文章

热门文章