feat(components): 添加图标组件

eslint.config.js

@@ -125,6 +125,7 @@ export default tseslint.config(
               '^@/api(/.*|$)',
               '^@/utils(/.*|$)',
               '^@/constants(/.*|$)',
+              '^@/icons(/.*|$)',
               '^@/styles(/.*|$)',
             ],
             // Assets

src/components/SvgIcon.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { addUnit } from '@/utils';
+import { IconfontPrefix } from '@/icons/fonts/iconfont';
+
+import type { CSSProperties } from 'vue';
+import type { IconObject } from '@/types';
+
+interface Props extends IconObject {
+  marginTop?: number;
+}
+
+const props = defineProps<Props>();
+
+defineEmits<{
+  click: [];
+}>();
+
+const iconClass = computed(() => {
+  return IconfontPrefix + props.name;
+});
+
+const iconStyle = computed<CSSProperties>(() => {
+  return {
+    fontSize: props.size && addUnit(props.size),
+    color: props.color,
+    marginTop: props.marginTop && addUnit(props.marginTop),
+  };
+});
+</script>
+
+<template>
+  <i :class="iconClass" :style="iconStyle" @click="$emit('click')"></i>
+</template>

src/styles/global.scss

@@ -1,3 +1,5 @@
+@import '../icons/fonts/iconfont.css';
+
 .use-guide-title {
   font-size: 20px;
   font-weight: 500;

src/types/index.ts

@@ -1,4 +1,5 @@
 import { DictCode } from '@/constants';
+import type { IconfontIcon } from '@/icons/fonts/iconfont';
 
 import type { Component, ComponentPublicInstance } from 'vue';
 import type { StepProps, UploadProps } from 'ant-design-vue';
@@ -35,6 +36,12 @@ export interface OptionItem<T> {
 
 export type CheckedType = boolean | string | number;
 
+export interface IconObject {
+  name: IconfontIcon;
+  size?: number;
+  color?: string;
+}
+
 export type FormRules<T> = {
   [K in keyof T]?: Rule[];
 } & {