最近在寫后臺管理系統，設計給出的圖標是從阿里巴巴矢量圖標官網上找的，因此需要引入圖標。

效果圖：

阿里巴巴矢量圖標庫頁面：

大神實現symbol類型的阿里圖標組件的方法：https://blog.csdn.net/weixin_50586667/article/details/118354326

symbol類型的阿里圖標使用步驟

1.下載js文件，到本地

2.將下載好的js放到static文件中，靜態文件不需要編譯，并在index.html文件中引入

3.封裝阿里圖標組件

<template><svg class="icon" aria-hidden="true"><use :xlink:href="'#'+iconClass"></use></svg> </template><script> export default {name: "SvgIcon",props: {iconClass: {required: true,type:String,},}, }; </script><style lang="scss" scoped> </style>

因為是可以全局使用，因此可以將組件放置到src/components文件夾中。

4.掛載到全局，在main.js文件中注冊全局組件

注意：注冊全局組件時，Vue.component('名字',組件),此處的名字對應組件注冊中的name。也可以指定一個別名。

5.使用組件，iconClass對應阿里圖標官網中的每個圖標字段

6.修改圖標組件的大小

完成！！！

總結

以上是生活随笔為你收集整理的阿里巴巴矢量图标库的引入——symbol类型的使用——阿里图标组件封装的全部內容，希望文章能夠幫你解決所遇到的問題。

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