在Angular中使用Ant Design of Angular里面的小图标
2019-04-22 11:00
495 查看
公司在开发一个Angular的项目,里面用到了Ant Design of Angular的Icon。
出现了 origin ‘null’ has been blocked by CORS policy… 的问题
解决方法: https://ng.ant.design/components/icon/zh Ant Design of Angular官方文档介绍
在 app.module.ts 里加入你需要的图标(推荐)或者是全部的图标,例如:
import { IconDefinition } from '@ant-design/icons-angular'; import { NgZorroAntdModule, NZ_ICON_DEFAULT_TWOTONE_COLOR, NZ_ICONS } from 'ng-zorro-antd'; // 引入你需要的图标,比如你需要 fill 主题的 AccountBook Alert 和 outline 主题的 Alert,推荐 ✔️ import { AccountBookFill, AlertFill, AlertOutline } from '@ant-design/icons-angular/icons'; const icons: IconDefinition[] = [ AccountBookFill, AlertOutline, AlertFill ]; // 引入全部的图标,不推荐 ❌ // import * as AllIcons from '@ant-design/icons-angular/icons'; // const antDesignIcons = AllIcons as { // [key: string]: IconDefinition; // }; // const icons: IconDefinition[] = Object.keys(antDesignIcons).map(key => antDesignIcons[key]) @NgModule({ declarations: [ AppComponent ], imports : [ NgZorroAntdModule, ], providers : [ { provide: NZ_ICON_DEFAULT_TWOTONE_COLOR, useValue: '#00ff00' }, // 不提供的话,即为 Ant Design 的主题蓝色 { provide: NZ_ICONS, useValue: icons } ], bootstrap : [ AppComponent ] }) export class AppModule { }
相关文章推荐
- 同时使用 Ant Design of React 中 Mention 和 Form
- 详解Ant Design of React的安装和使用方法
- angular里面使用带标签的文本
- Eclipse下使用ANT编译提示OutOfMemory的解决方法
- 使用ant时 出现 java.lang.OutOfMemoryErro r: Java heap space的解决办法
- Ant Design of React—第一节
- Ant Design of React—第二节
- 在Eclipse的Web项目中java里面使用ant进行数字签名步骤详解
- 使用Ant Design Pro,一个企业级开箱即用的中后台前端
- 解决Eclipse下使用ANT编译提示OutOfMemory
- 读取war包中的文件及Ant使用中的OutOfMemoryError解决
- Ant Design 使用小结
- ant design日期控件使用_仅月份
- nodejs(13):使用 ant-design-pro-vue 修改配置文件打包 ,去掉sourceMap,保证代码安全
- 使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室
- 使用ant.design时遇到要格式化Table行的内容的小小解决方法
- Google Material Design的图标字体使用教程
- Ant Design of React—第四节
- react项目-使用antdesign组件库的总结