Vue3+Antdesign2怎么离线使用IconFont

原创 已于 2022-05-24 10:24:47 修改 · 1.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue3 #antdesign #iconfont

于 2022-05-23 09:20:23 首次发布
本文档介绍了如何在Vue3项目中使用AntDesign图标库以外的第三方IconFont图标，包括从IconFont网站选择并下载图标，自定义编辑颜色和大小，将图标引入到项目中，以及在Vue组件中使用这些图标的方法。同时提供了在main.js中引入样式和在Vue文件中使用icon的示例代码。

背景

当antdesign的icon已经不满足需求时，则需要第三方的icon库，antdesign推荐使用的是icon，但官方文档推荐的做法是使用在线的iconfont，但个人更倾向于离线使用更有安全感hhh

版本

  • Vue : Vue3

  • Ant Design : 2.x

步骤

1 在iconfont里把需要的icon添加入库

https://www.iconfont.cnhttps://www.iconfont.cn

 2 自定义icon

2.1 打开购物车的icon，里面就是刚刚添加入库的icon

 2.2 把icon添加到项目中

最低0.47元/天 解锁文章
iview中使用iconfont离线图标字体资源
浪潮行舟_2136
04-24 1553
最近项目中要使用离线图标字体，项目是基于iview+typescript的。现将怎么使用离线图标字体进行如下说明： 进入官方图标库 打开图标网站https://www.iconfont.cn/，进入官方图标库 选择所需图标 选择需要的图标，支持不同的图标库多选 保存所选图标 点击购物车，进入本次所选所有的图标 4.下载图标离线字体...
源码分享-基于vue+Ant Design管理平台
青年码农
12-01 550
这个前端源码也是在gitee上开源的，功能算是比上一个分享的要全一些，基本功能都有，这个是基于Ant Design，个人感觉这款页面样式要比上一款漂亮。登录页首页内容列表页技术栈采用vue2 + vuex + vue-router + webpack + ES6/7 + axios + antd + 阿里图标iconfont。还是老样子，先说下已完成哪些功能。已开发完成用...
ant-design-vue离线文档
09-23
vue ant design的离线文档， 解压后打开目录 npm install 运行 npm start 启动 默认项目地址为 localhost:3000
TextFieldEffects最佳部署方案：CI/CD流程中的组件管理
最新发布
gitblog_01182的博客
12-01 730
TextFieldEffects是一个基于Swift构建的自定义UITextFields效果库，为iOS应用提供优雅的文本输入交互体验。这个开源项目包含了多种精美的动画效果，能够显著提升用户界面的视觉吸引力。在CI/CD流程中有效管理TextFieldEffects组件，可以帮助团队快速集成和部署这些高质量的UI组件。 ## 🚀 快速集成TextFieldEffects到项目中 TextFi
ant-designer-vue离线文档1.+版本
01-21
ant-designer-vue离线文档1.+版本
Iconify 离线
Lae77的博客
01-08 2177
使用本地 Iconify 图标
微信小程序离线引入 iconfont 字体图标
前端知识分享喵
10-19 1348
微信小程序离线引入 iconfont 字体图标
vue3 + ant-design-vue@3.x 根据路由生成 多级递归嵌套菜单
言小溪 的博客
12-20 4646
首先全局注册图标 import { createApp } from "vue"; import { createFromIconfontCN } from "@ant-design/icons-vue"; // 注册远程 icon const Icon = createFromIconfontCN({ // 这个是我自己的图标库，你自己创建要去 iconfont.cn 上创建，看官网教程 https://next.antdv.com/components/icon-cn#%E8%87%AA%E5%AE
vue3 + Ant Design Vue 使用a-upload txt文件上传
09-21
在Vue 3项目中使用Ant Design Vue的`a-upload`组件上传txt文件，可参考以下实现步骤及代码示例。 ### 1. 安装依赖 确保项目中已安装Vue 3和Ant Design Vue。若未安装，可使用以下命令进行安装： ```bash npm ...
vue3 PC端项目构建，vue3+antd+vite+pinia+axios+sass
局外人LZ的博客
03-04 2164
本文只是大致讲了下vue3移动端项目搭建，具体的细节还是需要根据自己项目的需要进行调整。路由只封装了navigateTo、navigateBack，可以根据微信小程序路由api的逻辑https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 封装switchTab、reLaunch、redirectTo，如果有更好的方法可以忽略该路由封装，个人觉得小程序路由做的挺好。路径别名可配可不配，根据自己喜好就行。
小程序+iconfont离线模式
kk0mvp的博客
12-02 569
这里需要绝对路径,否则报渲染成错误(wxss文件)将iconfont.css文件后缀转换成wxss。
ant design 离线使用图标
chixian4839的博客
04-16 708
项目使用到了ant design 的组件，在离线环境中使用ant design 组件时需要将iconfont 图标下载到本地，不然会无法识别组件内部图标，所有有图标的地方都会显示为一个灰色方框 离线图标使用方法：https://ng.ant.design/#/components/icon，...
Vue 3使用 Iconify 作为图标库与图标离线加载的方法、 Icones 开源在线图标浏览库的使用
热门推荐
u011843342的博客
10-20 2万+
之前一直naive-ui搭配使用的是xicons，后来发现Iconify支持的图标合集更多，因此转而使用Iconify。与FontAwesome不同的是，Iconify配合Icones相当于是一个合集，Iconify提供了快捷引入图标的方式，而Icones是一个大的图标库，收集了大量MIT协议、Apache 2.0开源的图标文件。Iconify 支持的框架很多，本文以 Vue 3 作为介绍。
内网环境Ant Design使用离线Icon图标资源[以更新，亲测可用]
bellus
06-26 2万+
蚂蚁金服 本地化图标 内网环境Ant Design使用离线Icon图标资源[以更新，亲测可用] 两种方法
内网环境Ant Design使用离线Icon图标资源
weixin_30802171的博客
08-31 373
问题： 　　内网环境集成ant design，其中的iconfont资源会加载不到，导致页面很多icon失效。 解决方案： 　　step1: 到 https://ant.design/docs/resource/download-cn 上下载字体库： 　　　　　　 　　step2:解压字体库文件到工程目录的某个位置(比如/public/font). step3:修改 nod...
vue中离线使用阿里巴巴图标库iconfont
诚的博客
04-08 1470
1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图标库) image.png 3.把需要的图标添加到购物车 image.png 4.打开购物车并选择添加至项目，然后确定 image.png 5.这时候可以在项目中看到你选中的svg图标，这时候可以点击下载至本地 image.pn...
离线生成Iconfont
u598975767的专栏
06-17 587
一种根据svg图片离线生成iconfont的工具
ant-desgin-vue@1.7.8离线文档
Xiong980818的博客
03-18 486
由于公司业务需求，需要在内网环境下部署一个ant-desgin-vue的离线文档，官网目前只有V1.4的文档，但是项目使用的却是V1.7.8，找遍了资源，也问遍了AI，最终也没有得到一个解决完美的办法，网上我目前找到的1.7.8的版本只有PDF版本，但是在实际中使用起来却是差强人意。没办法就只能自己想法子了，最后自己拉下来官方源码之后，总算折腾了出来！
ant design vue离线文档
SKY_Lake
09-23 8471
链接：https://pan.baidu.com/s/1j4fUQg_MeHSfGGdZsoXpXw 提取码：obqy 解压后 1. npm install // 安装node_modules依赖 2. npm start // 运行 默认运行在 localhost:3000 ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值