first commit

src/components/icons/SvgIcon.vue

@@ -0,0 +1,47 @@
+<template>
+  <component
+    :is="component"
+    v-if="component"
+    class="svg-icon"
+    :style="iconStyle"
+    aria-hidden="true"
+    focusable="false"
+  />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+import { iconRegistry } from '@/components/icons/registry'
+
+const props = defineProps({
+  name: { type: String, required: true },
+  size: { type: [String, Number], default: '1.25rem' },
+  color: { type: String, default: 'currentColor' },
+})
+
+const component = computed(() => {
+  const c = iconRegistry[props.name]
+  if (!c && import.meta.env.DEV) {
+    console.warn(`[SvgIcon] unknown icon "${props.name}"`)
+  }
+  return c
+})
+
+const sizeValue = computed(() => (typeof props.size === 'number' ? `${props.size}px` : props.size))
+
+const iconStyle = computed(() => ({
+  width: sizeValue.value,
+  height: sizeValue.value,
+  color: props.color,
+  flexShrink: 0,
+}))
+</script>
+
+<style lang="scss" scoped>
+.svg-icon {
+  display: inline-block;
+  vertical-align: middle;
+  fill: currentcolor;
+}
+</style>