在Vue项目中使用阿里巴巴矢量库下载的svg素材

原创

已于 2024-03-01 11:51:10 修改 · 843 阅读

标签

#前端 #vue.js

收录于

于 2024-02-28 15:18:12 首次发布

步骤如下：

（一）进入阿里巴巴矢量库后搜索所要素材

（二）将素材添加至项目中

（三）选择Symbol后可对素材进行颜色、大小进行编辑，也可重命名，然后下载至本地

（四）将文件解压之后放到assets文件夹下

（五）在main.js中进行引入

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Licia_dd

关注关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

项目中引入阿里巴巴图标——iconfont图标的使用-svg格式

weixin_44867717的博客

04-08

7563

项目中引入阿里巴巴图标——iconfont图标的使用-svg格式一、下载图标 1、先进入iconfont.cn页面 iconfont官网：https://www.iconfont.cn/ 2、登陆，并选择你要用的图标进行下载 3、点击下载，并选择弹框下面的色值和大小，点击svg下载，并进行重命名 1-浅灰正常图标 2-明蓝高亮图标 4、把下载的svg图标，放进本地项目里的某个文件夹，进行使用二、使用图标 1、找到所需界面的html代码 2、在HTML中插入css文件 3、在html里面插入一

HTML-iconfont动态图标SVG效果--阿里巴巴图标矢量库

欢迎来到长风沛雨的博客

05-22

3480

跟pink老师学的svg描边动态图标

参与评论您还未登录，请先登录后发表或查看评论

阿里图标库SVG下载工具

最新发布

sinat_40572875的博客

04-18

233

我用夸克网盘给你分享了「阿里图标库SVG下载工具」，点击链接或复制整段内容，打开「夸克APP」即可获取。链接：https://pan.quark.cn/s/832ebd8e595b。亝诶一一及并页次森二二忛。

web前端svg图标使用（关于阿里iconfont的symbol 引用）

Victoria_jones的博客

10-27

2333

symbol 引用是一种全新的使用方式，应该说是未来的主流，也是平台目前推荐的用法。本篇文章基于阿里的iconfont, 为您讲解web前端svg图标的使用。

Vue 前端项目使用alibaba矢量库svg图标

王林的博客

09-08

644

这里主要是记录 vue项目中使用阿里矢量库图标的操作流程，方便以后查阅！！！

寒假学习记录6：svg图标、iconfont字体图标的使用

前端萌新

01-31

3406

我们只需要这四个文件，然后将这4个文件复制到自己的项目里就行。8.使用iconfont图标，点开html，写入i标签，别的签也写。7.输入默认css样式，直接复制拿去用就行，不用改。7.点开iconfont.css文件，里面长这样。9.使用，套个i标签好一点，不套也没事。1.首先进入阿里巴巴矢量图标库。3.点击购物车，点击添加至项目。2.选择要下载的图标，选择下载。3.点击购物车，点击下载代码。1.进入阿里巴巴矢量图标库。1.进入阿里巴巴矢量图标库。iconfont-阿里巴巴矢量图标库。

最简单的SVG图标使用方式

Dreamy_LIN的博客

05-19

7294

简介 Icon Sprite ：CSS精灵或雪碧图，是一种网页图片应用处理方式。原理是，把网页中一些Icon整合到一张图片文件中。再通过一定方式从图片文件中取出所需Icon并显示。其中CSS Sprite、Icon Font使用最多。 CSS Sprite：原理是将多个icon按一定规律整合到图片文件中，再利用CSS的"background-image"，“background-repeat”，"background-position"的组合进行图片定位并显示。优点：技术成熟，兼容性好；缺点：在实际需求中

vue2 - vant使用阿里矢量图以及Field组件中使用

尽日寻春不见春，芒鞋踏遍陇头云。归来笑拈梅花嗅，春在枝头已十分。

04-21

1232

本文介绍了如何在Vant组件中使用阿里矢量图标库补充自带图标不足的问题。首先从iconfont.cn下载所需图标代码包，解压后放入项目静态文件夹。然后在Vue组件或main.js中引入iconfont.css样式文件。使用时通过<van-icon>组件添加iconfont类名和对应图标类名即可。文章特别演示了在Field组件中通过插槽方式自定义左右图标的方法，包括使用left-icon插槽和按钮插槽两种实现方式，最终实现了在表单输入框中显示自定义定位和搜索图标的效果。

Vue+Vite项目封装 svg 组件，使用阿里巴巴矢量图标

做笔记/记录遇到的前端bug

01-13

3021

Vite创建的Vue3.0项目，封装 svg 组件详解。svgicon 使用教程

阿里巴巴图标矢量库使用方法详解，适用于各种框架

qq_61838643的博客

08-10

9858

官网使用了三种方法，我将逐一讲解，有不对之处还请各位大佬指正添加到购物车，选择完成后点击上方导航栏图标之后选择添加至项目（没有项目可以临时创建一个）选择完成之后会自动跳转至资源管理界面，查看刚才的选择的图标如果是vue项目，可以把代码复制在app.vue的style标签里，如果没有使用框架，直接写在css文件里引入即可。

前端阿里矢量图的使用步骤

m0_64207574的博客

02-15

1358

前端阿里矢量图的使用步骤

PPT图标下载

bxcs的专栏

06-05

609

1、https://www.iconfont.cn/（阿里巴巴矢量图库） ① 可以下载SVG格式，透明图，可以在PPT直接修改颜色 ② 可下载AI格式，进行编辑

阿里巴巴矢量图标批量下载

10D24D的博客

09-04

3459

文章目录前言如何批量下载阿里巴巴矢量图标？1.打开阿里巴巴矢量图标库的项目2.按F12打开浏览器的开发者工具执行自动下载图标的代码前言 阿里巴巴矢量图标库作为国产的图标库，使用人数多，图标也很丰富，但在功能上还是有改进的地方的…… 如最近我在使用的过程中就遇到一个下载图标的问题，阿里巴巴是图标库它是有批量操作功能的，但只能加入到购物车再进行下载，而这种操作既麻烦又有数量限制，要么就逐个下载更不可取。或许你会说把Font class字体文件下载至本地再去使用（仔细一点你会发现阿里巴巴是图标库是有作处理的，

阿里图标库——批量下载图标

朝阳39的博客

09-26

3867

使用购物车实现批量下载特别提醒：因官网批量下载数量限制，以下案例中都最多只能选择20个图标。批量下载图标，需要先将图标添加入库【“购物车”】，再下载选择颜色和大小，点击格式就会触发下载，推荐SVG 批量添加页面中的图标入库方法1：手动选择需要的图标添加入库方法2：运行代码批量添加入库按F12打开控制台，运行代码 var iconList = document.querySelectorAll('.icon-gouwuche1'); for (var i = 0; i &.

阿里矢量图标

x0572_的博客

07-27

1038

矢量图标

阿里矢量库的图标使用教程（在线，下载）

NOyesNONO_的博客

11-12

2217

方法一：使用在线链接登录/注册账号选择看上的图标，鼠标悬浮，点击购物车点击导航栏上购物车图标，查看购物车将购物车中的图标添加至项目，若无项目，则新建项目在项目库中看到自己的图标，选择 font class 方式，并点击“查看在线连接”，然后点击生成代码点击复制代码，会得到 //at.alicdn.com/t/font_2933398_9eu14vuyrsu.css，在html中加上https:使用在html中使用link的方式鼠标悬浮图标

前端下载文件方式(Blob)

小白目的博客

08-21

654

【代码】前端下载文件方式(Blob)

vue实现简单的数据筛选

huihuihaha222222的博客

06-26

2847

代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv...

Vue项目中本地引用Iconfont(阿里巴巴图标库)-svg图标样式使用 & element UI和ant design皆可

weixin_44867717的博客

09-20

9741

Vue项目中本地引用Iconfont(阿里巴巴图标库)-svg图标样式使用 & element UI和ant design皆可下载图标先进入iconfont.cn页面 iconfont官网：https://www.iconfont.cn/ 方法见上使用一准备工作 1、先注册，再登录、找到图标管理、我的项目 2、点紫色的这个创建自己的项目新建项目界面如下 3、图中画蓝线的地方很重要 1）、FontClass/Symbol前缀这个很重要，一定不要写成：el-icon-***这样的形式