yixiang-web/src/components/SvgIcon/index.vue

<script setup>
import { computed } from 'vue'

const Props = defineProps({
  prefix: {
    type: String,
    default: 'icon',
  },
  name: {
    type: String,
    required: true,
  },
  color: {
    type: String,
    default: '#ffffff',
  },
  size: {
    type: Number,
    default: 12,
  },
  rgap: {
    type: Number,
    default: 0
  }
})

const symbolId = computed(() => `#${Props.prefix}-${Props.name}`)

const getStyle = computed(() => {
  const { size, rgap } = Props
  let pixel = `${size}px`
  let styles = {
    width: pixel,
    height: pixel,
    fontSize: pixel,
  }

  if (rgap) {
    styles['paddingRight'] = `${rgap}px`
  }

  return styles
})

</script>

<template>
  <i class="el-iconx" :style="getStyle">
    <svg aria-hidden="true">
      <use :xlink:href="symbolId" :fill="color" />
    </svg>
  </i>
</template>

<style lang="scss" scoped>
.el-iconx {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;

  svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: middle;
  }
}
</style>