技術標籤：vscodeangular2ts

• 以下操作要在安裝nodejs之後進行

• 目錄

  • • 在Angular專案中匯入NG-ZORRO
    • 使用NG-ZORRO中的小圖示

在Angular專案中匯入NG-ZORRO

1.安裝angular腳手架工具

npm install -g @angular/cli

2.新建angular專案（project-name是你的專案名稱）

ng new PROJECT-NAME

3.在新建的專案中完成NG-ZORRO的初始化配置

cd project-name
ng add ng-zorro-antd

自動彈出的提示訊息按照如下設定即可：

4.瀏覽器開啟Angular專案進行開發除錯

ng serve

使用NG-ZORRO中的小圖示

1.在官網中搜索需要的小圖示

2.選好以後先定下名字，然後在app.module中加入icon元件

例：引用AccountBookFill, AlertOutline, AlertFill 3個小圖示

// 部分引入icon圖示
import { NzIconModule } from 'ng-zorro-antd/icon';
import { IconDefinition } from '@ant-design/icons-angular';
import { AccountBookFill, AlertFill, AlertOutline }
 
 from '@ant-design/icons-angular/icons';
const icons: IconDefinition[] = [AccountBookFill, AlertOutline, AlertFill];
imports: [
    NzIconModule.forRoot(icons),
]

3.在需要小圖示的html檔案下輸入如下語句顯示小圖示

<i nz-icon nzType="alert" nzTheme="outline"></i>
<i nz-icon nzType="account-book"
 
 nzTheme="fill"></i>
<i nz-icon nzType="alert" nzTheme="fill"></i>

ps：這個語句可以通過點選官網的小圖示複製

4.在css檔案下輸入如下語句可以調整小圖示大小

[nz-icon] {
    font-size: 36px;
    }