vue3 通用svg组件

最新推荐文章于 2025-09-26 17:40:53 发布

原创

最新推荐文章于 2025-09-26 17:40:53 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #css

SvgIcon.vue 组件

// SvgIcon.vue
<template>
  <svg
    :class="['svg-icon', className]"
    :style="svgStyle"
    :width="size"
    :height="size"
    aria-hidden="true"
  >
    <use :href="symbolId" />
  </svg>
</template>

<script setup lang="ts">
import {
   
    computed } from 'vue'

interface Props {
   
   
  // symbol的名字
  name: string
  // 图标大小
  size?: string | number
  // 自定义类名
  className?: string
  // 颜色
  color?: string
  // 旋转角度
  rotate?: number
  // 是否旋转