iconfont样式优化

src/assets/iconfont/iconfont.css

@@ -0,0 +1,51 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3943555 */
+  src: url('iconfont.woff2?t=1678435002469') format('woff2'),
+       url('iconfont.woff?t=1678435002469') format('woff'),
+       url('iconfont.ttf?t=1678435002469') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-icon-video:before {
+  content: "\e73f";
+}
+
+.icon-icon-home:before {
+  content: "\e737";
+}
+
+.icon-icon-category:before {
+  content: "\e738";
+}
+
+.icon-icon-file:before {
+  content: "\e739";
+}
+
+.icon-icon-study:before {
+  content: "\e73a";
+}
+
+.icon-icon-user:before {
+  content: "\e73b";
+}
+
+.icon-icon-setting:before {
+  content: "\e73c";
+}
+
+.icon-icon-password:before {
+  content: "\e73d";
+}
+
+.icon-a-icon-logout:before {
+  content: "\e73e";
+}
+

src/compenents/header/index.tsx

@@ -6,11 +6,7 @@ import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { LoginOutActionCreator } from "../../store/user/userActions";
 import avatar from "../../assets/images/commen/avatar.png";
-import { createFromIconfontCN } from "@ant-design/icons";
-
-const IconFont = createFromIconfontCN({
-  scriptUrl: "//at.alicdn.com/t/c/font_3943555_yvbihmb40xn.js",
-});
+import "../../assets/iconfont/iconfont.css";
 
 export const Header: React.FC = () => {
   const dispatch = useDispatch();
@@ -29,12 +25,12 @@ export const Header: React.FC = () => {
     {
       label: "修改密码",
       key: "change_password",
-      icon: <IconFont type="icon-icon-password" />,
+      icon: <i className="iconfont icon-icon-password c-red" />,
     },
     {
       label: "退出登录",
       key: "login_out",
-      icon: <IconFont type="icon-a-icon-logout" />,
+      icon: <i className="iconfont icon-a-icon-logout c-red" />,
     },
   ];
   return (

src/compenents/left-menu/index.tsx

@@ -1,14 +1,10 @@
 import React, { useEffect } from "react";
-import { createFromIconfontCN } from "@ant-design/icons";
 import { Menu } from "antd";
 //导出路由跳转hooks函数
 import { useNavigate, Link, useLocation } from "react-router-dom";
 import styles from "./index.module.less";
 import logo from "../../assets/logo.png";
-
-const IconFont = createFromIconfontCN({
-  scriptUrl: "//at.alicdn.com/t/c/font_3943555_yvbihmb40xn.js",
-});
+import "../../assets/iconfont/iconfont.css";
 
 function getItem(label: any, key: any, icon: any, children: any, type: any) {
   return {
@@ -20,18 +16,24 @@ function getItem(label: any, key: any, icon: any, children: any, type: any) {
   };
 }
 const items = [
-  getItem("首页概览", "/", <IconFont type="icon-icon-home" />, null, null),
+  getItem(
+    "首页概览",
+    "/",
+    <i className="iconfont icon-icon-home"  />,
+    null,
+    null
+  ),
   getItem(
     "分类管理",
     "/resource-category",
-    <IconFont type="icon-icon-category" />,
+    <i className="iconfont icon-icon-category" />,
     null,
     null
   ),
   getItem(
     "资源管理",
     "3",
-    <IconFont type="icon-icon-file" />,
+    <i className="iconfont icon-icon-file" />,
     [
       getItem("视频", "/videos", null, null, null),
       getItem("图片", "/images", null, null, null),
@@ -41,14 +43,14 @@ const items = [
   getItem(
     "课程中心",
     "4",
-    <IconFont type="icon-icon-study" />,
+    <i className="iconfont icon-icon-study" />,
     [getItem("线上课", "/course", null, null, null)],
     null
   ),
   getItem(
     "学员管理",
     "5",
-    <IconFont type="icon-icon-user" />,
+    <i className="iconfont icon-icon-user" />,
     [
       getItem("学员", "/member", null, null, null),
       getItem("部门", "/department", null, null, null),
@@ -58,7 +60,7 @@ const items = [
   getItem(
     "系统设置",
     "6",
-    <IconFont type="icon-icon-setting" />,
+    <i className="iconfont icon-icon-setting" />,
     [
       getItem("管理人员", "/system/administrator", null, null, null),
       getItem("系统配置", "/system/index", null, null, null),

src/index.less

@@ -28,7 +28,7 @@ code {
   margin-right: 16px;
 }
 
-.mb-10{
+.mb-10 {
   margin-bottom: 10px;
 }
 
@@ -109,10 +109,6 @@ code {
   color: #04c877;
 }
 
-.c-gray {
-  color: #999999;
-}
-
 .c-red {
   color: #ff4d4f;
 }
@@ -157,6 +153,10 @@ code {
   margin-right: 16px !important;
   margin-top: 8px !important;
   margin-bottom: 8px !important;
+  color: rgba(#333333, 0.3);
+  .ant-menu-title-content {
+    color: #333333;
+  }
 }
 
 .ant-menu-submenu {
@@ -165,6 +165,10 @@ code {
   margin-right: 12px !important;
   margin-top: 6px !important;
   margin-bottom: 6px !important;
+  color: rgba(#333333, 0.3);
+  .ant-menu-title-content {
+    color: #333333;
+  }
 }
 
 .ant-menu,
@@ -187,15 +191,24 @@ code {
 
 .ant-menu-submenu-active > .ant-menu-submenu-title {
   background-color: rgba(#ff4d4f, 0.1) !important;
+  .iconfont {
+    color: rgba(#333333, 0.3);
+  }
 }
 
 .ant-menu-item-active {
   background-color: rgba(#ff4d4f, 0.1) !important;
+  .iconfont {
+    color: rgba(#333333, 0.3) !important;
+  }
 }
 
 .ant-menu-item-selected {
   background-color: #ff4d4f !important;
   color: white !important;
+  .ant-menu-title-content {
+    color: white;
+  }
 }
 
 .ant-menu-submenu-selected > .ant-menu-submenu-title {
@@ -238,3 +251,7 @@ textarea.ant-input {
     color: rgba(#ff4d4f, 0.8) !important;
   }
 }
+
+.c-gray {
+  color: rgba(#333333, 0.3);
+}