前言

vue一般使用element-ui等框架来构建页面样式，但是有时候里面自带的图标并不能满足我们的需求，而阿里巴巴矢量图标库里面正好有大量图标，现在就来学习一下如何引入图标。

一、配置

vue 2.x版本

二、使用步骤

1.下载图标

去阿里巴巴矢量图标库官网下载图标（建议：下载的时候先点小购物车添加到库，然后再点击右上角的小购物车将所有的图标添加到一个库后一起下载）

2.使用

1.解压

下载了之后，解压压缩包，会看到如下文件，其中的demo_index.html文件时教程文件，可以打开在浏览器里面查看

之后将除了demo文件以外的所有文件导入到vue项目中(位置随意，能找到就行)

2.引入并使用

因为我想要彩色图标，所以按照教程使用svg的方式引入，首先，在index.html中引入iconfont.js
index.html

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title><!-- 加了这句 --><script src="./icon/iconfont.js"></script><!-- 加了这句 -->
</head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected -->
</body>
</html>

之后在对应的vue文件中添加style，并写上对应的html代码即可

<template><div><svg class="icon" aria-hidden="true"><use xlink:href="#icon-a-caozhiwu"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-a-lvsedeshumuzhiwu"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-a-huahuaduozhiwu"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-a-guoshushuzhiwu"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-a-meiguihuahuahuaduozhiwu"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-a-shuiguoguoshi"></use></svg></div>
</template><script>
export default {};
</script><style>
.icon {width: 10em; /* 调节图标宽度 */height: 10em; /* 调节图标高度 */vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style>

3.结果

大功告成！有什么问题欢迎在评论区留言。

vue中使用阿里巴巴矢量图标库的图标相关推荐

如何在vue中引入阿里巴巴矢量图标库里面的图标
阿里巴巴矢量图标库https://www.iconfont.cn/ 首先进行登录,然后才能下载里面的图标搜索里面的图标并添加到购物车点击右上角购物车将购物车里面的图标添加至项目书写项目名称可随 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
vue项目引入阿里巴巴矢量图标库图标及其使用教程
添加喜欢的图标方式一:本地方式将图标引入到vue项目在main.js文件中引入阿里巴巴矢量图标库的css文件使用图标,注意加上iconfont前缀效果方式二:使用在线方式引入图标到vue项目 ...
在小程序中使用阿里巴巴矢量图标库
在百度小程序或者其他小程序中使用阿里巴巴矢量图标库是为了提高小程序渲染加载,因为小程序文档内都不建议把所有的图片和图标文件放在小程序端,在小程序中使用阿里巴巴矢量图标库的字体图标,首先要在这个网站挑选 ...
阿里巴巴矢量图标库icon图标在线引用
阿里巴巴矢量图标库icon图标在线引用写代码有时候不方便下载图标的时候可以直接引用阿里巴巴矢量图标库的图标,放在代码内具体步骤如下: 1.进入阿里巴巴矢量图标库选择需要的图标: 2.点击加入购物车 ...
在项目中使用阿里巴巴矢量字体图标
在项目中使用阿里巴巴矢量字体图标打开阿⾥巴巴字体iconfont 搜索需要的图标,选择要使用的图标,点击添加入库点击右上角的购物车按钮,进入库中选择添加入项目, 选择新建项目,或者使用已有项目 ...
vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
vue中谷歌地图标记点、聚合点图标自定义
vue中谷歌地图标记点.聚合点图标自定义标记点自定义聚合点自定义完整代码最近用vue+谷歌地图做国外项目,地图需要有标记点和聚合点. 标记点:1,图标样式自定义 2,点击更换图标聚合点:1, ...
如何在React中引入阿里图标库的图标
一.周所周知在 Antd Design 中也有一些图标,但是要找到自己想要的图标不是很方便,需要一个一个的找.而且提供的图标数量也不是很多! 而阿里图标库可以通过搜索找到自己想要的图标,图标的数量和 ...
scrapy如何指定生成python3的项目_如何把阿里图标库的图标生成代码并应用于自己的项目...
有时候需要用很多图标去完成一定的页面效果和工作展现,框架内置的图标可能满足不了我们的需求,有个很好的图标库想必大家都知道-----就是阿里图标库.那么我们如何才能够把阿狸图标库的图标引用到自己的项目中 ...

vue中使用阿里巴巴矢量图标库的图标

文章目录

前言