编写svgIcon组件，vue2 和vue3版本

最新推荐文章于 2024-12-22 14:35:45 发布

原创

最新推荐文章于 2024-12-22 14:35:45 发布 · 411 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

本文介绍如何在Vue2和Vue3项目中实现SVG图标组件。通过创建SvgIcon组件，可以轻松地管理和使用SVG图标，提高开发效率。文章还详细介绍了如何在项目中注册组件并全局引入SVG图标。

读过一本好书，像交了一个益友。——臧克家

svgicon 组件搭建

提供两种写法，vue2 和vue3

vue2 写法

编写SvgIcon组件

// src/components/SvgIcon/index.vue
<template>
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners"></div>
  <svg v-else :fill="iconColor" :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import {
   
    isExternal } from '@/utils/validate'

export default {
   
   
  name: 'SvgIcon',
  props: {
   
   
    iconClass: {
   
   
      type: String,
      required: true,
      default: ''
    },
    className: {
   
   
      type: String,
      default: ''
    },
    iconColor: {
   
   
      type: String,
      default: ''
    }
  },
  computed: {
   
   
    isExternal() {
   
   
      return isExternal(this.iconClass)
    },
    iconName() {
   
   
      return `#icon-${
     
     this.iconClass}`
    },
    svgClass() {
   
   
      if (this.className) {
   
   
        return 'svg-icon ' + this.className
      } else {
   
   
        return '