feat: 🎸 批量替换了iconfont

src/components/IconFont/index.jsx

@@ -1,12 +1,11 @@
-import "@/assets/iconfont/iconfont.js";
+const baseUrl =
+  "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/";
 
 const IconFont = (props) => {
-  const { className, name, onClick } = props;
+  const { className, src, onClick } = props;
 
   return (
-    <svg className={`icon ${className}`} aria-hidden="true" onClick={onClick}>
+    <img src={`${baseUrl}${src}.png`} className={className} onClick={onClick} />
-      <use xlinkHref={`#${name}`}></use>
-    </svg>
   );
 };
 

src/components/Sidebar/index.css

@@ -145,7 +145,8 @@
 
         .sidebar-menu-icon {
           margin: 0 10px;
-          font-size: 20px;
+          width: 20px;
+          height: 20px;
         }
         .sidebar-menu-text {
           margin-left: 10px;

src/components/Sidebar/index.jsx

@@ -11,7 +11,6 @@ const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
   const navigate = useNavigate();
   const location = useLocation();
   const studentInfo = useSelector((state) => state.student.studentInfo);
-  console.log(studentInfo);
   const handleNavClick = (path) => {
     navigate(path);
   };
@@ -67,7 +66,10 @@ const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
                     key={j.path}
                     onClick={() => handleNavClick(j.path)}
                   >
-                    <IconFont className="sidebar-menu-icon" name={j.icon} />
+                    <IconFont
+                      className="sidebar-menu-icon"
+                      src={location.pathname === j.path ? j.active : j.default}
+                    />
                     <span className="sidebar-menu-text">{j.name}</span>
                   </li>
                 ))}

src/components/StageProgress/index.css

@@ -83,16 +83,24 @@
     color: #0077ff !important;
   }
 
-  .stage-progress-item-text,
+  .stage-progress-item-text {
-  .stage-progress-item-icon {
     font-size: 16px;
     font-weight: 500;
     color: #86909c;
     margin: 0 5px;
   }
 
-  .stage-progress-item-text-active,
+  .stage-progress-item-icon {
-  .stage-progress-item-icon-active {
+    width: 20px;
+    height: 20px;
+  }
+  .stage-progress-item-icon2 {
+    width: 5px;
+    height: 10px;
+    margin: 0 10px;
+  }
+
+  .stage-progress-item-text-active {
     color: #fff !important;
   }
 

src/components/StageProgress/index.jsx

@@ -18,15 +18,12 @@ const StageProgress = () => {
         <span className="stage-progress-item-text stage-progress-item-text-active">
           生涯起航
         </span>
-        <IconFont
+        <IconFont src="recuUY5n0dIJKu" className="stage-progress-item-icon" />
-          name="icon-zuoye"
-          className="stage-progress-item-icon stage-progress-item-icon-active"
-        />
       </li>
       <li className="stage-progress-item">
         <span className="stage-progress-item-step">step2</span>
         <span className="stage-progress-item-text">能力跃升</span>
-        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
+        <IconFont src="recuUY5kKp4Qc5" className="stage-progress-item-icon" />
       </li>
       <li className="stage-progress-text" onClick={handleClickStar}>
         <span>垂直方向选择</span>
@@ -34,16 +31,16 @@ const StageProgress = () => {
       <li className="stage-progress-item">
         <span className="stage-progress-item-step">step3</span>
         <span className="stage-progress-item-text">垂直精进</span>
-        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
+        <IconFont src="recuUY5qlmzVhH" className="stage-progress-item-icon" />
-        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
+        <IconFont src="recuUY5xdpLNXn" className="stage-progress-item-icon2" />
-        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
+        <IconFont src="recuUY5joxSk5C" className="stage-progress-item-icon" />
       </li>
       <li className="stage-progress-item4 ">
         <span className="stage-progress-item-step">step4</span>
         <span className="stage-progress-item-text">决胜求职</span>
-        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
+        <IconFont src="recuUY5lTOco3Q" className="stage-progress-item-icon" />
-        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
+        <IconFont src="recuUY5xdpLNXn" className="stage-progress-item-icon2" />
-        <IconFont name="icon-zuoye" className="stage-progress-item-icon" />
+        <IconFont src="recuUY5luVMCPc" className="stage-progress-item-icon" />
       </li>
     </ul>
   );

src/global.css

@@ -189,14 +189,6 @@ html {
   font-size: 32;
 }
 
-.icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentcolor;
-  overflow: hidden;
-}
-
 /* ==============================
    自定义字体使用示例
    ============================== */
@@ -207,30 +199,3 @@ body {
     "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
     sans-serif;
 }
-
-/* 使用自定义字体的工具类 */
-.font-unitext {
-  font-family: "Unitext", sans-serif;
-}
-
-.font-custom {
-  font-family: "CustomFont", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    sans-serif;
-}
-
-/* 特定场景的字体应用 */
-.title-custom {
-  font-family: "Unitext", serif;
-  font-weight: 900;
-  font-style: italic;
-}
-
-.text-custom {
-  font-family: "CustomFont", sans-serif;
-  font-weight: 400;
-}
-
-.text-custom-bold {
-  font-family: "CustomFont", sans-serif;
-  font-weight: 700;
-}

src/routes/index.jsx

@@ -40,21 +40,24 @@ export default [
         path: "/dashboard",
         name: "主页",
         element: <Dashboard />,
-        icon: "icon-home",
+        default: "recuUY5h1bw5IS",
+        active: "recuUY5gBxD77p",
         showMenuItem: true,
       },
       {
         path: "/profile",
         name: "个人档案",
         element: <PersonalProfile />,
-        icon: "icon-dangan",
+        default: "recuUY58caXGYc",
+        active: "recuUY57QGFVLZ",
         showMenuItem: true,
       },
       {
         path: "/calendar",
         name: "日历",
         element: <CalendarPage />,
-        icon: "icon-rili",
+        default: "recuUY5da0tNkb",
+        active: "recuUY5dvQEYlx",
         showMenuItem: true,
       },
     ],
@@ -68,35 +71,40 @@ export default [
         path: "/public-courses",
         name: "公共课直播间",
         element: <PublicCourses />,
-        icon: "icon-zhibojian",
+        default: "recuUY58WKcNff",
+        active: "recuUY58zAsmTX",
         showMenuItem: true,
       },
       {
         path: "/live",
         name: "课程直播间",
         element: <LivePage />,
-        icon: "icon-kecheng",
+        default: "recuUY5aCUaFlW",
+        active: "recuUY5abx7Arx",
         showMenuItem: true,
       },
       {
         path: "/career-tree",
         name: "就业管家知识树",
         element: <CareerTreePage />,
-        icon: "icon-zhishishu",
+        default: "recuUY59K6SkoO",
+        active: "recuUY59l98AZg",
         showMenuItem: true,
       },
       {
         path: "/homework",
         name: "课后作业",
         element: <HomeworkPage />,
-        icon: "icon-zuoye",
+        default: "recuUY5bpDGGa2",
+        active: "recuUY5aZHbzCC",
         showMenuItem: true,
       },
       {
         path: "/job-strategy",
         name: "定制求职策略",
         element: <JobStrategyPage />,
-        icon: "icon-dingzhicelue",
+        default: "recuUY5h1bw5IS",
+        active: "recuUY5742LbQO",
         showMenuItem: true,
       },
       {
@@ -104,13 +112,13 @@ export default [
         name: "定制求职策略详情",
         element: <JobStrategyDetailPage />,
         showMenu: false,
-        icon: null,
       },
       {
         path: "/interview-simulation",
         name: "线下面试模拟",
         element: <InterviewSimulationPage />,
-        icon: "icon-mianshimoni",
+        default: "recuUY5geqjOp8",
+        active: "recuUY5fQqg5MD",
         showMenuItem: true,
       },
     ],
@@ -124,14 +132,16 @@ export default [
         path: "/expert-support",
         name: "专家支持中心",
         element: <ExpertSupportPage />,
-        icon: "icon-zhichizhongxin",
+        default: "recuUY5hQnbcBY",
+        active: "recuUY5hsxnmk6",
         showMenuItem: true,
       },
       {
         path: "/company-jobs",
         name: "企业内推岗位",
         element: <CompanyJobsPage />,
-        icon: "icon-neitui",
+        default: "recuUY5chbV7Mn",
+        active: "recuUY5bPS4Ixx",
         showMenuItem: true,
       },
       {
@@ -139,27 +149,29 @@ export default [
         name: "企业内推岗位列表",
         element: <CompanyJobsListPage />,
         showMenu: false,
-        icon: null,
       },
       {
         path: "/resume-interview",
         name: "我的简历与面试",
         element: <ResumeInterviewPage />,
-        icon: "icon-jianli",
+        default: "recuUY5dTT3xbx",
+        active: "recuUY5dvQEYlx",
         showMenuItem: true,
       },
       {
         path: "/project-library",
         name: "我的项目库",
         element: <ProjectLibraryPage />,
-        icon: "icon-jianli",
+        default: "recuUY5eH5ZaYR",
+        active: "recuUY5ejgtOo5",
         showMenuItem: true,
       },
       {
         path: "/portfolio",
         name: "我的作品集",
         element: <Portfolio />,
-        icon: "icon-zuopinji",
+        default: "recuUY5frYJKLC",
+        active: "recuUY5f5an72x",
         showMenuItem: true,
       },
     ],