!1921 svgIcon 组件支持 symbol 引用，规范图标资源引入

Merge pull request !1921 from 夜鹰/v2

Web/src/theme/font-awesome/font-awesome.scss → Web/src/assets/icons/font-awesome/font-awesome.scss

@@ -4,9 +4,11 @@
  */
 @font-face {
 	font-family: 'FontAwesome';
-	src: url('/@/theme/font-awesome/fontawesome-webfont.eot?v=4.7.0') format('embedded-opentype'), url('/@/theme/font-awesome/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
-		url('/@/theme/font-awesome/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('/@/theme/font-awesome/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
-		url('/@/theme/font-awesome/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
+	src: url('./fontawesome-webfont.eot?v=4.7.0') format('embedded-opentype'), 
+         url('./fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
+		 url('./fontawesome-webfont.woff?v=4.7.0') format('woff'), 
+         url('./fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
+		 url('./fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
 	font-weight: normal;
 	font-style: normal;
 }

Web/src/theme/iconfont/font_2298093_rnp72ifj3ba.scss → Web/src/assets/icons/iconfont/font_2298093_rnp72ifj3ba.scss

@@ -1,7 +1,8 @@
 @font-face {
 	font-family: 'iconfont'; /* Project id 2298093 */
-	src: url('/@/theme/iconfont/font_2298093_rnp72ifj3ba.woff2?t=1669683406059') format('woff2'), url('/@/theme/iconfont/font_2298093_rnp72ifj3ba.woff?t=1669683406059') format('woff'),
-		url('/@/theme/iconfont/font_2298093_rnp72ifj3ba.ttf?t=1669683406059') format('truetype');
+	src: url('./font_2298093_rnp72ifj3ba.woff2?t=1669683406059') format('woff2'), 
+         url('./font_2298093_rnp72ifj3ba.woff?t=1669683406059') format('woff'),
+		 url('./font_2298093_rnp72ifj3ba.ttf?t=1669683406059') format('truetype');
 }
 
 .iconfont {

Web/src/assets/icons/index.scss

@@ -0,0 +1,2 @@
+@use './iconfont/font_2298093_rnp72ifj3ba.scss' as *;
+@use './font-awesome/font-awesome.scss' as *;

Web/src/assets/icons/index.ts

@@ -0,0 +1,5 @@
+// 图标类名数组
+import { iconfonntClassList } from './iconfont/font_2298093_rnp72ifj3ba';
+import { fontAwesomeClassList } from './font-awesome/font-awesome';
+
+export { iconfonntClassList, fontAwesomeClassList }

Web/src/components/svgIcon/index.vue

@@ -1,7 +1,12 @@
 <template>
-	<i v-if="isShowIconSvg" class="el-icon" :style="setIconSvgStyle">
+	<i v-if="isShowIconEle" class="el-icon" :style="setIconSvgStyle">
 		<component :is="getIconName" />
 	</i>
+    <i v-else-if="isShowIconSvg" class="el-icon" :style="setIconSvgStyle">
+        <svg aria-hidden="true">
+            <use :xlink:href="'#' + getIconName"></use>
+        </svg>
+    </i>
 	<div v-else-if="isShowIconImg" :style="setIconImgOutStyle">
 		<img :src="getIconName" :style="setIconSvgInsStyle" />
 	</div>
@@ -37,9 +42,13 @@ const getIconName = computed(() => {
 	return props?.name;
 });
 // 用于判断 element plus 自带 svg 图标的显示、隐藏
-const isShowIconSvg = computed(() => {
+const isShowIconEle = computed(() => {
 	return props?.name?.startsWith('ele-');
 });
+// 用于判断自定义 svg 图标的显示、隐藏
+const isShowIconSvg = computed(() => {
+	return props?.name?.startsWith('svg-');
+});
 // 用于判断在线链接、本地引入等图标显示、隐藏
 const isShowIconImg = computed(() => {
 	return linesString.find((str) => props.name?.startsWith(str));

Web/src/theme/index.scss

@@ -6,5 +6,4 @@
 @use './media/media.scss' as *;
 @use './waves.scss' as *;
 @use './dark.scss' as *;
-@use './iconfont/font_2298093_rnp72ifj3ba.scss' as *;
-@use './font-awesome/font-awesome.scss' as *;
+@use '../assets/icons/index.scss' as *;

Web/src/utils/getStyleSheets.ts

@@ -1,8 +1,7 @@
 import { nextTick } from 'vue';
 import * as svg from '@element-plus/icons-vue';
 // import 本地样式类名数组
-import { iconfonntClassList } from '/@/theme/iconfont/font_2298093_rnp72ifj3ba';
-import { fontAwesomeClassList } from '/@/theme/font-awesome/font-awesome';
+import { iconfonntClassList, fontAwesomeClassList } from '../assets/icons';
 
 // 获取阿里字体图标
 const getAlicdnIconfont = () => {