u

code/container-ocr/ocr-vue/src/components/g3-icon/index.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { computed } from "vue";
+
+// Props
+const props = defineProps({
+  icon: {
+    type: String,
+    required: true,
+  },
+  size: {
+    type: [Number, String],
+  },
+  color: {
+    type: String,
+    default: "currentColor",
+  },
+  spin: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["click"]);
+
+const fontStyle = computed(() => ({
+  ...(props.size ? { fontSize: `${props.size}px` } : {}),
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  lineHeight: 1,
+}));
+</script>
+
+<template>
+  <i
+    class="g3-icon"
+    :class="[props.spin && 'g3-icon-spin']"
+    :style="fontStyle"
+    @click="(e) => emit('click', e)"
+  >
+    <Icon v-if="props.icon" :icon="props.icon" :color="props.color" class="g3-icon-svg" />
+    <slot />
+  </i>
+</template>
+
+<style scoped>
+.g3-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+}
+
+.g3-icon-svg {
+  display: block;
+  width: 1em;
+  height: 1em;
+}
+
+.g3-icon-spin {
+  animation: spin 1s linear infinite;
+  --rotate-angle: 360deg;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(var(--rotate-angle));
+  }
+}
+</style>