diff --git a/frontend/src/assets/iconfont/iconfont.woff2 b/frontend/src/assets/iconfont/iconfont.woff2
new file mode 100644
index 000000000..342055a86
Binary files /dev/null and b/frontend/src/assets/iconfont/iconfont.woff2 differ
diff --git a/frontend/src/components/svg-icon/svg-icon.vue b/frontend/src/components/svg-icon/svg-icon.vue
new file mode 100644
index 000000000..51dfbe2ca
--- /dev/null
+++ b/frontend/src/components/svg-icon/svg-icon.vue
@@ -0,0 +1,46 @@
+<template>
+    <svg :class="svgClass" aria-hidden="true">
+        <use :xlink:href="iconClassName" :fill="color" />
+    </svg>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+const props = defineProps({
+    iconName: {
+        type: String,
+        required: true,
+    },
+    className: {
+        type: String,
+        default: '',
+    },
+    color: {
+        type: String,
+        default: '#409eff',
+    },
+});
+// 图标在 iconfont 中的名字
+const iconClassName = computed(() => {
+    return `#${props.iconName}`;
+});
+// 给图标添加上类名
+const svgClass = computed(() => {
+    if (props.className) {
+        return `svg-icon ${props.className}`;
+    }
+    return 'svg-icon';
+});
+</script>
+<style scoped>
+.svg-icon {
+    width: 1.5em;
+    height: 1.5em;
+    position: relative;
+    fill: currentColor;
+    vertical-align: -2px;
+    padding-top: 0.3em;
+    padding-bottom: 0.3em;
+    padding-left: 0.3em;
+    padding-right: 0.3em;
+}
+</style>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 24929e78a..096604f9f 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -3,6 +3,7 @@ import App from './App.vue';
 import '@/styles/reset.scss';
 import '@/styles/common.scss';
 import '@/assets/iconfont/iconfont.css';
+import '@/assets/iconfont/iconfont.js';
 import ElementPlus from 'element-plus';
 import Fit2CloudPlus from 'fit2cloud-ui-plus';
 import * as Icons from '@element-plus/icons-vue';
@@ -14,7 +15,9 @@ import directives from '@/directives/index';
 import router from '@/routers/index';
 import I18n from '@/lang/index';
 import pinia from '@/store/index';
+import SvgIcon from './components/svg-icon/svg-icon.vue';
 const app = createApp(App);
+app.component('SvgIcon', SvgIcon);
 app.use(ElementPlus);
 app.use(Fit2CloudPlus);
 Object.keys(Icons).forEach((key) => {