fix: replace iconfont

README.md

@@ -41,8 +41,8 @@
 
 
 ## 主题
-- [sim](https://nav3.cn/#/sim)
-- [light](https://nav3.cn/#/light)
+- [sim 预览](https://nav3.cn/#/sim)
+- [light 预览](https://nav3.cn/#/light)
 
 
 

package-lock.json

 {
   "name": "nav",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/assets/img/collapse.svg

-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1605331830443" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2710" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M491.904 380.638H112.171c-16.032 0-29.091 10.99-29.091 24.437 0 13.446 13.059 24.436 29.09 24.436h379.864c16.032 0 29.09-10.99 29.09-24.436-0.129-13.576-13.187-24.437-29.22-24.437z m0 216.049H112.171c-16.032 0-29.091 10.99-29.091 24.436 0 13.447 13.059 24.437 29.09 24.437h379.864c16.032 0 29.09-10.99 29.09-24.437-0.129-13.446-13.187-24.436-29.22-24.436z m-0.517 216.307H112.56c-16.291 0-29.608 10.99-29.608 24.436 0 13.447 13.188 24.437 29.608 24.437h378.828c16.42 0 29.608-10.99 29.608-24.437 0-13.446-13.188-24.436-29.608-24.436zM681.19 334.739h93.737v316.897c0 16.033 10.99 29.091 24.437 29.091 13.446 0 24.307-13.058 24.307-29.09V334.738h93.737c14.74 0 21.85-3.878 23.273-6.723 1.164-2.327-0.13-9.438-8.145-19.394l-102.53-128.258c-8.404-10.602-19.264-16.291-30.513-16.291-11.378 0-22.109 5.818-30.513 16.29L666.32 308.753c-7.886 9.955-9.18 17.066-8.016 19.393 0.905 2.716 8.146 6.594 22.885 6.594z" p-id="2711" fill="#515151"></path><path d="M112.688 861.737h768c16.291 0 29.608-10.99 29.608-24.436s-13.188-24.436-29.608-24.436h-768c-16.29 0-29.608 10.99-29.608 24.436 0 13.576 13.188 24.436 29.608 24.436z m379.216-697.535H112.171c-16.032 0-29.091 10.99-29.091 24.436 0 13.447 13.059 24.437 29.09 24.437h379.864c16.032 0 29.09-10.99 29.09-24.437-0.129-13.446-13.187-24.436-29.22-24.436z" p-id="2712" fill="#515151"></path></svg>
\ No newline at end of file

src/assets/img/down-arrow.svg

-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1605324128195" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2831" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M927.804 352.193l-415.804 415.632-415.803-415.632 63.616-63.445 352.209 352.017 352.102-352.017z" p-id="2832" fill="#515151"></path></svg>
\ No newline at end of file

src/assets/img/edit.svg

-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1591844876974" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4723" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M946.176 896a34.304 34.304 0 0 1 0 68.608H77.824a34.304 34.304 0 0 1 0-68.608h868.352z m0-622.08L401.92 818.176 189.44 839.68l21.504-211.968 473.088-473.088 71.168-71.168c31.744-31.744 87.552-31.744 119.296 0l71.168 71.168c15.872 15.872 24.576 37.376 24.576 59.904 0.512 22.016-8.192 43.52-24.064 59.392zM266.24 762.88l103.936-10.752 431.616-431.616-93.696-93.696L276.48 658.432 266.24 762.88zM815.104 127.488c-4.096 0-8.192 1.536-11.264 4.608l-46.592 46.592 93.696 93.696 46.592-46.592c6.144-6.144 6.144-16.384 0-22.528l-71.168-71.168c-3.072-3.072-7.168-4.608-11.264-4.608z" p-id="4724" fill="#707070"></path></svg>
\ No newline at end of file

src/assets/img/search.svg

-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1561294786879" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2030" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M950.820202 899.620202l-168.210101-168.080808c64.646465-74.731313 100.072727-169.115152 100.072727-268.8 0-109.89899-42.79596-213.20404-120.50101-290.779798S581.171717 51.329293 471.40202 51.329293c-109.89899 0-213.20404 42.79596-290.779798 120.50101-77.705051 77.705051-120.50101 181.010101-120.50101 290.779798 0 109.89899 42.79596 213.20404 120.50101 290.779798 77.705051 77.705051 181.010101 120.50101 290.779798 120.50101 90.763636 0 177.00202-29.220202 248.113132-83.135353l170.149494 170.149495c8.40404 8.40404 19.523232 12.670707 30.642425 12.670707s22.109091-4.266667 30.642424-12.670707c16.808081-16.937374 16.808081-44.347475-0.129293-61.284849z m-804.20202-437.010101c0-179.070707 145.713131-324.654545 324.654545-324.654545 179.070707 0 324.654545 145.713131 324.654546 324.654545 0.129293 179.070707-145.454545 324.783838-324.525253 324.783838S146.618182 641.680808 146.618182 462.610101z m0 0" fill="" p-id="2031"></path></svg>
\ No newline at end of file

src/components/fixbar/index.component.html

 <div class="fixbar">
-  <div class="wrapper" [class.active]="collapsed">
-    <img class="icon" src="assets/img/collapse.svg" (click)="collapse()">
+  <div class="wrapper" [class.active]="collapsed" (click)="collapse()">
+    <i class="iconfont iconweibiaoti25 collapse"></i>
   </div>
 
-  <div class="wrapper">
-    <img class="icon" src="assets/img/down-arrow.svg" (click)="scrollTop()">
+  <!-- <div class="wrapper" (click)="toggleMode()">
+    <i class="iconfont icondark" [class.iconA]="isDark" [class.dark]="!isDark"></i>
+  </div> -->
+
+  <div class="wrapper" (click)="scrollTop()">
+    <i class="iconfont iconjiantouarrow483 icon arrow"></i>
   </div>
 </div>

src/components/fixbar/index.component.scss

@@ -5,19 +5,41 @@
   right: 15px;
 
   .wrapper {
-    margin-top: 10px;
+    width: 40px;
+    height: 40px;
     transition: .1s linear;
-    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    border-radius: 50%;
 
     &.active {
       transform: rotate(-90deg);
     }
+
+    &:hover {
+      background-color: #ccc;
+      color: #fff;
+    }
+  }
+
+  i {
+    display: inline-block;
+    font-size: 20px;
   }
 
-  .icon {
-    width: 20px;
-    height: 20px;
+  .arrow {
     transform: rotate(180deg);
     cursor: pointer;
+    font-weight: bold;
+  }
+
+  .collapse {
+    transform: rotate(-270deg);
+
+    &.active {
+      transform: rotate(-360deg);
+    }
   }
 }

src/components/fixbar/index.component.ts

@@ -9,6 +9,7 @@ export class FixbarComponent {
 
   @Input() collapsed: boolean
   @Output() onCollapse = new EventEmitter()
+  isDark: boolean = false
 
   scrollTop() {
     window.scrollTo({
@@ -20,4 +21,8 @@ export class FixbarComponent {
   collapse() {
     this.onCollapse.emit()
   }
+
+  toggleMode() {
+    this.isDark = !this.isDark
+  }
 }

src/components/search-engine/search-engine.component.html

@@ -16,7 +16,7 @@
       (keyup)="onKey($event)"
     />
 
-    <div class="search-icon" (click)="triggerSearch()"></div>
+    <i class="search-icon iconfont iconsousuo" (click)="triggerSearch()"></i>
   </div>
 
   <div class="engine-main" *ngIf="showEngine">

src/components/search-engine/search-engine.component.scss

@@ -54,10 +54,7 @@ $width: 500px;
       position: absolute;
       top: 50%;
       right: 15px;
-      width: 20px;
-      height: 20px;
-      background: url("../../assets/img/search.svg") no-repeat;
-      background-size: 20px 20px;
+      font-size: 18px;
       transform: translateY(-50%);
       cursor: pointer;
     }

src/dark.scss

+.dark {
+
+  .sim-bg {
+    background-color: #0d1117 !important;
+  }
+}

src/index.html

@@ -35,6 +35,7 @@
   <meta name="keywords" content="导航,前端资源,社区站点,设计师,实用工具,学习资源,运营,网络安全,node.js">
   <link rel="icon" href="assets/logo.png">
   <link rel ="apple-touch-icon" href="assets/logo.png">
+  <link rel="stylesheet" href="//at.alicdn.com/t/font_2267418_s387cnlk8dr.css">
 </head>
 <body>
 

src/styles.scss

-/*! https://github.com/xjh22222228 */
+/*! https://github.com/xjh22222228/nav */
+@import "./dark.scss";
 
 * {
   margin: 0;
@@ -110,12 +111,11 @@ b {
 
 // 折叠箭头
 .down-arrow {
-  width: 15px;
-  height: 15px;
   align-self: center;
   margin-left: 15px;
   cursor: pointer;
   transition: .1s linear;
+  color: #666;
 
   &.active {
     transform: rotate(-90deg);

src/view/index/light/index.component.html

@@ -5,7 +5,7 @@
       (click)="onCollapseAll()"
       [class.active]="websiteList[page].nav[id].collapsed"
     >
-      <img src="assets/img/collapse.svg">
+      <i class="iconfont iconweibiaoti25"></i>
     </div>
 
     <nav class="top-nav user-select-none">
@@ -26,7 +26,8 @@
             class="tag" 
             *ngFor="let item of websiteList[page].nav; let i = index" 
             [class.active]="id === i" 
-            (click)="handleSidebarNav(i)">
+            (click)="handleSidebarNav(i)"
+          >
             <a class="ripple-btn" *ngIf="item.title">{{ item.title }}</a>
           </li>
         </ul>
@@ -46,24 +47,12 @@
                   {{ item.title }} x {{ item.nav.length }}
                 </span>
 
-                <img
-                  src="assets/img/down-arrow.svg"
-                  class="down-arrow"
-                  [class.active]="item.collapsed" 
-                  draggable="false"
-                  alt=""
+                <i
+                  class="iconfont iconjiantouarrow483 down-arrow"
+                  [class.active]="item.collapsed"
                   (click)="onCollapse(item, i)"
-                />
-
-                <a
-                  *ngIf="GIT_REPO_URL"
-                  [href]="GIT_REPO_URL + '/tree/master/data'"
-                  class="edit"
-                  target="_blank"
-                  rel="noopener noreferer"
-                  title="编辑"
                 >
-                </a>
+                </i>
               </h2>
 
               <img
@@ -71,7 +60,6 @@
                 [src]="item.icon"
                 class="side-logo"
                 (error)="onSideLogoError($event)"
-                alt="" 
               />
             </div>
 

src/view/index/light/index.component.scss

@@ -26,17 +26,17 @@
     justify-content: center;
     align-items: center;
     cursor: pointer;
-    transform: rotate(-180deg);
+    transform: rotate(-270deg);
     transition: .1s linear;
     overflow: hidden;
 
     &.active {
-      transform: rotate(-270deg);
+      transform: rotate(-360deg);
     }
 
-    img {
-      width: 25px;
-      height: 25px;
+    .iconfont {
+      font-size: 22px;
+      color: #666;
     }
   }
 
@@ -216,12 +216,6 @@
       padding: 10px 30px 10px 15px;
       display: flex;
       justify-content: space-between;
-
-      &:hover {
-        .edit {
-          display: inline-block;
-        }
-      }
     }
 
     .block-title {
@@ -230,19 +224,6 @@
       color: #3F51B5;
       align-self: center;
       display: flex;
-
-      .edit {
-        display: none;
-        position: absolute;
-        top: -2px;
-        right: -35px;
-        width: 15px;
-        height: 15px;
-        margin-left: 5px;
-        margin-top: 5px;
-        background: url("https://xiejiahe.gitee.io/nav/assets/img/edit.svg");
-        background-size: 15px;
-      }
     }
 
     .top {

src/view/index/sim/index.component.html

@@ -41,34 +41,29 @@
           <div class="title" *ngIf="item.title" (click)="onCollapse(item, i)">
             {{ item.title }} x {{ item.nav.length }}
 
-            <img
-              src="assets/img/down-arrow.svg"
-              class="down-arrow"
-              [class.active]="item.collapsed" 
-              draggable="false"
-            />
+            <i class="iconfont iconjiantouarrow483 down-arrow" [class.active]="item.collapsed"></i>
           </div>
 
           <ul class="ul" *ngIf="!item.collapsed">
             <li *ngFor="let ele of item.nav">
               <a class="url-box" [href]="ele.url" target="_blank" rel="noopener noreferer">
-                <div class="left">
-                  <img
-                    *ngIf="ele.icon || item.icon || websiteList[page].nav[id].icon; else icon"
-                    [src]="ele.icon || item.icon || websiteList[page].nav[id].icon"
-                    alt=""
-                    class="icon"
-                    (error)="onImgError($event)"
-                  >
-                  <ng-template #icon>
-                    <span class="icon"></span>
-                  </ng-template>
+                <div class="box-wrapper">
+                  <div class="left">
+                    <img
+                      *ngIf="ele.icon || item.icon || websiteList[page].nav[id].icon; else icon"
+                      [src]="ele.icon || item.icon || websiteList[page].nav[id].icon"
+                      class="icon"
+                      (error)="onImgError($event)"
+                    >
+                    <ng-template #icon>
+                      <span class="icon"></span>
+                    </ng-template>
+                  </div>
+  
+                  <div class="right" [innerHtml]="ele.name"></div>
                 </div>
 
-                <div class="right">
-                  <em class="name" [innerHtml]="ele.name"></em>
-                  <div class="desc" [innerHtml]="ele.desc"></div>
-                </div>
+                <div class="desc" [innerHtml]="ele.desc"></div>
               </a>
 
               <div class="mark" *ngIf="ele.language && ele.language.length > 0">

src/view/index/sim/index.component.scss

@@ -112,6 +112,7 @@ $width: 1200px;
         padding: 10px 0;
         color: #3f51b5;
         font-weight: 500;
+        display: flex;
         cursor: pointer;
       }
 
@@ -156,22 +157,23 @@ $width: 1200px;
       }
 
       .url-box {
-        display: flex;
         height: 100%;
 
+        .box-wrapper {
+          display: flex;
+        }
+
         .right {
           flex: 1;
           margin-left: 10px;
-        }
-
-        .name {
           font-size: 16px;
           font-weight: 600;
           color: #273a52;
+          align-self: center;
         }
 
         .desc {
-          margin-top: 5px;
+          margin-top: 8px;
           color: #4c5d73;
         }
       }