在angular2项目里使用ng-zorro的icon

官方链接：https://ng.ant.design/components/icon/zh#components-icon-demo-basic
前提：项目里已经引入ng-zorro了

先看官方基本使用：

若是我们直接按他们的代码引入到我们的项目，就会报错（有时不报错）。

icon引入步骤

这些是写在app.module.ts里的
看官方引入步骤

这里我使用的是静态引入。

// 引入icon图标（部分引入）
import { IconDefinition } from '@ant-design/icons-angular';
import { NzIconModule } from 'ng-zorro-antd/icon';import { AccountBookFill, AlertFill, AlertOutline } from '@ant-design/icons-angular/icons';const icons: IconDefinition[] = [ AccountBookFill, AlertOutline, AlertFill ];

现在就可以在页面上使用这三个(account、alert)图标了。

我的代码

// 引入icon图标（部分引入）
import { IconDefinition } from '@ant-design/icons-angular';
import { NzIconModule } from 'ng-zorro-antd/icon';
// tslint:disable-next-line:max-line-length
import { BellOutline, SettingOutline, UserOutline, ProfileOutline, GlobalOutline,FullscreenOutline, DownloadOutline, DeleteOutline, FileOutline, PlusOutline } from '@ant-design/icons-angular/icons';// tslint:disable-next-line:max-line-length
const icons: IconDefinition[] = [ BellOutline, SettingOutline, UserOutline, ProfileOutline, GlobalOutline,FullscreenOutline, DownloadOutline, DeleteOutline, FileOutline, PlusOutline];imports: [……NzIconModule.forRoot(icons)]

使用时，就按官方的使用方式就好

也可以使用第二种方式：动态引入

angular.json文件中引入

 "assets": ["src/favicon.ico","src/assets",{"glob": "**/*","input": "./node_modules/@ant-design/icons-angular/src/inline-svg/","output": "src/assets/"}],

angular.json文件发生变化，重启服务器，在运行就可以使用icon了

在angular2项目里使用ng-zorro的icon相关推荐

angular2+onsenui--怎么在angular2项目里引入onsenui框架
在angular2项目里安装onsenui框架,这里使用npm命令. 一.在目录下,shift+鼠标右键–在此处打开命令窗口键入命令:npm install onsenui ngx-onsenui ...
angular2项目里使用正则表达式
先踩坑 test() 方法是一个正则表达式方法. test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false. 我们学习正则表达式时,一般 ...
angular2项目里使用 Spin(加载中)
何时使用页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑. 效果 ng-zorro官方链接:https://ng.ant.design/components/spin/z ...
ngzorro html源码,angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)
使用 NG ZORRO 在上一篇文章中,我们已经安装了NG ZORRO,并在跟模块中引入了,在子模块中使用还需要再次引入. 编辑layout模块中的header组件在layout.module.ts ...
angular项目集成ng zorro 和ng alain
angular项目集成 ng zorro和ng alain(mock 和acl权限)学习笔记这段时间,比较忙,很久没有写博客了.作为后端开发人员,第一次接触angular,以下是个人的学习心得和D ...
Angular2项目中浏览器拦截弹出窗口的解决方法
Angular2项目中浏览器拦截弹出窗口的解决方法为什么把项目是Angular2的放到了前边? 因为正常也页面网上已经很多解决方案.请自行百度或Google. 现象:当window.open为用户触 ...
Angular 项目里 angular.json 文件内容的学习笔记
看一个基于 Angular 的 SAP Spartacus 项目里 angular.json 的例子: version: The configuration-file version. newProj ...
angular ng zorro框架日期框无法自适应宽度的解决方法
如果我们使用ng zorro框架的日期框时,就会发现,日期框的宽度总是固定的,无法像输入框一样自适应父节点<nz-form-control [nzSpan]="12"> ...
【Angular2】如何创建一个Angular2项目
[前言] 这个也是从晓风写的文档上借鉴来的, 我做端到端测试的时候用的就是这个项目. [正文] 项目流程安装webstorm-持续集成服务器下载地址:http://www.jetbrains.co ...
Ng Zorro配置
Ng Zorro配置文章目录 Ng Zorro配置一.app.module里配置二.引入样式 1.使用全部组件样式 2.引入组件模块全局安装:npm i ng-zorro-antd g --s ...

在angular2项目里使用ng-zorro的icon

先看官方基本使用：

icon引入步骤

在angular2项目里使用ng-zorro的icon相关推荐

最新文章

热门文章