vue用Symbol方式全局封装Iconfont阿里巴巴矢量库图标组件

最新推荐文章于 2024-08-23 16:40:42 发布

Elaine Cc

最新推荐文章于 2024-08-23 16:40:42 发布

阅读量1k

点赞数

分类专栏：前端 Vue.js 封装文章标签： vue.js javascript 前端 icons

本文链接：https://blog.csdn.net/qq_41883689/article/details/121695021

版权

本文档介绍了如何在Vue项目中全局封装并使用阿里巴巴矢量库的Iconfont图标组件。步骤包括在components下创建IconSvg文件夹，编写Iconsvg.vue和index.js文件，然后在main.js中引入组件，并在public/index.html中导入阿里巴巴项目链接。最后在组件中通过name属性调用图标，可调整图标大小和颜色。

摘要由CSDN通过智能技术生成

一、在components路径下创建IconSvg文件夹

在这里插入图片描述

并在IconSvg下创建IconSvg.vue文件、index.js文件

Iconsvg.vue文件代码

<template>
  <div>
    <span class="iconfont" :class="iconTag"></span>
    <slot></slot>
  </div>
</template>

<script>
  export default {
   
    name