feat(#95): icon support

nav.config.ts

@@ -34,6 +34,10 @@ const c: IConfig = {
     <div>Copyright © 2018-2021 nav3.cn, All Rights Reserved</div>
   `,
 
+  // 阿里巴巴矢量图库 https://www.iconfont.cn/
+  // 用在 Side 主题一级、二级菜单图标展示
+  iconfontUrl: '//at.alicdn.com/t/font_2522843_wl70o31sy6.js',
+
   // 百度统计地址
   // https://tongji.baidu.com/web/welcome/login
   baiduStatisticsUrl: 'https://hm.baidu.com/hm.js?4582be7af7e7c95ef75351e07c6c32ba',

src/components/ellipsis/index.component.html

+<i nz-icon [nzIconfont]="icon" class="icon" *ngIf="icon"></i>
+
 <div #box>
   <div
     nz-tooltip

src/components/ellipsis/index.component.scss

@@ -3,3 +3,9 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.icon {
+  position: absolute;
+  top: 12px;
+  left: 25px;
+}

src/components/ellipsis/index.component.ts

@@ -25,13 +25,14 @@ function getWidthInText(str) {
 })
 export class EllipsisComponent {
   @Input() text: string
-  @ViewChild('box') box: ElementRef;
+  @Input() icon: string
+  @ViewChild('box') box: ElementRef<Element>;
 
   isOver = false
 
   ngOnInit() {
     queueMicrotask(() => {
-      const el = this.box?.nativeElement as HTMLElement
+      const el = this.box?.nativeElement
       if (!el) return
 
       const textWidth = el.clientWidth

src/types/index.d.ts

@@ -78,6 +78,7 @@ export interface IConfig {
   footerContent?: string|null
   baiduStatisticsUrl?: string
   cnzzStatisticsUrl?: string
+  iconfontUrl?: string
   showGithub: boolean
 
   simThemeConfig: {

src/view/admin/index.component.html

@@ -383,10 +383,10 @@
       </nz-form-item>
 
       <nz-form-item>
-        <nz-form-label [nzSpan]="6">图标地址</nz-form-label>
+        <nz-form-label [nzSpan]="6">图标</nz-form-label>
         <nz-form-control [nzSpan]="18">
           <nz-input-group [nzPrefix]="prefixIcon">
-            <input formControlName="icon" nz-input placeholder="https://example.com/favicon.png" />
+            <input formControlName="icon" nz-input />
           </nz-input-group>
 
           <ng-template #prefixIcon>

src/view/index/side/index.component.html

@@ -9,11 +9,16 @@
         <li
           nz-submenu
           [(nzOpen)]="pageIdx === openIndex"
-          [nzTitle]="item.title"
           *ngFor="let item of websiteList; index as pageIdx;"
           [class.remove]="!isLogin && item.ownVisible"
           (nzOpenChange)="openIndex = pageIdx"
+          [nzTitle]="titleTpl"
         >
+          <ng-template #titleTpl>
+            <i nz-icon [nzIconfont]="item.icon" *ngIf="item.icon"></i>
+            <span>{{ item.title }}</span>
+          </ng-template>
+
           <ul>
             <li
               nz-menu-item
@@ -22,7 +27,11 @@
               [nzSelected]="page === pageIdx && id === idIdx"
               (click)="handleSidebarNav(pageIdx, idIdx)" 
             >
-              <app-ellipsis [text]="el.title"></app-ellipsis>
+              <app-ellipsis
+                [text]="el.title"
+                [icon]="el.icon"
+              >
+              </app-ellipsis>
 
               <div
                 *ngIf="page === pageIdx && id === idIdx"
@@ -40,6 +49,7 @@
         </li>
       </ul>
     </nz-sider>
+
     <nz-layout class="inner-layout">
       <nz-content class="content" id="content">
         <div class="search-header dark-bg-deep dark-border-color">

src/view/index/side/index.component.ts

@@ -16,6 +16,7 @@ import { isLogin } from '../../../utils/user'
 import { websiteList } from '../../../store'
 import { LOGO_CDN } from '../../../constants'
 import * as s from '../../../../data/search.json'
+import { NzIconService } from 'ng-zorro-antd/icon'
 
 const searchEngineList: ISearchEngineProps[] = (s as any).default
 
@@ -38,7 +39,17 @@ export default class SideComponent {
   isFirst = false
   isLogin = isLogin
 
-  constructor (private router: Router, private activatedRoute: ActivatedRoute) {}
+  constructor (
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    private iconService: NzIconService
+  ) {
+    if (config.iconfontUrl) {
+      this.iconService.fetchFromIconfont({
+        scriptUrl: config.iconfontUrl
+      })
+    }
+  }
 
   ngOnInit() {
     this.activatedRoute.queryParams.subscribe(() => {