chunk-2IBF5VAW.js

import{a as je,b as Ge,c as qe,d as $e,e as Qe}from"./chunk-KOK2NVCE.js";import{a as Xe,b as Je}from"./chunk-AD3UFUCY.js";import{c as Ze,d as Ye}from"./chunk-W3ZGG7DM.js";import{a as Ue,b as We}from"./chunk-RJ5HVYNM.js";import{d as Oe,f as Be,g as Fe}from"./chunk-A6OSWDMP.js";import{a as Ve,b as He}from"./chunk-AD5Q64SP.js";import{a as Me,b as Ae,c as Le}from"./chunk-URJ2X72U.js";import{d as be}from"./chunk-6RTNK4M3.js";import{a as Te,b as Ne}from"./chunk-FCKASAEG.js";import{a as ae,c as le}from"./chunk-JSS74LJC.js";import{h as L,n as De,o as ke,t as Pe,u as Re}from"./chunk-MFM2NZ5P.js";import"./chunk-A2YA6DUN.js";import"./chunk-PWVMOSPY.js";import{$ as u,$a as v,Ag as ye,Be as oe,Cg as Ie,Db as e,Dc as ne,Eb as E,Eg as we,Fa as Z,Fb as I,Ga as _,Ib as k,Jb as P,Kb as R,Ma as w,Na as Y,Oe as re,Pe as me,Re as ce,Se as M,Tb as ee,Ue as de,Va as C,Vf as ge,Xa as y,Y as g,Za as V,Zf as Ee,_ as h,_a as b,aa as B,ab as d,ba as F,bb as n,bc as te,bf as se,bg as fe,ca as f,cb as t,cf as pe,da as z,db as s,eb as X,ef as xe,fa as q,fb as H,ga as $,hb as J,ib as K,if as Se,jf as he,k as G,kb as U,kf as ue,mb as S,ob as p,og as ze,ra as Q,sb as T,tb as N,th as A,ub as D,ug as _e,vh as ve,xd as ie,xg as Ce,ya as m}from"./chunk-HVHL7L73.js";import"./chunk-DAQOROHW.js";var at=()=>({showPreviewIcon:!1,showRemoveIcon:!1});function lt(l,a){return this.trackByFn(a)}function rt(l,a){if(l&1&&(n(0,"nz-badge",19),e(1),t()),l&2){let i=p().$implicit;m(),I(" ",i," ")}}function mt(l,a){if(l&1&&e(0),l&2){let i=p().$implicit;I(" ",i," ")}}function ct(l,a){if(l&1){let i=U();n(0,"li",16),S("click",function(c){let r=B(i).$implicit,x=p(2);return F(x.onIconClick(c,r))}),s(1,"nz-icon",17),n(2,"span",18),C(3,rt,2,1,"nz-badge",19)(4,mt,1,1),t()()}if(l&2){let i=a.$implicit,o=p(2);m(),d("nzType",o.kebabCase(i))("nzTheme",o.currentTheme),m(2),y(o.isNewIcon(i)?3:4)}}function dt(l,a){if(l&1&&(n(0,"h3"),e(1),t(),n(2,"ul",15),b(3,ct,5,3,"li",null,lt,!0),t()),l&2){let i=a.$implicit,o=a.$index,c=p();m(),E(c.localeObj[i]),m(2),v(c.displayedNames[o].icons)}}function st(l,a){if(l&1){let i=U();n(0,"tr")(1,"td",30)(2,"nz-icon",31),S("click",function(c){let r=B(i).$implicit,x=p(4);return F(x.onIconClick(c,r.type))}),t()(),n(3,"td"),s(4,"nz-progress",32),t()()}if(l&2){let i=a.$implicit,o=p(4);m(2),d("nzTooltipTitle",i.type)("nzType",i.type)("nzTheme",o.currentTheme),m(2),d("nzPercent",i.score)}}function pt(l,a){if(l&1&&(n(0,"div",29),e(1),t(),n(2,"table")(3,"thead")(4,"tr")(5,"th",30),e(6),t(),n(7,"th"),e(8),t()()(),n(9,"tbody"),b(10,st,5,4,"tr",null,V),t()()),l&2){let i=p(3);m(),I(" ",i.localeObj.picSearcherResultTip," "),m(5),I(" ",i.localeObj.picSearcherThIcon," "),m(2),E(i.localeObj.picSearcherThScore),m(2),v(i.icons)}}function xt(l,a){if(l&1&&s(0,"nz-result",28),l&2){let i=p(3);d("nzSubTitle",i.localeObj.picSearcherServerError)}}function St(l,a){if(l&1&&(n(0,"nz-upload",21)(1,"p",22),s(2,"nz-icon",23),t(),n(3,"p",24),e(4),t(),n(5,"p",25),e(6),t()(),n(7,"nz-spin",26)(8,"div",27),C(9,pt,12,3),C(10,xt,1,1,"nz-result",28),t()()),l&2){let i=p(2);d("nzCustomRequest",i.customRequestUploadFile)("nzFileList",i.fileList)("nzShowUploadList",ee(9,at)),m(4),E(i.localeObj.picSearcherUploadText),m(2),E(i.localeObj.picSearcherUploadHint),m(),d("nzSpinning",i.loading)("nzTip",i.localeObj.picSearcherMatching),m(2),y(i.icons.length?9:-1),m(),y(i.error?10:-1)}}function ht(l,a){if(l&1&&(n(0,"nz-spin",20),s(1,"div",33),t()),l&2){let i=p(2);d("nzTip",i.localeObj.picSearcherModelLoading)}}function ut(l,a){if(l&1&&(J(0),C(1,St,11,10)(2,ht,2,1,"nz-spin",20),K()),l&2){let i=p();m(),y(i.modelLoaded?1:2)}}var gt=["templateRef"];function Et(l,a){if(l&1&&(X(0,"span")(1,"code",1),e(2),H(),e(3," copied \u{1F389} "),H()),l&2){let i=p();m(2),E(i.copiedCode)}}var ft=["StepBackward","StepForward","FastBackward","FastForward","Shrink","ArrowsAlt","Down","Up","Left","Right","CaretUp","CaretDown","CaretLeft","CaretRight","UpCircle","DownCircle","LeftCircle","RightCircle","DoubleRight","DoubleLeft","VerticalLeft","VerticalRight","VerticalAlignTop","VerticalAlignMiddle","VerticalAlignBottom","Forward","Backward","Rollback","Enter","Retweet","Swap","SwapLeft","SwapRight","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","PlayCircle","UpSquare","DownSquare","LeftSquare","RightSquare","Login","Logout","MenuFold","MenuUnfold","BorderBottom","BorderHorizontal","BorderInner","BorderOuter","BorderLeft","BorderRight","BorderTop","BorderVerticle","PicCenter","PicLeft","PicRight","RadiusBottomleft","RadiusBottomright","RadiusUpleft","RadiusUpright","Fullscreen","FullscreenExit"],zt=["Question","QuestionCircle","Plus","PlusCircle","Pause","PauseCircle","Minus","MinusCircle","PlusSquare","MinusSquare","Info","InfoCircle","Exclamation","ExclamationCircle","Close","CloseCircle","CloseSquare","Check","CheckCircle","CheckSquare","ClockCircle","Warning","IssuesClose","Stop"],_t=["Edit","Form","Copy","Scissor","Delete","Snippets","Diff","Highlight","AlignCenter","AlignLeft","AlignRight","BgColors","Bold","Italic","Underline","Strikethrough","Redo","Undo","ZoomIn","ZoomOut","FontColors","FontSize","LineHeight","Dash","SmallDash","SortAscending","SortDescending","Drag","OrderedList","UnorderedList","RadiusSetting","ColumnWidth","ColumnHeight"],Ct=["AreaChart","PieChart","BarChart","DotChart","LineChart","RadarChart","HeatMap","Fall","Rise","Stock","BoxPlot","Fund","Sliders"],yt=["Android","Apple","Windows","Linux","Ie","Chrome","Github","Aliwangwang","Dingding","Dingtalk","WeiboSquare","WeiboCircle","Weibo","Taobao","TaobaoCircle","Twitter","Wechat","Youtube","AlipayCircle","Skype","Qq","MediumWorkmark","Gitlab","Medium","Linkedin","GooglePlus","Dropbox","Facebook","Html5","Java","JavaScript","Python","Docker","Kubernetes","Ruby","DotNet","Codepen","CodeSandbox","CodeSandboxCircle","Amazon","Google","CodepenCircle","Alipay","AntDesign","AntCloud","Aliyun","Zhihu","Slack","SlackSquare","Behance","BehanceSquare","Dribbble","DribbbleSquare","Instagram","Yuque","Alibaba","Yahoo","Reddit","Discord","Sketch","Baidu","Bilibili","HarmonyOS","OpenAI","Pinterest","Spotify","TikTok","Twitch","WechatWork","WhatsApp","X"],Ke={direction:ft,suggestion:zt,edit:_t,data:Ct,logo:yt},It=["border-outter","radius-upright","colum-width","eye-invisible","batch-folding","code-sandbox","code-sandbox-circle"],O=class l{platformId=g(Q);message=g(be);viewContainerRef=g(Z);displayedNames=[];categoryNames=[];currentTheme="outline";localeObj={chooseTheme:"Select the Icon Theme",direction:"Directional Icons",suggestion:"Suggested Icons",edit:"Editor Icons",data:"Data Icons",other:"Application Icons",logo:"Brand and Logos",search:"Search icon here. Click icon to copy code.",picSearcherIntro:"AI Search by image is online, you are welcome to use it! \u{1F389}",picSearcherMatching:"Matching...",picSearcherModelLoading:"Model is loading...",picSearcherResultTip:"Matched the following icons for you:",picSearcherServerError:"Predict service is temporarily unavailable",picSearcherThIcon:"Icon",picSearcherThScore:"Probability",picSearcherTitle:"Search by image",picSearcherUploadHint:"We will find the best matching icon based on the image provided",picSearcherUploadText:"Click, drag, or paste file to this area to upload"};searchingString="";error=!1;loading=!1;modelLoaded=!1;modalVisible=!1;popoverVisible=!1;fileList=[];icons=[];document=g(q);trackByFn=a=>`${a}-${this.currentTheme}`;kebabCase=a=>et(a);isNewIcon=a=>It.indexOf(a)>-1;onIconClick(a,i){let o=a.target,c=`<nz-icon nzType="${et(i)}" nzTheme="${this.currentTheme}" />`;o.classList.add("copied"),this._copy(c).then(()=>{setTimeout(()=>{o.classList.remove("copied")},1e3)});let r=this.getCopiedStringTemplateRef(c);this.message.success(r)}_copy(a){return new Promise(i=>{let o=null;try{o=this.document.createElement("textarea"),o.style.height="0px",o.style.opacity="0",o.style.width="0px",this.document.body.appendChild(o),o.value=a,o.select(),this.document.execCommand("copy"),i(a)}finally{o&&o.parentNode&&o.parentNode.removeChild(o)}})}prepareIcons(){let a=this.currentTheme,i=re[a].filter(r=>!["interation","canlendar"].includes(r)).map(r=>bt(r)),o=Object.keys(Ke).map(r=>({name:r,icons:Ke[r].filter(x=>i.indexOf(x)>-1&&x.toLowerCase().includes(this.searchingString.toLowerCase()))})),c=i.filter(r=>o.filter(({name:x})=>x!=="all").every(x=>!x.icons.includes(r))).filter(r=>r.toLowerCase().includes(this.searchingString.toLocaleLowerCase()));o.push({name:"other",icons:c}),o=o.filter(({icons:r})=>!!r.length),this.displayedNames=o,this.categoryNames=o.map(({name:r})=>r)}setIconsShouldBeDisplayed(a){this.currentTheme=a,this.prepareIcons()}onSearchChange(){this.prepareIcons()}getCopiedStringTemplateRef(a){this.viewContainerRef.clear();let i=this.viewContainerRef.createComponent(W);return i.instance.copiedCode=a,i.instance.templateRef}loadModel(){if(window.antdIconClassifier){this.onLoad();return}let a=this.document.createElement("script"),i="https://cdn.jsdelivr.net/gh/lewis617/antd-icon-classifier@0.0/dist/main.js";a.type="text/javascript",a.src=i,a.onload=async()=>{await window.antdIconClassifier?.load(),this.onLoad()},a.onerror=()=>{throw new Error(`${ie} cannot load assets of antd icon classifier from source "${i}".`)},this.document.head.appendChild(a)}onLoad(){this.modelLoaded=!0,this.document.addEventListener("paste",this.onPaste)}onPaste=a=>{let i=a.clipboardData&&a.clipboardData.items,o=null;if(i&&i.length){let c=0;for(;c<i.length;){if(i[c].type.indexOf("image")!==-1){o=i[c].getAsFile();break}c++}}o&&this.uploadFile(o)};customRequestUploadFile=a=>G(!0).subscribe(()=>{this.uploadFile(a.file)});uploadFile=a=>{this.loading=!0;let i=new FileReader;i.onload=()=>{this.toImage(i.result).then(this.predict),this.fileList=[{uid:"1",name:a.name,status:"done",url:i.result}]},i.readAsDataURL(a)};toImage(a){return new Promise(i=>{let o=new Image;o.setAttribute("crossOrigin","anonymous"),o.src=a,o.onload=function(){i(o)}})}predict=a=>{try{let i=window.antdIconClassifier?.predict(a);this.icons=i.map(o=>({score:Math.ceil(o.score*100),type:o.className.replace(/\s/g,"-")})),this.loading=!1,this.error=!1}catch{this.loading=!1,this.error=!0}};toggleModal(){this.modalVisible=!this.modalVisible,this.popoverVisible=!1,this.fileList=[],this.icons=[],localStorage.getItem("disableIconTip")||localStorage.setItem("disableIconTip","true")}constructor(){g(ce).addIcon(me),g($).onDestroy(()=>{this.document.removeEventListener("paste",this.onPaste),this.viewContainerRef.clear()})}ngOnInit(){this.setIconsShouldBeDisplayed("outline"),ne(this.platformId)&&(this.loadModel(),this.popoverVisible=!localStorage.getItem("disableIconTip"))}static \u0275fac=function(i){return new(i||l)};static \u0275cmp=_({type:l,selectors:[["nz-page-demo-icon-en"]],decls:29,vars:10,consts:[[1,"icon-selector"],[3,"ngModelChange","ngModel"],["nz-radio-button","","nzValue","outline"],["d","M864 64H160C107 64 64 107 64 160v704c0 53 43 96 96 96h704c53 0 96-43 96-96V160c0-53-43-96-96-96z m-12 800H172c-6.6 0-12-5.4-12-12V172c0-6.6 5.4-12 12-12h680c6.6 0 12 5.4 12 12v680c0 6.6-5.4 12-12 12z"],["nz-radio-button","","nzValue","fill"],["d","M864 64H160C107 64 64 107 64 160v704c0 53 43 96 96 96h704c53 0 96-43 96-96V160c0-53-43-96-96-96z"],["nz-radio-button","","nzValue","twotone"],["d","M16 512c0 273.932 222.066 496 496 496s496-222.068 496-496S785.932 16 512 16 16 238.066 16 512z m496 368V144c203.41 0 368 164.622 368 368 0 203.41-164.622 368-368 368z"],["nz-input","",3,"ngModelChange","placeholder","ngModel"],["nzInputSuffix","",1,"icon-pic-searcher"],["nz-popover","",1,"icon-pic-btn",3,"nzPopoverVisibleChange","click","nzPopoverTrigger","nzPopoverVisible","nzPopoverContent"],["viewBox","64 64 896 896"],["d","M864 248H728l-32.4-90.8a32.07 32.07 0 00-30.2-21.2H358.6c-13.5 0-25.6 8.5-30.1 21.2L296 248H160c-44.2 0-80 35.8-80 80v456c0 44.2 35.8 80 80 80h704c44.2 0 80-35.8 80-80V328c0-44.2-35.8-80-80-80zm8 536c0 4.4-3.6 8-8 8H160c-4.4 0-8-3.6-8-8V328c0-4.4 3.6-8 8-8h186.7l17.1-47.8 22.9-64.2h250.5l22.9 64.2 17.1 47.8H864c4.4 0 8 3.6 8 8v456zM512 384c-88.4 0-160 71.6-160 160s71.6 160 160 160 160-71.6 160-160-71.6-160-160-160zm0 256c-53 0-96-43-96-96s43-96 96-96 96 43 96 96-43 96-96 96z"],[3,"nzVisibleChange","nzOnCancel","nzTitle","nzVisible","nzFooter"],[4,"nzModalContent"],[1,"anticons-list"],[3,"click"],[3,"nzType","nzTheme"],[1,"anticon-class"],["nzDot",""],[3,"nzTip"],["nzType","drag","nzAccept","image/jpeg, image/png","nzListType","picture",3,"nzCustomRequest","nzFileList","nzShowUploadList"],[1,"ant-upload-drag-icon"],["nzType","inbox","nzTheme","outline"],[1,"ant-upload-text"],[1,"ant-upload-hint"],[3,"nzSpinning","nzTip"],[1,"icon-pic-search-result"],["nzStatus","500","nzTitle","503",3,"nzSubTitle"],[1,"result-tip"],[1,"col-icon"],["nz-tooltip","","nzTooltipPlacement","right",3,"click","nzTooltipTitle","nzType","nzTheme"],["nzStrokeLinecap","round",3,"nzPercent"],[2,"height","100px"]],template:function(i,o){i&1&&(n(0,"h3"),e(1),t(),n(2,"div",0)(3,"nz-radio-group",1),S("ngModelChange",function(r){return o.setIconsShouldBeDisplayed(r)}),n(4,"label",2)(5,"nz-icon"),f(),n(6,"svg"),s(7,"path",3),t()(),e(8," Outlined "),t(),z(),n(9,"label",4)(10,"nz-icon"),f(),n(11,"svg"),s(12,"path",5),t()(),e(13," Filled "),t(),z(),n(14,"label",6)(15,"nz-icon"),f(),n(16,"svg"),s(17,"path",7),t()(),e(18," Two Tone "),t()(),z(),n(19,"nz-input-search")(20,"input",8),R("ngModelChange",function(r){return P(o.searchingString,r)||(o.searchingString=r),r}),S("ngModelChange",function(){return o.onSearchChange()}),t(),n(21,"div",9)(22,"nz-icon",10),R("nzPopoverVisibleChange",function(r){return P(o.popoverVisible,r)||(o.popoverVisible=r),r}),S("click",function(){return o.toggleModal()}),f(),n(23,"svg",11),s(24,"path",12),t()()()()(),b(25,dt,5,1,null,null,V),z(),n(27,"nz-modal",13),R("nzVisibleChange",function(r){return P(o.modalVisible,r)||(o.modalVisible=r),r}),S("nzOnCancel",function(){return o.toggleModal()}),w(28,ut,3,1,"ng-container",14),t()),i&2&&(m(),E(o.localeObj.chooseTheme),m(2),d("ngModel",o.currentTheme),m(17),d("placeholder",o.localeObj.search),k("ngModel",o.searchingString),m(2),d("nzPopoverTrigger",null),k("nzPopoverVisible",o.popoverVisible),d("nzPopoverContent",o.localeObj.picSearcherIntro),m(3),v(o.categoryNames),m(2),d("nzTitle",o.localeObj.picSearcherTitle),k("nzVisible",o.modalVisible),d("nzFooter",null))},dependencies:[ze,ge,Ee,fe,le,ae,Se,xe,de,M,we,Ce,Ie,ye,_e,Fe,Be,Oe,Ne,Te,Le,Ae,Me,Ye,Ze,We,Ue,ve,A,He,Ve,Je,Xe],styles:["h3[_ngcontent-%COMP%]{margin:1.6em 0 .6em;font-size:18px}ul.anticons-list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   .anticon[_ngcontent-%COMP%]{font-size:24px}.icon-selector[_ngcontent-%COMP%]{display:flex;justify-content:space-between}nz-input-search[_ngcontent-%COMP%]{margin-left:10px;flex:1 1 0}"]})},W=class l{copiedCode;templateRef;static \u0275fac=function(i){return new(i||l)};static \u0275cmp=_({type:l,selectors:[["nz-page-demo-icon-copied-code"]],viewQuery:function(i,o){if(i&1&&T(gt,7),i&2){let c;N(c=D())&&(o.templateRef=c.first)}},inputs:{copiedCode:"copiedCode"},decls:2,vars:0,consts:[["templateRef",""],[1,"copied-code"]],template:function(i,o){i&1&&Y(0,Et,4,1,"ng-template",null,0,te)},encapsulation:2})};function wt(l){return l.replace(/-\w/g,(a,i)=>l.charAt(i+1).toUpperCase())}function bt(l){let a=wt(l);return a.charAt(0).toUpperCase()+a.slice(1)}function et(l){return l.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/([A-Z])([A-Z])/g,"$1-$2").replace(/([0-9])([a-zA-Z]+)$/g,"-$1-$2").replace(/[\s_]+/g,"-").toLowerCase()}function vt(l,a){l&1&&(n(0,"span"),e(1,"Icon"),t())}function Tt(l,a){l&1&&s(0,"span")}var j=class l{expanded=!1;codeBoxes;goLink(a){window&&(window.location.hash=a)}expandAllCode(){this.expanded=!this.expanded,this.codeBoxes.forEach(a=>a.expandCode(this.expanded))}static \u0275fac=function(i){return new(i||l)};static \u0275cmp=_({type:l,selectors:[["nz-demo-icon"]],viewQuery:function(i,o){if(i&1&&T(L,5),i&2){let c;N(c=D())&&(o.codeBoxes=c)}},decls:1034,vars:17,consts:[[1,"toc-affix",3,"nzOffsetTop"],["nzShowInkInFixed","",3,"nzClick","nzAffix"],["nzHref","#when_to_use","nzTitle","When To Use",1,"toc-indent-1"],["nzHref","#examples","nzTitle","Examples",1,"toc-indent-1"],["nzHref","#components-icon-demo-basic","nzTitle","Basic usage",1,"toc-indent-2"],["nzHref","#components-icon-demo-twotone","nzTitle","Two-tone icon and colorful icon",1,"toc-indent-2"],["nzHref","#components-icon-demo-custom","nzTitle","Custom icon",1,"toc-indent-2"],["nzHref","#components-icon-demo-iconfont","nzTitle","Use iconfont.cn",1,"toc-indent-2"],["nzHref","#components-icon-demo-namespace","nzTitle","Namespace",1,"toc-indent-2"],["nzHref","#api","nzTitle","API",1,"toc-indent-1"],[1,"markdown"],[4,"nzSpaceItem"],["name","icon","description","Semantic vector graphics.","language","en"],["id","list_of_icons"],["onclick","window.location.hash = 'list_of_icons'",1,"anchor"],["href","https://ant.design/components/icon/","target","_blank","rel","noopener"],[1,"page-demo"],["id","examples"],["nzType","appstore","nz-tooltip","","nzTooltipTitle","Expand All Code",1,"code-box-expand-trigger",3,"click"],["onclick","window.location.hash = 'examples'",1,"anchor"],["nz-row","",3,"nzGutter"],["nz-col","",3,"nzXl","nzSpan"],["nzTitle","Basic usage","nzVersion","","nzId","components-icon-demo-basic","nzSelector","nz-demo-icon-basic","nzLink","components-icon-demo-basic","nzGenerateCommand","ng g ng-zorro-antd:icon-basic <name>","nzComponentName","NzDemoIconBasicComponent","nzIframeSource","","nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/icon/demo/basic.md",3,"nzIframe","nzIframeHeight"],["demo",""],["intro",""],["nzTitle","Custom icon","nzVersion","","nzId","components-icon-demo-custom","nzSelector","nz-demo-icon-custom","nzLink","components-icon-demo-custom","nzGenerateCommand","ng g ng-zorro-antd:icon-custom <name>","nzComponentName","NzDemoIconCustomComponent","nzIframeSource","","nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/icon/demo/custom.md",3,"nzIframe","nzIframeHeight"],["nzTitle","Namespace","nzVersion","","nzId","components-icon-demo-namespace","nzSelector","nz-demo-icon-namespace","nzLink","components-icon-demo-namespace","nzGenerateCommand","ng g ng-zorro-antd:icon-namespace <name>","nzComponentName","NzDemoIconNamespaceComponent","nzIframeSource","","nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/icon/demo/namespace.md",3,"nzIframe","nzIframeHeight"],["nzTitle","Two-tone icon and colorful icon","nzVersion","","nzId","components-icon-demo-twotone","nzSelector","nz-demo-icon-twotone","nzLink","components-icon-demo-twotone","nzGenerateCommand","ng g ng-zorro-antd:icon-twotone <name>","nzComponentName","NzDemoIconTwotoneComponent","nzIframeSource","","nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/icon/demo/twotone.md",3,"nzIframe","nzIframeHeight"],["nzTitle","Use iconfont.cn","nzVersion","","nzId","components-icon-demo-iconfont","nzSelector","nz-demo-icon-iconfont","nzLink","components-icon-demo-iconfont","nzGenerateCommand","ng g ng-zorro-antd:icon-iconfont <name>","nzComponentName","NzDemoIconIconfontComponent","nzIframeSource","","nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/icon/demo/iconfont.md",3,"nzIframe","nzIframeHeight"],["href","http://iconfont.cn/","target","_blank","rel","noopener"],[1,"markdown","api-container"],["id","api"],["onclick","window.location.hash = 'api'",1,"anchor"],["id","nz-icon,_nz-icon"],[1,"api-type-label","component"],["onclick","window.location.hash = 'nz-icon,_nz-icon'",1,"anchor"],["id","nziconservice"],[1,"api-type-label","service"],["onclick","window.location.hash = 'nziconservice'",1,"anchor"],["id","svg_icons"],["onclick","window.location.hash = 'svg_icons'",1,"anchor"],[1,"language-html"],[1,"token","tag"],[1,"token","punctuation"],[1,"token","attr-name"],[1,"token","attr-value"],[1,"token","punctuation","attr-equals"],["id","static_loading_and_dynamic_loading"],["onclick","window.location.hash = 'static_loading_and_dynamic_loading'",1,"anchor"],[1,"language-typescript"],[1,"token","keyword"],[1,"token","string"],[1,"token","comment"],[1,"token","operator"],[1,"token","function"],[1,"language-json"],[1,"token","property"],["id","add_icons_in_lazy-loaded_components"],["onclick","window.location.hash = 'add_icons_in_lazy-loaded_components'",1,"anchor"],[1,"token","decorator"],[1,"token","at","operator"],[1,"token","class-name"],["id","set_default_twotone_color"],["onclick","window.location.hash = 'set_default_twotone_color'",1,"anchor"],["id","custom_font_icon"],["onclick","window.location.hash = 'custom_font_icon'",1,"anchor"],["href","https://www.iconfont.cn/help/detail?helptype=code","target","_blank","rel","noopener"],["id","namespace"],["onclick","window.location.hash = 'namespace'",1,"anchor"],["id","faq"],["onclick","window.location.hash = 'faq'",1,"anchor"],["id","all_my_icons_are_gone"],["onclick","window.location.hash = 'all_my_icons_are_gone'",1,"anchor"],["id","there_are_two_similar_icons_in_a_lesscodegreaterandlt;spanandgt;andlt;/spanandgt;less/codegreater_tag_what_happened?"],["onclick","window.location.hash = 'there_are_two_similar_icons_in_a_lesscodegreaterandlt;spanandgt;andlt;/spanandgt;less/codegreater_tag_what_happened?'",1,"anchor"],["id","i_want_to_import_all_icons_statically_what_should_i_do?"],["onclick","window.location.hash = 'i_want_to_import_all_icons_statically_what_should_i_do?'",1,"anchor"],["href","/components/icon/en#static-loading-and-dynamic-loading"],[1,"token","builtin"],["id","does_dynamic_loading_affect_web_pagesand#39;_performance?"],["onclick","window.location.hash = 'does_dynamic_loading_affect_web_pagesand#39;_performance?'",1,"anchor"],["id","how_do_i_know_an_iconand#39;s_corresponding_module_to_import?"],["onclick","window.location.hash = 'how_do_i_know_an_iconand#39;s_corresponding_module_to_import?'",1,"anchor"]],template:function(i,o){i&1&&(n(0,"article")(1,"nz-affix",0)(2,"nz-anchor",1),S("nzClick",function(r){return o.goLink(r)}),s(3,"nz-link",2)(4,"nz-link",3)(5,"nz-link",4)(6,"nz-link",5)(7,"nz-link",6)(8,"nz-link",7)(9,"nz-link",8)(10,"nz-link",9),t()(),n(11,"section",10)(12,"h1")(13,"nz-space"),w(14,vt,2,0,"span",11)(15,Tt,1,0,"span",11),t()(),s(16,"component-meta",12),n(17,"section",10),u(),n(18,"h2",13)(19,"span"),e(20,"List of icons"),t(),n(21,"a",14),e(22,"#"),t()(),n(23,"p"),e(24,"We keep in syncing with "),n(25,"a",15),e(26,"antd"),t(),e(27,"."),t(),h(),t(),n(28,"section",16),s(29,"nz-page-demo-icon-en"),t(),n(30,"h2",17)(31,"span"),e(32,"Examples"),t(),n(33,"nz-icon",18),S("click",function(){return o.expandAllCode()}),t(),n(34,"a",19),e(35,"#"),t()()(),n(36,"div",20)(37,"div",21)(38,"nz-code-box",22),s(39,"nz-demo-icon-basic",23),n(40,"div",24),u(),n(41,"p"),e(42,"Use "),n(43,"code"),e(44,"<nz-icon>"),t(),e(45," to declare the component. Use the "),n(46,"code"),e(47,"nzType"),t(),e(48,` property to specify the corresponding icon.
You can set different theme styles of icons by setting the `),n(49,"code"),e(50,"nzTheme"),t(),e(51," property, and you can achieve the animation rotation effect by setting the "),n(52,"code"),e(53,"nzSpin"),t(),e(54," property."),t(),n(55,"blockquote")(56,"p")(57,"code"),e(58,"<nz-icon>"),t(),e(59," is supported since v19, while "),n(60,"code"),e(61,"<span nz-icon>"),t(),e(62," and "),n(63,"code"),e(64,"<i nz-icon>"),t(),e(65," are still supported but not recommended."),t()(),h(),t()(),n(66,"nz-code-box",25),s(67,"nz-demo-icon-custom",23),n(68,"div",24),u(),n(69,"p"),e(70,"You can just put a "),n(71,"code"),e(72,"svg"),t(),e(73," element inside a "),n(74,"code"),e(75,"nz-icon"),t(),e(76," to render custom content. We would take care of size and color for you."),t(),h(),t()(),n(77,"nz-code-box",26),s(78,"nz-demo-icon-namespace",23),n(79,"div",24),u(),n(80,"p"),e(81,"You can use namespace to add your own icons. Static loading and dynamic loading are both supported."),t(),h(),t()()(),n(82,"div",21)(83,"nz-code-box",27),s(84,"nz-demo-icon-twotone",23),n(85,"div",24),u(),n(86,"p"),e(87,"Specify property "),n(88,"code"),e(89,"nzTheme"),t(),e(90," to "),n(91,"code"),e(92,"twotone"),t(),e(93," to render two-tone icons. You can also set the primary color."),t(),h(),t()(),n(94,"nz-code-box",28),s(95,"nz-demo-icon-iconfont",23),n(96,"div",24),u(),n(97,"p"),e(98,"If you are using "),n(99,"a",29),e(100,"iconfont.cn"),t(),e(101,", you can use the icons in your project gracefully."),t(),h(),t()()()(),n(102,"section",30),u(),n(103,"h2",31)(104,"span"),e(105,"API"),t(),n(106,"a",32),e(107,"#"),t()(),n(108,"h3",33)(109,"span"),e(110,"nz-icon, [nz-icon]"),t(),n(111,"label",34),e(112,"component"),t(),n(113,"a",35),e(114,"#"),t()(),n(115,"table")(116,"thead")(117,"tr")(118,"th"),e(119,"Property"),t(),n(120,"th"),e(121,"Description"),t(),n(122,"th"),e(123,"Type"),t(),n(124,"th"),e(125,"Default"),t(),n(126,"th"),e(127,"Global Config"),t()()(),n(128,"tbody")(129,"tr")(130,"td")(131,"code"),e(132,"[nzType]"),t()(),n(133,"td"),e(134,"Type of the ant design icon"),t(),n(135,"td")(136,"code"),e(137,"string"),t()(),n(138,"td"),e(139,"-"),t(),n(140,"td"),e(141,"-"),t()(),n(142,"tr")(143,"td")(144,"code"),e(145,"[nzTheme]"),t()(),n(146,"td"),e(147,"Type of the ant design icon"),t(),n(148,"td")(149,"code"),e(150,"'fill'|'outline'|'twotone'"),t()(),n(151,"td")(152,"code"),e(153,"'outline'"),t()(),n(154,"td"),e(155,"\u2705"),t()(),n(156,"tr")(157,"td")(158,"code"),e(159,"[nzSpin]"),t()(),n(160,"td"),e(161,"Rotate icon with animation"),t(),n(162,"td")(163,"code"),e(164,"boolean"),t()(),n(165,"td")(166,"code"),e(167,"false"),t()(),n(168,"td"),e(169,"-"),t()(),n(170,"tr")(171,"td")(172,"code"),e(173,"[nzTwotoneColor]"),t()(),n(174,"td"),e(175,"Primary color of the two-tone icon."),t(),n(176,"td")(177,"code"),e(178,"string (hex color)"),t()(),n(179,"td"),e(180,"-"),t(),n(181,"td"),e(182,"\u2705"),t()(),n(183,"tr")(184,"td")(185,"code"),e(186,"[nzIconfont]"),t()(),n(187,"td"),e(188,"Type of the icon from iconfont"),t(),n(189,"td")(190,"code"),e(191,"string"),t()(),n(192,"td"),e(193,"-"),t(),n(194,"td"),e(195,"-"),t()(),n(196,"tr")(197,"td")(198,"code"),e(199,"[nzRotate]"),t()(),n(200,"td"),e(201,"Rotate degrees"),t(),n(202,"td")(203,"code"),e(204,"number"),t()(),n(205,"td"),e(206,"-"),t(),n(207,"td"),e(208,"-"),t()()()(),n(209,"h3",36)(210,"span"),e(211,"NzIconService"),t(),n(212,"label",37),e(213,"service"),t(),n(214,"a",38),e(215,"#"),t()(),n(216,"table")(217,"thead")(218,"tr")(219,"th"),e(220,"Methods"),t(),n(221,"th"),e(222,"Description"),t(),n(223,"th"),e(224,"Parameters"),t()()(),n(225,"tbody")(226,"tr")(227,"td")(228,"code"),e(229,"addIcon()"),t()(),n(230,"td"),e(231,"To import icons statically"),t(),n(232,"td")(233,"code"),e(234,"IconDefinition"),t()()(),n(235,"tr")(236,"td")(237,"code"),e(238,"addIconLiteral()"),t()(),n(239,"td"),e(240,"To statically import custom icons"),t(),n(241,"td")(242,"code"),e(243,"string"),t(),e(244,", "),n(245,"code"),e(246,"string (SVG)"),t()()(),n(247,"tr")(248,"td")(249,"code"),e(250,"fetchFromIconfont()"),t()(),n(251,"td"),e(252,"To get icon assets from iconfont"),t(),n(253,"td")(254,"code"),e(255,"NzIconfontOption"),t()()(),n(256,"tr")(257,"td")(258,"code"),e(259,"changeAssetsSource()"),t()(),n(260,"td"),e(261,"Change the location of your icon assets, so that you can deploy them anywhere"),t(),n(262,"td")(263,"code"),e(264,"string"),t()()()()(),n(265,"h3",39)(266,"span"),e(267,"SVG icons"),t(),n(268,"a",40),e(269,"#"),t()(),n(270,"p"),e(271,"NG-ZORRO supports svg icons, which bring benefits below:"),t(),n(272,"ul")(273,"li"),e(274,"Support multiple colors."),t(),n(275,"li"),e(276,"Much more display accuracy in lower-level devices."),t(),n(277,"li"),e(278,"Able to change built-in icons with more props but no styles override."),t()(),n(279,"p"),e(280,"You can use "),n(281,"code"),e(282,"nz-icon"),t(),e(283," component and specify the "),n(284,"code"),e(285,"theme"),t(),e(286," property."),t(),n(287,"pre")(288,"code",41)(289,"span",42)(290,"span",42)(291,"span",43),e(292,"<"),t(),e(293,"nz-icon"),t(),e(294," "),n(295,"span",44),e(296,"nzType"),t(),n(297,"span",45)(298,"span",46),e(299,"="),t(),n(300,"span",43),e(301,'"'),t(),e(302,"star"),n(303,"span",43),e(304,'"'),t()(),e(305," "),n(306,"span",44),e(307,"nzTheme"),t(),n(308,"span",45)(309,"span",46),e(310,"="),t(),n(311,"span",43),e(312,'"'),t(),e(313,"fill"),n(314,"span",43),e(315,'"'),t()(),e(316," "),n(317,"span",43),e(318,"/>"),t()(),e(319,`
`),t()(),n(320,"h3",47)(321,"span"),e(322,"Static loading and dynamic loading"),t(),n(323,"a",48),e(324,"#"),t()(),n(325,"p"),e(326,"As for icons provided by Ant Design, there are two ways to import them into your project."),t(),n(327,"p")(328,"strong"),e(329,"Static loading"),t(),e(330,". You can load icons statically by registering icons in "),n(331,"code"),e(332,"app.config.ts"),t(),e(333," with "),n(334,"code"),e(335,"provideNzIcons"),t(),e(336," API."),t(),n(337,"pre")(338,"code",49)(339,"span",50),e(340,"import"),t(),e(341," "),n(342,"span",43),e(343,"{"),t(),e(344," IconDefinition "),n(345,"span",43),e(346,"}"),t(),e(347," "),n(348,"span",50),e(349,"from"),t(),e(350," "),n(351,"span",51),e(352,"'@ant-design/icons-angular'"),t(),n(353,"span",43),e(354,";"),t(),e(355,`
`),n(356,"span",50),e(357,"import"),t(),e(358," "),n(359,"span",43),e(360,"{"),t(),e(361," provideNzIcons "),n(362,"span",43),e(363,"}"),t(),e(364," "),n(365,"span",50),e(366,"from"),t(),e(367," "),n(368,"span",51),e(369,"'ng-zorro-antd/icon'"),t(),n(370,"span",43),e(371,";"),t(),e(372,`

`),n(373,"span",52),e(374,"// Import what you need. RECOMMENDED. \u2714\uFE0F"),t(),e(375,`
`),n(376,"span",50),e(377,"import"),t(),e(378," "),n(379,"span",43),e(380,"{"),t(),e(381," AccountBookFill"),n(382,"span",43),e(383,","),t(),e(384," AlertFill"),n(385,"span",43),e(386,","),t(),e(387," AlertOutline "),n(388,"span",43),e(389,"}"),t(),e(390," "),n(391,"span",50),e(392,"from"),t(),e(393," "),n(394,"span",51),e(395,"'@ant-design/icons-angular/icons'"),t(),n(396,"span",43),e(397,";"),t(),e(398,`

`),n(399,"span",50),e(400,"const"),t(),e(401," icons"),n(402,"span",53),e(403,":"),t(),e(404," IconDefinition"),n(405,"span",43),e(406,"["),t(),n(407,"span",43),e(408,"]"),t(),e(409," "),n(410,"span",53),e(411,"="),t(),e(412," "),n(413,"span",43),e(414,"["),t(),e(415,"AccountBookFill"),n(416,"span",43),e(417,","),t(),e(418," AlertOutline"),n(419,"span",43),e(420,","),t(),e(421," AlertFill"),n(422,"span",43),e(423,"]"),t(),n(424,"span",43),e(425,";"),t(),e(426,`

`),n(427,"span",52),e(428,"// Import all. NOT RECOMMENDED. \u274C"),t(),e(429,`
`),n(430,"span",52),e(431,"// import * as AllIcons from '@ant-design/icons-angular/icons';"),t(),e(432,`

`),n(433,"span",52),e(434,"// const antDesignIcons = AllIcons as Record<string, IconDefinition>;"),t(),e(435,`
`),n(436,"span",52),e(437,"// const icons: IconDefinition[] = Object.keys(antDesignIcons).map(key => antDesignIcons[key])"),t(),e(438,`

`),n(439,"span",50),e(440,"export"),t(),e(441," "),n(442,"span",50),e(443,"const"),t(),e(444," appConfig"),n(445,"span",53),e(446,":"),t(),e(447," ApplicationConfig "),n(448,"span",53),e(449,"="),t(),e(450," "),n(451,"span",43),e(452,"{"),t(),e(453,`
  providers`),n(454,"span",53),e(455,":"),t(),e(456," "),n(457,"span",43),e(458,"["),t(),n(459,"span",54),e(460,"provideNzIcons"),t(),n(461,"span",43),e(462,"("),t(),e(463,"icons"),n(464,"span",43),e(465,")"),t(),n(466,"span",43),e(467,"]"),t(),e(468,`
`),n(469,"span",43),e(470,"}"),t(),n(471,"span",43),e(472,";"),t(),e(473,`
`),t()(),n(474,"p"),e(475,"Actually this calls "),n(476,"code"),e(477,"addIcon"),t(),e(478," of "),n(479,"code"),e(480,"NzIconService"),t(),e(481,". Imported icons would be bundled into your "),n(482,"code"),e(483,".js"),t(),e(484,` files.
Static loading may increase your bundle size, thus we recommend to use dynamic importing.`),t(),n(485,"blockquote")(486,"p"),e(487,"Icons used by "),n(488,"code"),e(489,"NG-ZORRO"),t(),e(490,` itself are imported statically to increase loading speed. However, icons demonstrated on the
official website are loaded dynamically.`),t()(),n(491,"p")(492,"strong"),e(493,"Dynamic loading"),t(),e(494,`. This way would not increase your bundle size. When NG-ZORRO detects that the icon you want to
render hasn't been registered yet, it would fire an HTTP request to load it. All you have to do is to config your
`),n(495,"code"),e(496,"angular.json"),t(),e(497," like this:"),t(),n(498,"pre")(499,"code",55)(500,"span",43),e(501,"{"),t(),e(502,`
  `),n(503,"span",56),e(504,'"assets"'),t(),n(505,"span",53),e(506,":"),t(),e(507," "),n(508,"span",43),e(509,"["),t(),e(510,`
    `),n(511,"span",43),e(512,"{"),t(),e(513,`
      `),n(514,"span",56),e(515,'"glob"'),t(),n(516,"span",53),e(517,":"),t(),e(518," "),n(519,"span",51),e(520,'"**/*"'),t(),n(521,"span",43),e(522,","),t(),e(523,`
      `),n(524,"span",56),e(525,'"input"'),t(),n(526,"span",53),e(527,":"),t(),e(528," "),n(529,"span",51),e(530,'"./node_modules/@ant-design/icons-angular/src/inline-svg/"'),t(),n(531,"span",43),e(532,","),t(),e(533,`
      `),n(534,"span",56),e(535,'"output"'),t(),n(536,"span",53),e(537,":"),t(),e(538," "),n(539,"span",51),e(540,'"/assets/"'),t(),e(541,`
    `),n(542,"span",43),e(543,"}"),t(),e(544,`
  `),n(545,"span",43),e(546,"]"),t(),e(547,`
`),n(548,"span",43),e(549,"}"),t(),e(550,`
`),t()(),n(551,"p"),e(552,"You can call "),n(553,"code"),e(554,"changeAssetsSource()"),t(),e(555," of "),n(556,"code"),e(557,"NzIconService"),t(),e(558,` to change the location of your icon assets, so that you can
deploy the assets to CDN. The parameter you passed would be added in front of `),n(559,"code"),e(560,"assets/"),t(),e(561,"."),t(),n(562,"p"),e(563,"Assume that you deploy the static assets under "),n(564,"code"),e(565,"https://mycdn.somecdn.com/icons/assets"),t(),e(566,`. You can call
`),n(567,"code"),e(568,"changeAssetsSource('https://mycdn.somecdn.com/icons')"),t(),e(569," to tell NG-ZORRO that all your resources are located there."),t(),n(570,"h3",57)(571,"span"),e(572,"Add Icons in Lazy-loaded Components"),t(),n(573,"a",58),e(574,"#"),t()(),n(575,"p"),e(576,"Sometimes, you want to import icons in lazy components to avoid increasing the size of the "),n(577,"code"),e(578,"main.js"),t(),e(579,`.
You can import icons in `),n(580,"code"),e(581,"providers"),t(),e(582," of the component or router with "),n(583,"code"),e(584,"provideNzIconsPatch"),t(),e(585," API."),t(),n(586,"pre")(587,"code",49)(588,"span",50),e(589,"import"),t(),e(590," "),n(591,"span",43),e(592,"{"),t(),e(593," NzIconModule"),n(594,"span",43),e(595,","),t(),e(596," provideNzIconsPatch "),n(597,"span",43),e(598,"}"),t(),e(599," "),n(600,"span",50),e(601,"from"),t(),e(602," "),n(603,"span",51),e(604,"'ng-zorro-antd/icon'"),t(),n(605,"span",43),e(606,";"),t(),e(607,`

`),n(608,"span",52),e(609,"// in xxx.component.ts"),t(),e(610,`
`),n(611,"span",59)(612,"span",60),e(613,"@"),t(),n(614,"span",54),e(615,"Component"),t()(),n(616,"span",43),e(617,"("),t(),n(618,"span",43),e(619,"{"),t(),e(620,`
  imports`),n(621,"span",53),e(622,":"),t(),e(623," "),n(624,"span",43),e(625,"["),t(),e(626,"NzIconModule"),n(627,"span",43),e(628,"]"),t(),n(629,"span",43),e(630,","),t(),e(631,`
  providers`),n(632,"span",53),e(633,":"),t(),e(634," "),n(635,"span",43),e(636,"["),t(),n(637,"span",54),e(638,"provideNzIconsPatch"),t(),n(639,"span",43),e(640,"("),t(),n(641,"span",43),e(642,"["),t(),e(643,"QuestionOutline"),n(644,"span",43),e(645,"]"),t(),n(646,"span",43),e(647,")"),t(),n(648,"span",43),e(649,"]"),t(),e(650,`
`),n(651,"span",43),e(652,"}"),t(),n(653,"span",43),e(654,")"),t(),e(655,`
`),n(656,"span",50),e(657,"class"),t(),e(658," "),n(659,"span",61),e(660,"ChildComponent"),t(),e(661," "),n(662,"span",43),e(663,"{"),t(),n(664,"span",43),e(665,"}"),t(),e(666,`

`),n(667,"span",52),e(668,"// or in xxx.routes.ts"),t(),e(669,`
`),n(670,"span",50),e(671,"const"),t(),e(672," routes"),n(673,"span",53),e(674,":"),t(),e(675," Routes "),n(676,"span",53),e(677,"="),t(),e(678," "),n(679,"span",43),e(680,"["),t(),e(681,`
  `),n(682,"span",43),e(683,"{"),t(),e(684,`
    path`),n(685,"span",53),e(686,":"),t(),e(687," "),n(688,"span",51),e(689,"''"),t(),n(690,"span",43),e(691,","),t(),e(692,`
    providers`),n(693,"span",53),e(694,":"),t(),e(695," "),n(696,"span",43),e(697,"["),t(),n(698,"span",54),e(699,"provideNzIconsPatch"),t(),n(700,"span",43),e(701,"("),t(),n(702,"span",43),e(703,"["),t(),e(704,"QuestionOutline"),n(705,"span",43),e(706,"]"),t(),n(707,"span",43),e(708,")"),t(),n(709,"span",43),e(710,"]"),t(),e(711,`
  `),n(712,"span",43),e(713,"}"),t(),e(714,`
`),n(715,"span",43),e(716,"]"),t(),n(717,"span",43),e(718,";"),t(),e(719,`
`),t()(),n(720,"p"),e(721,"Once the QuestionOutline icon get loaded, it would be usable across the application."),t(),n(722,"h3",62)(723,"span"),e(724,"Set Default TwoTone Color"),t(),n(725,"a",63),e(726,"#"),t()(),n(727,"p"),e(728,"When using two-tone icons, you should provide a global configuration like "),n(729,"code"),e(730,"{ nzIcon: { nzTwotoneColor: 'xxx' } }"),t(),e(731," via "),n(732,"code"),e(733,"NzConfigService"),t(),e(734," or call corresponding "),n(735,"code"),e(736,"set"),t(),e(737," method to change to default twotone color."),t(),n(738,"h3",64)(739,"span"),e(740,"Custom Font Icon"),t(),n(741,"a",65),e(742,"#"),t()(),n(743,"p"),e(744,"We provided a "),n(745,"code"),e(746,"fetchFromIconfont"),t(),e(747," method, which is specified for iconfont, to help you use your own icons deployed at "),n(748,"a",29),e(749,"iconfont.cn"),t(),e(750," in a convenient way."),t(),n(751,"pre")(752,"code",49)(753,"span",50),e(754,"this"),t(),n(755,"span",43),e(756,"."),t(),e(757,"_iconService"),n(758,"span",43),e(759,"."),t(),n(760,"span",54),e(761,"fetchFromIconfont"),t(),n(762,"span",43),e(763,"("),t(),n(764,"span",43),e(765,"{"),t(),e(766,`
  scriptUrl`),n(767,"span",53),e(768,":"),t(),e(769," "),n(770,"span",51),e(771,"'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'"),t(),e(772,`
`),n(773,"span",43),e(774,"}"),t(),n(775,"span",43),e(776,")"),t(),n(777,"span",43),e(778,";"),t(),e(779,`
`),t()(),n(780,"p"),e(781,"And then you can use it like this:"),t(),n(782,"pre")(783,"code",41)(784,"span",42)(785,"span",42)(786,"span",43),e(787,"<"),t(),e(788,"nz-icon"),t(),e(789," "),n(790,"span",44),e(791,"nzIconfont"),t(),n(792,"span",45)(793,"span",46),e(794,"="),t(),n(795,"span",43),e(796,'"'),t(),e(797,"icon-tuichu"),n(798,"span",43),e(799,'"'),t()(),e(800," "),n(801,"span",43),e(802,"/>"),t()(),e(803,`
`),t()(),n(804,"p"),e(805,"It creates a component that uses SVG sprites in essence."),t(),n(806,"p"),e(807,"The following options are available:"),t(),n(808,"table")(809,"thead")(810,"tr")(811,"th"),e(812,"Property"),t(),n(813,"th"),e(814,"Description"),t(),n(815,"th"),e(816,"Type"),t(),n(817,"th"),e(818,"Default"),t()()(),n(819,"tbody")(820,"tr")(821,"td")(822,"code"),e(823,"scriptUrl"),t()(),n(824,"td"),e(825,"The URL generated by iconfont.cn project."),t(),n(826,"td")(827,"code"),e(828,"string"),t()(),n(829,"td"),e(830,"-"),t()()()(),n(831,"p"),e(832,"The property "),n(833,"code"),e(834,"scriptUrl"),t(),e(835," should be set to import the svg sprite symbols."),t(),n(836,"p"),e(837,"See "),n(838,"a",66),e(839,"iconfont.cn document"),t(),e(840," to learn about how to generate the "),n(841,"code"),e(842,"scriptUrl"),t(),e(843,"."),t(),n(844,"h3",67)(845,"span"),e(846,"Namespace"),t(),n(847,"a",68),e(848,"#"),t()(),n(849,"p"),e(850,`We introduced namespace so you could add your own icons in a convenient way.
When you want to render an icon, you could assign `),n(851,"code"),e(852,"type"),t(),n(853,"code"),e(854,"namespace:name"),t(),e(855,". Dynamic importing and static importing are both supported."),t(),n(856,"p"),e(857,"Static importing. Invoke "),n(858,"code"),e(859,"addIconLiteral"),t(),e(860," of "),n(861,"code"),e(862,"NzIconService"),t(),e(863,"."),t(),n(864,"p"),e(865,"Dynamic importing. Make sure that you have put your SVG resources in directory like "),n(866,"code"),e(867,"assets/${namespace}"),t(),e(868,`.
For example, if you have a `),n(869,"code"),e(870,"panda"),t(),e(871," icon and in "),n(872,"code"),e(873,"zoo"),t(),e(874," namespace, you should put the file "),n(875,"code"),e(876,"panda.svg"),t(),e(877," in "),n(878,"code"),e(879,"assets/zoo"),t(),e(880,"."),t(),n(881,"h2",69)(882,"span"),e(883,"FAQ"),t(),n(884,"a",70),e(885,"#"),t()(),n(886,"h3",71)(887,"span"),e(888,"All my icons are gone!"),t(),n(889,"a",72),e(890,"#"),t()(),n(891,"p"),e(892,"Have you ever read the docs above?"),t(),n(893,"h3",73)(894,"span"),e(895,"There are two similar icons in a "),n(896,"code"),e(897,"<span></span>"),t(),e(898," tag. What happened?"),t(),n(899,"a",74),e(900,"#"),t()(),n(901,"p"),e(902,"In older versions of NG-ZORRO, there was a font file which would use "),n(903,"code"),e(904,":before"),t(),e(905," to insert an icon according to a "),n(906,"code"),e(907,"<i>"),t(),e(908," tag's "),n(909,"code"),e(910,"class"),t(),e(911,`.
So if you have two icons, try to remove `),n(912,"code"),e(913,"node_modules"),t(),e(914," and install again. If the problem is still there, search "),n(915,"code"),e(916,"@icon-url"),t(),e(917," and remove that line."),t(),n(918,"h3",75)(919,"span"),e(920,"I want to import all icons statically. What should I do?"),t(),n(921,"a",76),e(922,"#"),t()(),n(923,"p"),e(924,"Although it is not recommended, actually we demonstrate it at section "),n(925,"a",77),e(926,"Static loading and dynamic loading"),t(),e(927,":"),t(),n(928,"pre")(929,"code",49)(930,"span",50),e(931,"import"),t(),e(932," "),n(933,"span",53),e(934,"*"),t(),e(935," "),n(936,"span",50),e(937,"as"),t(),e(938," AllIcons "),n(939,"span",50),e(940,"from"),t(),e(941," "),n(942,"span",51),e(943,"'@ant-design/icons-angular/icons'"),t(),n(944,"span",43),e(945,";"),t(),e(946,`

`),n(947,"span",50),e(948,"const"),t(),e(949," antDesignIcons "),n(950,"span",53),e(951,"="),t(),e(952," AllIcons "),n(953,"span",50),e(954,"as"),t(),e(955," Record"),n(956,"span",53),e(957,"<"),t(),n(958,"span",78),e(959,"string"),t(),n(960,"span",43),e(961,","),t(),e(962," IconDefinition"),n(963,"span",53),e(964,">"),t(),n(965,"span",43),e(966,";"),t(),e(967,`
`),n(968,"span",50),e(969,"const"),t(),e(970," icons"),n(971,"span",53),e(972,":"),t(),e(973," IconDefinition"),n(974,"span",43),e(975,"["),t(),n(976,"span",43),e(977,"]"),t(),e(978," "),n(979,"span",53),e(980,"="),t(),e(981," Object"),n(982,"span",43),e(983,"."),t(),n(984,"span",54),e(985,"keys"),t(),n(986,"span",43),e(987,"("),t(),e(988,"antDesignIcons"),n(989,"span",43),e(990,")"),t(),n(991,"span",43),e(992,"."),t(),n(993,"span",54),e(994,"map"),t(),n(995,"span",43),e(996,"("),t(),e(997,"key "),n(998,"span",53),e(999,"=>"),t(),e(1e3," antDesignIcons"),n(1001,"span",43),e(1002,"["),t(),e(1003,"key"),n(1004,"span",43),e(1005,"]"),t(),n(1006,"span",43),e(1007,")"),t(),n(1008,"span",43),e(1009,";"),t(),e(1010,`
`),t()(),n(1011,"h3",79)(1012,"span"),e(1013,"Does dynamic loading affect web pages' performance?"),t(),n(1014,"a",80),e(1015,"#"),t()(),n(1016,"p"),e(1017,`We used several methods to reduce requests, such as static cache, dynamic cache and reusable request.
It's basically not noticeable for visitors that icons are loaded asynchronously assuming web connections are fairly good.`),t(),n(1018,"h3",81)(1019,"span"),e(1020,"How do I know an icon's corresponding module to import?"),t(),n(1021,"a",82),e(1022,"#"),t()(),n(1023,"p"),e(1024,"Capital camel-case "),n(1025,"code"),e(1026,"type & theme"),t(),e(1027,", i.e. "),n(1028,"code"),e(1029,"alibaba"),t(),e(1030," => "),n(1031,"code"),e(1032,"AlibabaOutline"),t(),e(1033,"."),t(),h(),t()()),i&2&&(m(),d("nzOffsetTop",16),m(),d("nzAffix",!1),m(34),d("nzGutter",16),m(),d("nzXl",12)("nzSpan",24),m(),d("nzIframe",!1)("nzIframeHeight",null),m(28),d("nzIframe",!1)("nzIframeHeight",null),m(11),d("nzIframe",!1)("nzIframeHeight",null),m(5),d("nzXl",12)("nzSpan",24),m(),d("nzIframe",!1)("nzIframeHeight",null),m(11),d("nzIframe",!1)("nzIframeHeight",null))},dependencies:[Re,L,Pe,De,ke,oe,ue,he,A,M,pe,se,je,Ge,qe,$e,Qe,O],encapsulation:2})};export{j as default};