eiacloud-mcp-ui/src/components/svgIcon.vue

<template>
  <svg aria-hidden="true" class="svg-icon" :class="[className, attrs.class]" v-bind="svgAttrs">
    <use :xlink:href="symbolId" />
  </svg>
</template>

<script setup>
import { computed, useAttrs } from "vue";

defineOptions({
  inheritAttrs: false,
});

const props = defineProps({
  prefix: {
    type: String,
    default: "icon",
  },
  name: {
    type: String,
    required: true,
  },
  color: {
    type: String,
    default: "",
  },
  size: {
    type: [String, Number],
    default: "",
  },
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
});

const attrs = useAttrs();

const symbolId = computed(() => `#${props.prefix}-${props.name}`);
const className = computed(() => {
  return {
    [`svg-icon-${props.name}`]: !!props.name,
  };
});
const style = computed(() => {
  const mergedStyle = {};
  if (props.size) {
    mergedStyle.width =
      typeof props.size === "string" ? props.size : `${props.size}px`;
    mergedStyle.height = mergedStyle.width;
  }
  if (props.width && props.height) {
    mergedStyle.width = props.width;
    mergedStyle.height = props.height;
  }
  if (props.color) {
    mergedStyle.color = props.color;
    mergedStyle.fill = props.color;
  }

  const externalStyle = attrs.style;
  if (!externalStyle) return mergedStyle;
  if (Array.isArray(externalStyle)) {
    return externalStyle.reduce(
      (acc, item) => ({ ...acc, ...(item || {}) }),
      mergedStyle,
    );
  }
  if (typeof externalStyle === "object") {
    return { ...mergedStyle, ...externalStyle };
  }
  return mergedStyle;
});

const svgAttrs = computed(() => {
  const { class: _class, style: _style, ...rest } = attrs;
  return { ...rest, style: style.value };
});
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  outline: none;
}

.svg-icon use {
  pointer-events: none;
}
</style>