vue中使用阿里巴巴矢量图标库的图标
生活随笔
收集整理的這篇文章主要介紹了
vue中使用阿里巴巴矢量图标库的图标
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
文章目錄
- 前言
- 一、配置
- 二、使用步驟
- 1.下載圖標(biāo)
- 2.使用
- 1.解壓
- 2.引入并使用
- 3.結(jié)果
前言
vue一般使用element-ui等框架來構(gòu)建頁面樣式，但是有時候里面自帶的圖標(biāo)并不能滿足我們的需求，而阿里巴巴矢量圖標(biāo)庫里面正好有大量圖標(biāo)，現(xiàn)在就來學(xué)習(xí)一下如何引入圖標(biāo)。
一、配置
vue 2.x版本
二、使用步驟
1.下載圖標(biāo)
去阿里巴巴矢量圖標(biāo)庫官網(wǎng)下載圖標(biāo)（建議：下載的時候先點小購物車添加到庫，然后再點擊右上角的小購物車將所有的圖標(biāo)添加到一個庫后一起下載）
2.使用
1.解壓
下載了之后，解壓壓縮包，會看到如下文件，其中的demo_index.html文件時教程文件，可以打開在瀏覽器里面查看
之后將除了demo文件以外的所有文件導(dǎo)入到vue項目中(位置隨意，能找到就行)
2.引入并使用
因為我想要彩色圖標(biāo)，所以按照教程使用svg的方式引入，首先，在index.html中引入iconfont.js
index.html
之后在對應(yīng)的vue文件中添加style，并寫上對應(yīng)的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; /* 調(diào)節(jié)圖標(biāo)寬度 */height: 10em; /* 調(diào)節(jié)圖標(biāo)高度 */vertical-align: -0.15em;fill: currentColor;overflow: hidden; } </style>3.結(jié)果
大功告成！有什么問題歡迎在評論區(qū)留言。
總結(jié)
以上是生活随笔為你收集整理的vue中使用阿里巴巴矢量图标库的图标的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java动画闪烁_优化Java动画编程中
- 下一篇： 在vue项目中使用阿里巴巴矢量图标库