SvgIcon.vue 588 B

123456789101112131415161718192021222324252627282930313233343536
  1. <script setup lang="ts">
  2. const props = defineProps({
  3. prefix: {
  4. type: String,
  5. default: 'icon',
  6. },
  7. name: {
  8. type: String,
  9. required: true,
  10. },
  11. color: {
  12. type: String,
  13. default: '#333',
  14. },
  15. width: {
  16. type: Number,
  17. default: 20,
  18. },
  19. height: {
  20. type: Number,
  21. default: 20,
  22. },
  23. })
  24. const symbolId = computed(() => `#${props.prefix}-${props.name}`)
  25. </script>
  26. <template>
  27. <svg aria-hidden="true" :style="`width:${width}px;height:${height}px`">
  28. <use :href="symbolId" :fill="color" />
  29. </svg>
  30. </template>
  31. <style scoped lang="less">
  32. </style>