angular引入ng-zorro中的icon图标方法

1.angular.json中引入

 "assets": ["src/favicon.ico","src/assets",{"glob": "**/*","input": "./node_modules/@ant-design/icons-angular/src/inline-svg/","output": "/assets/"}],"styles": ["src/styles.less","node_modules/ng-zorro-antd/ng-zorro-antd.min.css"],

2.在app.module中引入以下文件

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];
@NgModule({declarations: [AppComponent],imports: [NzIconModule.forRoot(icons),],providers: [],bootstrap: [AppComponent]
})

在需要的html文件用需要的图标即可，但有些图标显示不出来还报错，这时可以考虑引入外部的svg图标，方法如下(例子)：
1.在assets文件中新建icons文件用于存放外部引入的svg图标。
2.在icons中新建icon-def.ts文件

export interface IconDef{name:string;svg:string
}

在icons中新建需要引入的图标文件，例：table-up.ts文件（这里是可以创建多个引入的图标文件）

import {IconDef} from './icon-def'
export const TABLE_UP:
IconDef={name:'table-up',svg:'svg的路径'
}

4.在icons中新建index.ts文件，引入icon图标文件，例：

import { IconDef } from './icon-def';
import { TABLE_UP } from './table-up';export const CUSTOM_ICONS: Array<IconDef>=[TABLE_UP,（需要使用到什么icon图标文件就引入什么文件）
]

5.在app文件下新建icons-provider.moudle.ts文件，管理引入的外部svg,例：

import { NgModule } from '@angular/core';
import { NZ_ICONS, NzIconModule, NzIconService } from 'ng-zorro-antd/icon';
import { IconDef } from 'src/assets/icons/icon-def';
import { CUSTOM_ICONS } from '../assets/icons/index'const icons: never[] = [
]
@NgModule({imports: [NzIconModule],exports: [NzIconModule],providers: [{provide: NZ_ICONS,useValue: icons}]
})
export class IconsProviderModule {constructor(private nzIconService: NzIconService) {// 管理引入的外部svgCUSTOM_ICONS.forEach((icon: IconDef)=> {          this.nzIconService.addIconLiteral(`ftc:${icon.name}`,icon.svg)});}
}

6.最后使用方式，在html中引入即可

<i nz-icon nzType="ftc:table-up" nzTheme="outline"></i>

angular引入ng-zorro中的icon图标方法相关推荐

ngzorro html源码,angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)
使用 NG ZORRO 在上一篇文章中,我们已经安装了NG ZORRO,并在跟模块中引入了,在子模块中使用还需要再次引入. 编辑layout模块中的header组件在layout.module.ts ...
用字体在网页中画Icon图标
第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...
vue在列表和下拉框中显示icon图标
vue在列表和下拉框中显示icon图标一. 在项目中引入阿里云icon图标二. 在data中定义icon图标列表三. 在下拉框中显示icon图标四. 在列表中显示icon图标五. 在el-c ...
在网页中制作icon图标
用字体在网页中画icon图标第一步:获取字体资源 IconMoon网站 https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮 ...
在网页中画ICON图标
相信很多前端开发人员都做过导航栏图标,其实很多网站的导航栏图标使用的技术无外乎两种,CSS Sprite雪碧图和字体图标.下面就带大家一起熟悉一下这两种在网页中画ICON图标的方式. 一.使用CSS ...
在Android Studio中使用icon图标
在Android中使用icon图标下载ttf文件进入iconfont.cn,并登录选择自己要的icon图标选择添加入库,点击自己的库选择下载代码引用新建Assets文件夹将下载的icon ...
javafx 带图片的按钮菜单_怎么制作ICON图标图片转ICON图标方法
怎么制作ICON图标图片转ICON图标方法?接下来就与大家分享一下,有关利用软件制作ICON图标的方法,同时也介绍利用相关转换工具实现图片转ICON的方法. 方法/步骤首先,我们需要借助如图所示的 ...
手把手教你在vue中使用icon图标，附demo代码
icon图标的使用 START icon图标的使用,对于番茄我来说,算是一个痛点吧.写这篇文章之前,也看了不少别人有关图标使用的博客.想了很久,还是想自己写一篇属于番茄我自己的一篇图标相关的博客.一来 ...
微信小程序项目中使用icon图标
效果: 步骤: 1.先让ui负责人把你的账号加入到项目中,加入到项目中后就可以在icon图标库中看到该项目 2.在小程序中使用新建一个view,在上面加一个class,复制icon名字上去即可,注意 ...
在alv grid中的列中设置icon图标
如果想输出红绿灯,其中红路灯那栏的头是不能改变text的,所以要是想自己个性化text就要改用icon输入红绿灯图标方法是在structure中添加一个field 为 char型 4位长. 然后在 ...

angular引入ng-zorro中的icon图标方法

angular引入ng-zorro中的icon图标方法相关推荐

最新文章

热门文章