From d619226f877d397efb2c9f5e65fa37d615294156 Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <31820853+zhengkunwang223@users.noreply.github.com>
Date: Thu, 18 Aug 2022 17:30:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BC=95=E5=85=A5=20iconfont.js=20?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=20SVG?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/assets/iconfont/iconfont.woff2   | Bin 0 -> 1920 bytes
 frontend/src/components/svg-icon/svg-icon.vue |  46 ++++++++++++++++++
 frontend/src/main.ts                          |   3 ++
 3 files changed, 49 insertions(+)
 create mode 100644 frontend/src/assets/iconfont/iconfont.woff2
 create mode 100644 frontend/src/components/svg-icon/svg-icon.vue

diff --git a/frontend/src/assets/iconfont/iconfont.woff2 b/frontend/src/assets/iconfont/iconfont.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..342055a86b7289e95f55a75a176b3df02ed515bb
GIT binary patch
literal 1920
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
G00016ppr%a

literal 0
HcmV?d00001

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) => {