vue3中把封装svg图标为全局组件

A黄俊辉A2024-09-19 0:40

在vue3中我们使用svg图标是下面这样子的

vue 复制代码

    <svg style="width:30px;height:30px;">
      <use xlink:href="#icon-phone" fill="red"></use>
    </svg>

第次使用图标都要写这么多重复的代码，很不方便，所以，如果我们把它封装成全局的组件，就可以很方便的使用了

首先我们要看 svg 图标使用时变化的部分有哪几个

所以我们新建一个组件 SvgIcon

SvgIcon.vue 的代码如下

.vue 复制代码

<script setup lang="ts" name="SvgIcon">
  let props = defineProps({
    iconname: {
      type: String,
      default: '',
    },
    width: {
      type: [Number,String],
      default: 16,
    },
    height: {
      type: [Number,String],
      default: 16,
    },
    color:{
      type:String,
      default:'#666'
    }
  })
</script>

<template>
  <div class="wrapper">
    <svg :style="{width:width+'px',height:height+'px'}">
      <use :xlink:href="`#icon-${iconname}`" :fill="color"/>
    </svg>
  </div>
</template>

<style scoped>

</style>

在页面中调用就可以了

以上是在单组件中调用，每次使用都要引入才可以使用，我们现在把它设置成全局组件，就不需要每个调用的地方都要 import SvgIcon from "@/components/SvgIcon.vue";

我们只需要在 main.ts中注册自定义的组件为全局组件就可以了