13/7/1404

src/components/BasicPacks/BasicIcon.vue

@@ -0,0 +1,53 @@
+<template>
+  <span
+      ref="refIcon"
+      :style="{ color }"
+      :class="[prefixCls]"
+      class="!flex"
+      v-html="tempIcon"
+  ></span>
+</template>
+
+<script lang="ts" setup>
+import icons from '@/components/BasicPacks/tools/icons/icons.json'
+import {usePrefix} from "@/utils/usePrefix";
+import {computed, onMounted, ref, withDefaults, defineProps} from "vue";
+
+interface Props {
+  icon: string
+  color?: string | null
+  size?: string | number
+  strokeWidth?:string | number
+}
+const props = withDefaults(defineProps<Props>(), {
+  color: null,
+})
+
+const { prefixCls } = usePrefix('icons')
+const tempIcon = ref<string>()
+const refIcon = ref<HTMLDivElement>()
+tempIcon.value = icons[`${props.icon}`] as string
+const color = computed(() => {
+  return props.color
+})
+
+onMounted(() => {
+  if (props.size) {
+    const svg: SVGElement = refIcon.value?.children[0] as SVGElement
+    svg.setAttribute('width', props.size as string)
+    svg.setAttribute('height', props.size as string)
+  }
+})
+</script>
+
+
+<style lang="less" scoped>
+@prefix: ~'@{prefixCls}-icons';
+
+.@{prefix} {
+  & :deep(svg path) {
+    stroke: currentColor;
+    stroke-width: v-bind("props.strokeWidth");
+  }
+}
+</style>