當前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發布時間：2023/12/10 vue 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 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

<!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> </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中使用阿里巴巴矢量图标库的图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java动画闪烁_优化Java动画编程中
下一篇： java中矩阵怎么打印_在Java编程中