Vue配置阿里图标库

最新推荐文章于 2023-10-18 18:05:39 发布
最新推荐文章于 2023-10-18 18:05:39 发布
阅读量132 收藏 1
点赞数
分类专栏： 阿里图标库 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zyx_17631285304/article/details/129854380
版权

点击进入阿里图标库官网icon-default.png?t=N2N8https://www.iconfont.cn/1、点击添加购物车

 2、点击添加到项目

 

 

 4、下载至本地并解压到vue项目中src/assets 中，删除demo开头的文件

 5、在main.js中引入 

 6、直接使用

 

         第二个类名就是图标，可以通过css控制大小和颜色等等

         所有的图标都保存在iconfont/inconfont.css中

         

 

Zyx_Lz
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ace-html.zip
07-03
好用的后台管理系统界面，含全部HTML。适合企业做管理系统。
Vue svg 及 图标库(iconify)使用
CY的博客
04-23 3442
Vue svg 及 图标库(iconify)使用
vue项目中引入字体图标库（傻瓜式教程，详解）
逆水行舟 不进则退
04-02 4791
在vue项目中使用字体图标库，完整版详细步骤
vue使用iconify图标库
m0_47659279的博客
06-10 3803
>iconify具有海量的图标集，很多图标都可以在这里找到，下面就介绍一下这些图标如何在vue项目中使用
在Vue项目里使用ECharts图标库
sys025的专栏
02-26 486
ECharts是一个JavaScript实现的开源图标库，能兼容绝大多数浏览器（IE8+），底层依赖ZRender（一个轻量级的Canvas类库），能高度个性化定制数据可视化图标。但需要注意的是，在使用图标的时候，他会在模版渲染之前就开始渲染，这个时候显示的话会变形。但这种监听在浏览器变动的时候会触发多次，为了优化性能，我们还需要使用lodash。ps： 如果报格式警告，那就安装一个exlint插件，然后一键改下格式就好了。三、在需要使用的页面，通过components的方式申明Chart组件。
Vue使用阿里图标库
12-16
**三、配置阿里图标库** 阿里图标库提供了一个在线服务，你可以在这里选择并管理你需要的图标：https://www.iconfont.cn/ 1. **创建项目**：在阿里图标库网站上注册并创建一个新的图标项目。 2. **添加图标**：在...
vue中引用阿里字体图标的方法
08-28
阿里字体图标是一种非常流行的图标库，提供了大量的图标资源，能够满足我们的各种图标需求。在 Vue 项目中，使用阿里字体图标可以提高页面的视觉效果，提高用户体验。 引用阿里字体图标的方法 在 Vue 项目中，引用...
vue配置font-awesome5的方法步骤
12-08
前端小伙伴们都知道Font Awesome图标库，它具有丰富的常用图标，笔者开发时也经常使用，省却了自己到处找图标的困扰，当然阿里的iconfont也不错，不过它比较杂乱，找的图标有时候不是配套的，尺寸和比例上有些偏差，...
vue3 数据可视化大屏
09-11
ECharts 和 AntV 是百度和阿里提供的易用的可视化解决方案，而 D3.js 是一个强大的低级库，可以实现高度自定义的可视化效果。 - **SVGBuilder.js**：这可能是用于创建和操作 SVG 元素的库，SVG（可缩放矢量图形）常...
仿照阿里云的后台模板
03-11
5. **色彩搭配与图标库**：遵循阿里云的色彩体系，选用了一套专业且统一的图标库，提升整体视觉效果。 二、核心技术栈 1. **HTML5 & CSS3**：作为基础结构，提供了丰富的语义化标签和样式控制，增强网页表现力。 ...
Vue 使用中的小技巧
油墨香^-^的博客
07-01 238
在vue的使用过程中会遇到各种场景，当普通使用时觉得没什么，但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧，在下将不定期更新~ 1、多图表resize事件去中心化 1.1 一般情况 有时候我们会遇到这样的场景，一个组件中有几个图表，在浏览器resize的时候我们希望图表也进行resize，因此我们会在父容器组件中写： mounted(){ setTimeout(()=>window.onresize=()=>{ ......
vue中使用iconfont阿里图标库（symbol本地环境）
qq_37291367的博客
05-27 823
vue中引入阿里图标库，symbol方式，个人便捷备份。
vue项目引入阿里巴巴矢量图标库图标及其使用教程
记录一名在读研究生的学习笔记、感悟、开发产物
02-21 2007
快速了解阿里巴巴矢量图标库如何引入到vue项目中，并进行使用
打造属于自己的vue图标库
最新发布
Hhjian524的博客
10-18 970
打造属于自己的vue图标库。
每日一篇（9）--vue关于图片的引入和错误图片展示
qq_42312466的博客
07-01 134
1、关于图片的引入有两种方式： require 路径直接引入 (1)关于require引入： <div> <img :src='imgSrc'/> </div> <script> created(){ this.imgSrc = require('@/assets/default-avatar.png') } </script> (2)关于路径直接引入 <div> <img :src='@/assets/avatar.p
Vue 使用 el-avatar 头像无法直接加载本地图片问题
幻辰科技 nbhctec.com
05-24 2896
Vue 使用 el-avatar 头像无法直接加载本地图片问题
vue自定义指令
shibaweijin的博客
06-16 96
这个指令可以给组件绑定一个或多个快捷键。通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它。安装 main.js 注册 页面使用 Vue-Lazyload 图片懒加载，非常方便。 安装 main.js 页面使用 V-Tooltip 几乎每个项目都会用到 tooltip。这个指令可以给元素添加响应式的tooltip，并可控制显示位置、触发方式和监听事件。 安装 main.js 页面使用 V-Blur 为绑定的内容蒙上阴影 安装 main,js 页面使用 Vue-D
Vue安装
zuo_zuo_blog的博客
06-07 168
1.第一种 我们可以在Vue.js的官网上直接下载vue.js,并在 开发环境不要使用最小压缩版，不然会没有错误提示和警告！ 2.第二种 在用Vue.js构建大型应用的时候推荐使用NPM安装方法，NPM能很好的和诸如Webpack或者Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。 （1） 01node.js环境（npm包管理器） 从node.js官...
webpack打包测试_从零开始搭建项目（一） —— vue2+webpack4
weixin_39645019的博客
02-05 201
创建目录(根据需要自己取项目名)mkdir florist初始化版本库(非必须)cd floristgit init关联远程仓库(非必须)1. 创建远程仓库 florist(Github)2. 关联远程仓库git remote add origin git@github.com:uakora/florist.git3. 拉取远程仓库内容到本地git pull origin master --all...
阿里巴巴矢量图标库vue
08-20
阿里巴巴矢量图标库（Iconfont）可以在Vue项目中使用。首先，您需要创建自己的项目图标库。您可以访问https://www.iconfont.cn/并手动创建自己的项目图标库。选中您需要的图标并添加到您的项目中。完成后，点击上方...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值