前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >react调用antd4.X自定义图标 icon | 阿里巴巴矢量图标

react调用antd4.X自定义图标 icon | 阿里巴巴矢量图标

作者头像
啦啦啦啦
发布于 2023-02-27 06:06:15
发布于 2023-02-27 06:06:15
8910
举报
文章被收录于专栏:啦啦啦啦前端啦啦啦啦前端

1 先贴图

2 看官网代码

https://ant.design/components/icon-cn/#components-icon-demo-custom

使用 iconfont.cn,使用多个和单个是异曲同工之处。那里的scriptUrl是生成的一个远程链接,我们在react里面调用它即可。

3 看这篇博客

https://blog.csdn.net/weixin_44021270/article/details/107377658

4 解决阿里巴巴矢量图标自定义更改后无法引用问题

当我们更改了阿里矢量图标后会出现这行次,而且生成以后无法调用。咱办嘞,有一个方法!

  1. 我们把刚刚改的图标下载下来
  1. 然后再给上传上来
  1. 找到我们刚刚上传的图标,加入购物车。

4.生成代码,完成调用!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-05-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
蘑菇博客前端页面如何引入矢量图标
蘑菇博客前端页面最开始使用的图标都是一张张的 png 图片,在不同的分辨率上会出现失真的情况,后面在其它小伙伴的介绍下,我了解到了矢量图标。
陌溪
2021/03/22
4920
蘑菇博客前端页面如何引入矢量图标
Ant Design 是怎么管 Icon 的?
Ant Design 的 Icon,是在"确定"和"自然"的设计价值观影响下的一套美观、一致、易用、便于延展的图标体系;
WEBJ2EE
2019/07/19
4.8K0
Ant Design 是怎么管 Icon 的?
WordPress引用阿里巴巴矢量图标库添加彩色图标
现在大部分博客图标都采用Font Awesome图标库,因为Font Awesome图标库满足了大部分用户的需求了,但做为喜欢花里胡哨的我们是不够的,Font Awesome图标库的图标不仅没有彩色的图标,个性化的图标还有点少!所以对于我们喜欢彩色的菜单图标选择性很少!所以只能引入其他的矢量图标库,今天我就分享一下WordPress引用阿里巴巴矢量图标库的彩色图标。
七辰
2023/10/06
8440
WordPress引用阿里巴巴矢量图标库添加彩色图标
微信小程序使用阿里巴巴的矢量图标iconfont
在这里我创建一个示例项目 找两个图标加入 (如果项目很小需求比较少 才一两个的话直接选择颜色下载png格式就好了) 我主要是为了减少包体积 而且增添方便 图标颜色控制 加载快(微信小程序上传上限为 2048 kb)
煎饼
2022/12/13
7460
微信小程序使用阿里巴巴的矢量图标iconfont
小程序实践:基础内容icon,关于图标的5个实现方案等
使用图片也可以达到同样的效果,但是图片如果像素不够,放大了之后效果会虚;还有,图片需要另外存储与加载,使用起来不如图标只使用一个名称方便;再者就是,接下来会看到,图标可以随意改变颜色,而图像不能。
LIYI
2020/03/27
2.3K0
Web 前端矢量小图标的使用方法
* 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的图片名称引用。
汤清丽
2019/12/29
6310
【Uni-App社区小程序】005-引入自定义图标库
Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能;
訾博ZiBo
2025/01/06
2580
【Uni-App社区小程序】005-引入自定义图标库
如何添加调用矢量图标库
如果您已有账号,可以忽略此步骤,如图登录方式有四种,一个是手机号注册登入,一个是Github另外一个是微博,域账号我们用不了,无论哪种都是关联账号,没有注册,选择一种登录即可,站长这边使用手机号注册
用户1094633
2022/02/14
1.4K0
VUE项目中使用IconFont 阿里巴巴矢量图标库
近日为了方便前端同事图标的使用,在现有的项目中引入了一下 阿里巴巴矢量图标库iconfont 现记录如下
拿我格子衫来
2022/01/24
9540
VUE项目中使用IconFont 阿里巴巴矢量图标库
Svg矢量图封装使用
炑焽
2024/08/30
4560
阿里巴巴矢量图标库(iconfont)批量全选的方法
浏览器打开调试面板,进入 console 调试面板(Google浏览器快捷键F12)或者在页面空白处,点击右键->审查元素(检查) 即可打开。
kirin
2020/09/22
1.7K0
Web Icon 123 - 网页内图标的调用
之前 保罗 在使用 php 写他的第一个个人主页的时候,在他的群里提到了 Font-Awesome 这个项目。当时还是纯小白一个,啥也听不懂。直到后来,看了几篇科普的文章,在2018年1月4日第一次在本地环境调用 Font-Awesome 。
惶心
2018/05/07
2.8K9
Web Icon 123 - 网页内图标的调用
怎么使用阿里巴巴矢量图标库图文教程
最近好久没写文章了,不为别的,就因为上周五晚上网站服务器被攻击了,原因未知,无论是百度统计还是腾讯云CDN流量情况都还算正常,跟腾讯客服沟通到凌晨,问题依旧没有解决,从而导致很多用户的主题配置无法访问,对此深感抱歉,周六晚上,请求次数已经达到了500W+,但是其他信息都是正常的,比如流量统计,来访名单等等,后来实在没有办法,把主题都改成本地校验,重新上传至应用中心,最终到晚上九点多,我更换了数据库端口号,设置了远程数据库,才算终止,当然我并不能确定是我弄好的还是不再攻击了,这都不重要,重要的是,要时时刻刻做好备份,确保数据库不会丢失,嗐,无奈啊~~~
李洋博客
2023/03/03
2.3K0
怎么使用阿里巴巴矢量图标库图文教程
【Butterfly美化】Hexo Butterfly主题使用阿里巴巴iconfont
Butterfly主题使用阿里巴巴iconfont⛄yooo~ 今天教大家美化Butterfly的字体图标⛄Butterfly主题支持 font-awesome v6 但是还是不够用怎么办呢?⛄可以使用阿里巴巴iconfont来拓展啦Butterfly版本:4.5.1选择图标iconfont图标库地址:iconfont-阿里巴巴矢量图标库找到自己需要的图标之后点击 添加入库图片图片将图标添加至项目中图片生成代码 并 复制代码图片图片Butterfly配置新建css文件在Butterfly主题文件夹下的 /s
LonelySnowman
2022/12/16
1.1K0
handsome自定义扩充iconfont图标及配色教程
本文只针对handsome主题,也是综合了在hexo和部分typecho主题中引入矢量图标的经验及网络上已有教程进行经验总结分享交流,有出入的地方还望大家指出,共同交流进步。
傲绝
2023/04/06
1.1K0
handsome自定义扩充iconfont图标及配色教程
字体图标iconfont的使用
fontClass 支持字体的样式定义,但不支持多色字体,兼容性良好,当要替换图标时,只需要修改 class 里面的 Unicode 引用。只需要 html 和 csss。
leader755
2022/03/09
4.5K0
字体图标iconfont的使用
如何在antdPro中使用自定义SVG图标?
以上截图出自antd的Icon组件(https://ant.design/components/icon-cn/)
进击的小进进
2022/03/28
3.1K0
如何在antdPro中使用自定义SVG图标?
Power BI 按钮:自定义图标
Power BI的按钮功能可以为图标设定一个动作,比如返回上一步,跳转书签,跳转一个网页链接等等。
wujunmin
2022/12/12
2K0
Power BI 按钮:自定义图标
Web图标的工程化方案
https://juejin.cn/post/6952150039732944910
coder_koala
2021/05/28
1.1K0
Web图标的工程化方案
【技巧】ionic3修改自定义图标
我们需要把它裁切并转成svg格式再生成字体图标,比较繁琐,而我新系统目前也没有装相应软件,所以这里不采用这些图标,选用网上已有类似的字体图标来代替。
IT晴天
2019/07/19
1.3K0
【技巧】ionic3修改自定义图标
相关推荐
蘑菇博客前端页面如何引入矢量图标
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档