vue中使用阿里巴巴矢量图标库的图标
生活随笔
收集整理的這篇文章主要介紹了
vue中使用阿里巴巴矢量图标库的图标
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 前言
- 一、配置
- 二、使用步驟
- 1.下載圖標
- 2.使用
- 1.解壓
- 2.引入并使用
- 3.結果
前言
vue一般使用element-ui等框架來構建頁面樣式，但是有時候里面自帶的圖標并不能滿足我們的需求，而阿里巴巴矢量圖標庫里面正好有大量圖標，現在就來學習一下如何引入圖標。
一、配置
vue 2.x版本
二、使用步驟
1.下載圖標
去阿里巴巴矢量圖標庫官網下載圖標（建議：下載的時候先點小購物車添加到庫，然后再點擊右上角的小購物車將所有的圖標添加到一個庫后一起下載）
2.使用
1.解壓
下載了之后，解壓壓縮包，會看到如下文件，其中的demo_index.html文件時教程文件，可以打開在瀏覽器里面查看
之后將除了demo文件以外的所有文件導入到vue項目中(位置隨意，能找到就行)
2.引入并使用
因為我想要彩色圖標，所以按照教程使用svg的方式引入，首先，在index.html中引入iconfont.js
index.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中使用阿里巴巴矢量图标库的图标的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java动画闪烁_优化Java动画编程中
- 下一篇： 在vue项目中使用阿里巴巴矢量图标库