diff --git a/src/components/ReIcon/index.ts b/src/components/ReIcon/index.ts
index 9861527..233473a 100644
--- a/src/components/ReIcon/index.ts
+++ b/src/components/ReIcon/index.ts
@@ -9,20 +9,24 @@ import { iconComponents } from "/@/plugins/element-plus";
* @returns component
*/
export function findIconReg(icon: string) {
- // fontawesome
- const faReg = /^FA-/;
+ // fontawesome4
+ const fa4Reg = /^fa-/;
+ // fontawesome5+
+ const fa5Reg = /^FA-/;
// iconfont
const iFReg = /^IF-/;
// remixicon
const riReg = /^RI-/;
// typeof icon === "function" 属于SVG
- if (faReg.test(icon)) {
- const text = icon.split(faReg)[1];
+ if (fa5Reg.test(icon)) {
+ const text = icon.split(fa5Reg)[1];
return findIcon(
- text.slice(0, text.indexOf(" ")),
+ text.slice(0, text.indexOf(" ") == -1 ? text.length : text.indexOf(" ")),
"FA",
text.slice(text.indexOf(" ") + 1, text.length)
);
+ } else if (fa4Reg.test(icon)) {
+ return findIcon(icon.split(fa4Reg)[1], "fa");
} else if (iFReg.test(icon)) {
return findIcon(icon.split(iFReg)[1], "IF");
} else if (typeof icon === "function") {
@@ -45,6 +49,14 @@ export function findIcon(icon: String, type = "EL", property?: string) {
components: { FontAwesomeIcon },
template: ``
});
+ } else if (type === "fa") {
+ return defineComponent({
+ name: "faIcon",
+ data() {
+ return { icon: `fa ${icon}` };
+ },
+ template: ``
+ });
} else if (type === "IF") {
return defineComponent({
name: "IfIcon",
diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue
index dd39f7e..ee20f45 100644
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -24,7 +24,7 @@ import { useAppStoreHook } from "/@/store/modules/app";
import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
import { storageLocal, storageSession } from "/@/utils/storage";
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
-import { createNewStyle, writeNewStyle } from "/@/utils/theme";
+import { createNewStyle, writeNewStyle } from "../../theme/element-plus";
import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils";
const router = useRouter();
diff --git a/src/utils/theme/index.ts b/src/layout/theme/element-plus.ts
similarity index 86%
rename from src/utils/theme/index.ts
rename to src/layout/theme/element-plus.ts
index 936e8c4..0f9823a 100644
--- a/src/utils/theme/index.ts
+++ b/src/layout/theme/element-plus.ts
@@ -1,3 +1,4 @@
+/* 动态改变element-plus主题色 */
import rgbHex from "rgb-hex";
import color from "css-color-function";
import epCss from "element-plus/dist/index.css";
@@ -15,13 +16,13 @@ const formula = {
"light-9": "color(primary tint(90%))"
};
-export const writeNewStyle = newStyle => {
+export const writeNewStyle = (newStyle: string): void => {
const style = window.document.createElement("style");
style.innerText = newStyle;
window.document.head.appendChild(style);
};
-export const createNewStyle = primaryStyle => {
+export const createNewStyle = (primaryStyle: string): string => {
const colors = createColors(primaryStyle);
let cssText = getOriginStyle();
Object.keys(colors).forEach(key => {
@@ -33,7 +34,7 @@ export const createNewStyle = primaryStyle => {
return cssText;
};
-export const createColors = primary => {
+export const createColors = (primary: string) => {
if (!primary) return;
const colors = {
primary
@@ -49,7 +50,7 @@ export const getOriginStyle = () => {
return getStyleTemplate(epCss);
};
-const getStyleTemplate = data => {
+const getStyleTemplate = (data: string): string => {
const colorMap = {
"#3a8ee6": "shade-1",
"#409eff": "primary",