vue3.0 引入svg-icon组件

最新推荐文章于 2025-04-03 22:42:37 发布

light_guang_IF

最新推荐文章于 2025-04-03 22:42:37 发布

阅读量717

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/light_guang_IF/article/details/122622061

版权

1。在vue项目中的components添加目录SvgIcon:

2. 在目录下添加Index.vue，如上图; Index.vue的内容为：

<template>
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$attrs" />
  <svg v-else :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
import { isExternal } from '@/utils/validate'

export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    isExternal() {
      return isExternal(this.iconClass)
    },
    iconN