如何在vue中封装管理svg组件-让svg跟随主题色

svg/icon-svg-symbol.vue

<template>
  <svg
    class="icon-svg-symbol"
    :class="className"
    :style="{ color: props.color }"
    :width="width"
    :height="height"
  >
    <use :xlink:href="symbolId" :width="width" :height="height"></use>
  </svg>
</template>

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

  const props = withDefaults(
    defineProps<{
      name: string;
      color?: string;
      size?: string;
      width?: string | 0;
      height?: string | 0;
    }>(),
    {
      color: 'currentColor',
      size: '24px',
      width: 0,
      height: 0,
    },
  );

  const symbolId = computed(() => `#${props.name}`);

  const className = computed(() => `icon-${props.name}`);

  const width = computed(() => props.width || props.size);

  const height = computed(() => props.height || props.size);
</script>

svg/index.vue

<template>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display: none">
    <symbol id="add" viewBox="0 0 29 29" fill="none">
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M15.117 6.225h-1.779v7.113H6.225v1.779h7.113v7.113h1.779v-7.113h7.113v-1.779h-7.113V6.225z"
        fill="currentColor"
        fill-opacity=".8"
      />
    </symbol>
    <symbol id="add-upload" viewBox="0 0 36 36" fill="none">
      <g opacity="1">
        <path d="M6.75 18H29.25" stroke="currentColor" stroke-width="1.25" />
        <path d="M6.75 18H29.25" stroke="currentColor" stroke-width="1.25" />
        <path d="M18 29.25L18 6.75" stroke="currentColor" stroke-width="1.25" />
      </g>
    </symbol>
    
  </svg>
</template>
<script setup lang="ts"></script>

实际使用

import IconSvgSymbol from '~/components/svg/icon-svg-symbol.vue';

<IconSvgSymbol
      name="add-upload"
      size="16"
    ></IconSvgSymbol>

原文地址：https://blog.csdn.net/qq_34425377/article/details/144292533

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！