chore: init read-star monorepo

apps/admin/src/components/custom/svg-icon.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { computed, useAttrs } from 'vue'
+
+defineOptions({ name: 'SvgIcon', inheritAttrs: false })
+
+const props = defineProps<Props>()
+
+/**
+ * Props
+ *
+ * - Support iconify and local svg icon
+ * - If icon and localIcon are passed at the same time, localIcon will be rendered first
+ */
+interface Props {
+  /** Iconify icon name */
+  icon?: string
+  /** Local svg icon name */
+  localIcon?: string
+}
+
+const attrs = useAttrs()
+
+const bindAttrs = computed<{ class: string, style: string }>(() => ({
+  class: (attrs.class as string) || '',
+  style: (attrs.style as string) || '',
+}))
+
+const symbolId = computed(() => {
+  const { VITE_ICON_LOCAL_PREFIX: prefix } = import.meta.env
+
+  const defaultLocalIcon = 'no-icon'
+
+  const icon = props.localIcon || defaultLocalIcon
+
+  return `#${prefix}-${icon}`
+})
+
+/** If localIcon is passed, render localIcon first */
+const renderLocalIcon = computed(() => props.localIcon || !props.icon)
+</script>
+
+<template>
+  <template v-if="renderLocalIcon">
+    <svg aria-hidden="true" width="1em" height="1em" v-bind="bindAttrs">
+      <use :xlink:href="symbolId" fill="currentColor" />
+    </svg>
+  </template>
+  <template v-else>
+    <Icon v-if="icon" :icon="icon" v-bind="bindAttrs" />
+  </template>
+</template>
+
+<style scoped></style>