import{f as l,A as i,aj as y,ak as Kg,al as tv,am as ev,an as nv,ao as rv,ap as av,aq as cv,ar as lv,as as ov,at as iv,C as sv,au as uv,av as pv,aw as fv,ax as dv,ay as gv,az as vv,aA as mv,aB as hv,D as Ov,B as bv,H as yv,I as wv,aC as Sv,aD as Pv,aE as zv,aF as jv,aG as Tv,p as Cv,aH as $v,aI as Mv,aJ as Fv,aK as Hv,aL as Av,aM as Vv,Q as kv,aN as _v,aO as Dg,aP as Dv,aQ as Lv,aR as Iv,aS as xv,P as Nv,aT as Bv,R as Ev,aU as qv,aV as Rv,S as Gv,aW as Uv,aX as Wv,aY as Yv,aZ as Zv,ae as Qv,a_ as Xv,a$ as Jv,b0 as Kv,b1 as tm,b2 as em,b3 as nm,_ as O,d as w,b4 as rm,j as s,b5 as am,af as cm,k as h,a as S,l as P,m as lm,b as c,w as p,e as o,t as om,b6 as im,b7 as sm,b8 as M,n as um,q as Lg,F as pm}from"./index.3fe853a6.js";import{A as fm,a as dm}from"./AppleOutlined.1ca6425b.js";import{A as gm}from"./AntDesignOutlined.3853edac.js";import{A as vm,D as mm,a as hm,M as Om,P as bm}from"./PieChartOutlined.10672048.js";import{A as ym,a as wm,Q as Sm}from"./QuestionCircleTwoTone.91588e42.js";import{B as Pm,C as zm,L as jm,S as Tm,T as Cm,V as $m}from"./VideoCameraOutlined.621f8956.js";import{C as Mm}from"./CaretRightOutlined.740eaff3.js";import{C as Fm,F as Hm}from"./FrownFilled.45c68d8c.js";import{D as Am,a as Vm,L as km}from"./LikeFilled.d0585f9f.js";import{F as _m,L as Dm,S as Ig,T as Lm,Y as Im}from"./YoutubeOutlined.1f81eedb.js";import{F as xm}from"./FrownOutlined.f0d942d8.js";import{H as Nm}from"./HeartOutlined.456e218a.js";import{H as Bm,S as Em}from"./SmileFilled.c7f61187.js";import{H}from"./HomeOutlined.64d10447.js";import{I as qm}from"./InboxOutlined.bc0746ab.js";import{L as Rm,R as Gm}from"./RightCircleOutlined.f6d0d378.js";import{L as Um}from"./LikeOutlined.e74c6d35.js";import{L as Wm}from"./LockOutlined.e29cd3b4.js";import{M as Ym}from"./MailOutlined.775e378b.js";import{M as Zm}from"./MehOutlined.7674ebe7.js";import{M as Qm}from"./MessageOutlined.c4e56101.js";import{M as Xm}from"./MinusCircleOutlined.981d5c27.js";import{M as Jm}from"./MinusOutlined.aa94c9ae.js";import{N as Km}from"./NotificationOutlined.40f5adfc.js";import{P as th}from"./PoweroffOutlined.8ecb924c.js";import{Q as eh}from"./QqOutlined.035fc680.js";import{Q as nh}from"./QuestionCircleOutlined.4f0d46f6.js";import{R as rh,a as ah,b as ch,c as lh}from"./RadiusUprightOutlined.fbf236c5.js";import{S as oh}from"./SettingOutlined.5038dea4.js";import{S as xg}from"./SmileOutlined.02787c93.js";import{S as Ng}from"./SmileTwoTone.b3738c4e.js";import{S as ih}from"./SolutionOutlined.aff833f4.js";import{S as sh}from"./StarOutlined.f47b7afb.js";import{U as uh}from"./UploadOutlined.311fe22d.js";import{U as ph}from"./UserOutlined.f1d89c6a.js";var fh={icon:{tag:"svg",attrs:{viewBox:"64 64 896 896",focusable:"false"},children:[{tag:"path",attrs:{d:"M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zM648.3 426.8l-87.7 161.1h45.7c5.5 0 10 4.5 10 10v21.3c0 5.5-4.5 10-10 10h-63.4v29.7h63.4c5.5 0 10 4.5 10 10v21.3c0 5.5-4.5 10-10 10h-63.4V752c0 5.5-4.5 10-10 10h-41.3c-5.5 0-10-4.5-10-10v-51.8h-63.1c-5.5 0-10-4.5-10-10v-21.3c0-5.5 4.5-10 10-10h63.1v-29.7h-63.1c-5.5 0-10-4.5-10-10v-21.3c0-5.5 4.5-10 10-10h45.2l-88-161.1c-2.6-4.8-.9-10.9 4-13.6 1.5-.8 3.1-1.2 4.8-1.2h46c3.8 0 7.2 2.1 8.9 5.5l72.9 144.3 73.2-144.3a10 10 0 018.9-5.5h45c5.5 0 10 4.5 10 10 .1 1.7-.3 3.3-1.1 4.8z"}}]},name:"account-book",theme:"filled"};const dh=fh;function ll(n){for(var t=1;t=0)&&(!Object.prototype.propertyIsEnumerable.call(n,r)||(e[r]=n[r]))}return e}function uot(n,t){if(n==null)return{};var e={},r=Object.keys(n),a,u;for(u=0;u=0)&&(e[a]=n[a]);return e}var Rg=new Set;function pot(n){return typeof n=="string"&&n.length&&!Rg.has(n)}function j(n){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:0,e=n[t];if(pot(e)){var r=document.createElement("script");r.setAttribute("src",e),r.setAttribute("data-namespace",e),n.length>t+1&&(r.onload=function(){j(n,t+1)},r.onerror=function(){j(n,t+1)}),Rg.add(e),document.body.appendChild(r)}}function Gg(){var n=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},t=n.scriptUrl,e=n.extraCommonProps,r=e===void 0?{}:e;typeof document<"u"&&typeof window<"u"&&typeof document.createElement=="function"&&(Array.isArray(t)?j(t.reverse()):j([t]));var a=function(f,d){var g=d.attrs,v=d.slots,m=kg({},f,g),b=m.type,T=sot(m,oot),C=v.default&&v.default(),$=null;b&&($=l("use",{"xlink:href":"#".concat(b)},null)),C&&C.length&&($=C);var Jg=kg({},r,T);return l(y,Jg,{default:function(){return[$]}})};return a.props={spin:Boolean,rotate:Number,type:String},a.inheritAttrs=!1,a.displayName="Iconfont",a}const cl=Object.freeze(Object.defineProperty({__proto__:null,createFromIconfontCN:Gg,default:y,AccountBookFilled:vh,AccountBookOutlined:bh,AccountBookTwoTone:Ph,AimOutlined:Ch,AlertFilled:Hh,AlertOutlined:_h,AlertTwoTone:xh,AlibabaOutlined:qh,AlignCenterOutlined:Wh,AlignLeftOutlined:Xh,AlignRightOutlined:eO,AlipayCircleFilled:cO,AlipayCircleOutlined:sO,AlipayOutlined:dO,AlipaySquareFilled:hO,AliwangwangFilled:wO,AliwangwangOutlined:jO,AliyunOutlined:MO,AmazonCircleFilled:VO,AmazonOutlined:LO,AmazonSquareFilled:BO,AndroidFilled:GO,AndroidOutlined:fm,AntCloudOutlined:ZO,AntDesignOutlined:gm,ApartmentOutlined:KO,ApiFilled:rb,ApiOutlined:ob,ApiTwoTone:pb,AppleFilled:vb,AppleOutlined:dm,AppstoreAddOutlined:bb,AppstoreFilled:Pb,AppstoreOutlined:vm,AppstoreTwoTone:Cb,AreaChartOutlined:Hb,ArrowDownOutlined:ym,ArrowLeftOutlined:Kg,ArrowRightOutlined:tv,ArrowUpOutlined:wm,ArrowsAltOutlined:_b,AudioFilled:xb,AudioMutedOutlined:qb,AudioOutlined:Wb,AudioTwoTone:Xb,AuditOutlined:ey,BackwardFilled:cy,BackwardOutlined:sy,BankFilled:dy,BankOutlined:hy,BankTwoTone:wy,BarChartOutlined:Pm,BarcodeOutlined:jy,BarsOutlined:ev,BehanceCircleFilled:My,BehanceOutlined:Vy,BehanceSquareFilled:Ly,BehanceSquareOutlined:By,BellFilled:Gy,BellOutlined:Zy,BellTwoTone:Ky,BgColorsOutlined:rw,BlockOutlined:ow,BoldOutlined:pw,BookFilled:vw,BookOutlined:bw,BookTwoTone:Pw,BorderBottomOutlined:Cw,BorderHorizontalOutlined:Hw,BorderInnerOutlined:_w,BorderLeftOutlined:xw,BorderOuterOutlined:qw,BorderOutlined:Ww,BorderRightOutlined:Xw,BorderTopOutlined:eS,BorderVerticleOutlined:cS,BorderlessTableOutlined:sS,BoxPlotFilled:dS,BoxPlotOutlined:hS,BoxPlotTwoTone:wS,BranchesOutlined:jS,BugFilled:MS,BugOutlined:VS,BugTwoTone:LS,BuildFilled:BS,BuildOutlined:GS,BuildTwoTone:ZS,BulbFilled:KS,BulbOutlined:rP,BulbTwoTone:oP,CalculatorFilled:pP,CalculatorOutlined:vP,CalculatorTwoTone:bP,CalendarFilled:PP,CalendarOutlined:nv,CalendarTwoTone:CP,CameraFilled:HP,CameraOutlined:_P,CameraTwoTone:xP,CarFilled:qP,CarOutlined:WP,CarTwoTone:XP,CaretDownFilled:rv,CaretDownOutlined:av,CaretLeftFilled:ez,CaretLeftOutlined:cz,CaretRightFilled:sz,CaretRightOutlined:Mm,CaretUpFilled:dz,CaretUpOutlined:cv,CarryOutFilled:hz,CarryOutOutlined:Fm,CarryOutTwoTone:wz,CheckCircleFilled:lv,CheckCircleOutlined:ov,CheckCircleTwoTone:Bg,CheckOutlined:iv,CheckSquareFilled:$z,CheckSquareOutlined:Az,CheckSquareTwoTone:Dz,ChromeFilled:Nz,ChromeOutlined:Rz,CiCircleFilled:Yz,CiCircleOutlined:Jz,CiCircleTwoTone:nj,CiOutlined:lj,CiTwoTone:uj,ClearOutlined:gj,ClockCircleFilled:Oj,ClockCircleOutlined:sv,ClockCircleTwoTone:Sj,CloseCircleFilled:uv,CloseCircleOutlined:pv,CloseCircleTwoTone:Tj,CloseOutlined:fv,CloseSquareFilled:Fj,CloseSquareOutlined:kj,CloseSquareTwoTone:Ij,CloudDownloadOutlined:Ej,CloudFilled:Uj,CloudOutlined:zm,CloudServerOutlined:Qj,CloudSyncOutlined:tT,CloudTwoTone:aT,CloudUploadOutlined:iT,ClusterOutlined:fT,CodeFilled:mT,CodeOutlined:yT,CodeSandboxCircleFilled:zT,CodeSandboxOutlined:dv,CodeSandboxSquareFilled:$T,CodeTwoTone:AT,CodepenCircleFilled:DT,CodepenCircleOutlined:NT,CodepenOutlined:RT,CodepenSquareFilled:YT,CoffeeOutlined:JT,ColumnHeightOutlined:nC,ColumnWidthOutlined:lC,CommentOutlined:uC,CompassFilled:gC,CompassOutlined:OC,CompassTwoTone:SC,CompressOutlined:TC,ConsoleSqlOutlined:FC,ContactsFilled:kC,ContactsOutlined:IC,ContactsTwoTone:EC,ContainerFilled:UC,ContainerOutlined:QC,ContainerTwoTone:t$,ControlFilled:a$,ControlOutlined:i$,ControlTwoTone:f$,CopyFilled:m$,CopyOutlined:gv,CopyTwoTone:y$,CopyrightCircleFilled:z$,CopyrightCircleOutlined:$$,CopyrightCircleTwoTone:A$,CopyrightOutlined:D$,CopyrightTwoTone:N$,CreditCardFilled:R$,CreditCardOutlined:Y$,CreditCardTwoTone:J$,CrownFilled:nM,CrownOutlined:lM,CrownTwoTone:uM,CustomerServiceFilled:gM,CustomerServiceOutlined:OM,CustomerServiceTwoTone:SM,DashOutlined:TM,DashboardFilled:FM,DashboardOutlined:kM,DashboardTwoTone:IM,DatabaseFilled:EM,DatabaseOutlined:UM,DatabaseTwoTone:QM,DeleteColumnOutlined:tF,DeleteFilled:aF,DeleteOutlined:vv,DeleteRowOutlined:iF,DeleteTwoTone:fF,DeliveredProcedureOutlined:mF,DeploymentUnitOutlined:yF,DesktopOutlined:mm,DiffFilled:zF,DiffOutlined:$F,DiffTwoTone:AF,DingdingOutlined:DF,DingtalkCircleFilled:NF,DingtalkOutlined:RF,DingtalkSquareFilled:YF,DisconnectOutlined:JF,DislikeFilled:Am,DislikeOutlined:Vm,DislikeTwoTone:nH,DollarCircleFilled:lH,DollarCircleOutlined:uH,DollarCircleTwoTone:gH,DollarOutlined:OH,DollarTwoTone:SH,DotChartOutlined:TH,DoubleLeftOutlined:mv,DoubleRightOutlined:hv,DownCircleFilled:FH,DownCircleOutlined:kH,DownCircleTwoTone:IH,DownOutlined:Ov,DownSquareFilled:EH,DownSquareOutlined:UH,DownSquareTwoTone:QH,DownloadOutlined:bv,DragOutlined:tA,DribbbleCircleFilled:aA,DribbbleOutlined:iA,DribbbleSquareFilled:fA,DribbbleSquareOutlined:mA,DropboxCircleFilled:yA,DropboxOutlined:zA,DropboxSquareFilled:$A,EditFilled:AA,EditOutlined:yv,EditTwoTone:DA,EllipsisOutlined:wv,EnterOutlined:Sv,EnvironmentFilled:NA,EnvironmentOutlined:RA,EnvironmentTwoTone:YA,EuroCircleFilled:JA,EuroCircleOutlined:nV,EuroCircleTwoTone:lV,EuroOutlined:uV,EuroTwoTone:gV,ExceptionOutlined:OV,ExclamationCircleFilled:Pv,ExclamationCircleOutlined:zv,ExclamationCircleTwoTone:SV,ExclamationOutlined:TV,ExpandAltOutlined:FV,ExpandOutlined:kV,ExperimentFilled:IV,ExperimentOutlined:EV,ExperimentTwoTone:UV,ExportOutlined:QV,EyeFilled:tk,EyeInvisibleFilled:ak,EyeInvisibleOutlined:jv,EyeInvisibleTwoTone:ik,EyeOutlined:Tv,EyeTwoTone:fk,FacebookFilled:mk,FacebookOutlined:_m,FallOutlined:yk,FastBackwardFilled:zk,FastBackwardOutlined:$k,FastForwardFilled:Ak,FastForwardOutlined:Dk,FieldBinaryOutlined:Nk,FieldNumberOutlined:Rk,FieldStringOutlined:Yk,FieldTimeOutlined:Jk,FileAddFilled:n_,FileAddOutlined:l_,FileAddTwoTone:u_,FileDoneOutlined:g_,FileExcelFilled:O_,FileExcelOutlined:S_,FileExcelTwoTone:T_,FileExclamationFilled:F_,FileExclamationOutlined:k_,FileExclamationTwoTone:I_,FileFilled:E_,FileGifOutlined:U_,FileImageFilled:Q_,FileImageOutlined:tD,FileImageTwoTone:aD,FileJpgOutlined:iD,FileMarkdownFilled:fD,FileMarkdownOutlined:mD,FileMarkdownTwoTone:yD,FileOutlined:Cv,FilePdfFilled:zD,FilePdfOutlined:$D,FilePdfTwoTone:AD,FilePptFilled:DD,FilePptOutlined:ND,FilePptTwoTone:RD,FileProtectOutlined:YD,FileSearchOutlined:JD,FileSyncOutlined:nL,FileTextFilled:lL,FileTextOutlined:uL,FileTextTwoTone:gL,FileTwoTone:$v,FileUnknownFilled:OL,FileUnknownOutlined:SL,FileUnknownTwoTone:TL,FileWordFilled:FL,FileWordOutlined:kL,FileWordTwoTone:IL,FileZipFilled:EL,FileZipOutlined:UL,FileZipTwoTone:QL,FilterFilled:Mv,FilterOutlined:tI,FilterTwoTone:aI,FireFilled:iI,FireOutlined:fI,FireTwoTone:mI,FlagFilled:yI,FlagOutlined:zI,FlagTwoTone:$I,FolderAddFilled:AI,FolderAddOutlined:DI,FolderAddTwoTone:NI,FolderFilled:RI,FolderOpenFilled:YI,FolderOpenOutlined:Fv,FolderOpenTwoTone:JI,FolderOutlined:Hv,FolderTwoTone:nx,FolderViewOutlined:lx,FontColorsOutlined:ux,FontSizeOutlined:gx,ForkOutlined:Ox,FormOutlined:Sx,FormatPainterFilled:Tx,FormatPainterOutlined:Fx,ForwardFilled:kx,ForwardOutlined:Ix,FrownFilled:Hm,FrownOutlined:xm,FrownTwoTone:Ex,FullscreenExitOutlined:Ux,FullscreenOutlined:Qx,FunctionOutlined:tN,FundFilled:aN,FundOutlined:iN,FundProjectionScreenOutlined:fN,FundTwoTone:mN,FundViewOutlined:yN,FunnelPlotFilled:zN,FunnelPlotOutlined:$N,FunnelPlotTwoTone:AN,GatewayOutlined:DN,GifOutlined:NN,GiftFilled:RN,GiftOutlined:YN,GiftTwoTone:JN,GithubFilled:nB,GithubOutlined:lB,GitlabFilled:uB,GitlabOutlined:gB,GlobalOutlined:OB,GoldFilled:SB,GoldOutlined:TB,GoldTwoTone:FB,GoldenFilled:kB,GoogleCircleFilled:IB,GoogleOutlined:EB,GooglePlusCircleFilled:UB,GooglePlusOutlined:QB,GooglePlusSquareFilled:tE,GoogleSquareFilled:aE,GroupOutlined:iE,HddFilled:fE,HddOutlined:mE,HddTwoTone:yE,HeartFilled:zE,HeartOutlined:Nm,HeartTwoTone:Eg,HeatMapOutlined:HE,HighlightFilled:_E,HighlightOutlined:Bm,HighlightTwoTone:xE,HistoryOutlined:qE,HolderOutlined:WE,HomeFilled:XE,HomeOutlined:H,HomeTwoTone:eq,HourglassFilled:cq,HourglassOutlined:sq,HourglassTwoTone:dq,Html5Filled:hq,Html5Outlined:wq,Html5TwoTone:jq,IdcardFilled:Mq,IdcardOutlined:Vq,IdcardTwoTone:Lq,IeCircleFilled:Bq,IeOutlined:Gq,IeSquareFilled:Zq,ImportOutlined:Kq,InboxOutlined:qm,InfoCircleFilled:Av,InfoCircleOutlined:Vv,InfoCircleTwoTone:rR,InfoOutlined:oR,InsertRowAboveOutlined:pR,InsertRowBelowOutlined:vR,InsertRowLeftOutlined:bR,InsertRowRightOutlined:PR,InstagramFilled:CR,InstagramOutlined:HR,InsuranceFilled:_R,InsuranceOutlined:xR,InsuranceTwoTone:qR,InteractionFilled:WR,InteractionOutlined:XR,InteractionTwoTone:eG,IssuesCloseOutlined:cG,ItalicOutlined:sG,KeyOutlined:dG,LaptopOutlined:jm,LayoutFilled:hG,LayoutOutlined:wG,LayoutTwoTone:jG,LeftCircleFilled:MG,LeftCircleOutlined:Rm,LeftCircleTwoTone:VG,LeftOutlined:kv,LeftSquareFilled:LG,LeftSquareOutlined:BG,LeftSquareTwoTone:GG,LikeFilled:km,LikeOutlined:Um,LikeTwoTone:ZG,LineChartOutlined:KG,LineHeightOutlined:rU,LineOutlined:oU,LinkOutlined:_v,LinkedinFilled:pU,LinkedinOutlined:Dm,Loading3QuartersOutlined:vU,LoadingOutlined:Dg,LockFilled:bU,LockOutlined:Wm,LockTwoTone:PU,LoginOutlined:CU,LogoutOutlined:HU,MacCommandFilled:_U,MacCommandOutlined:xU,MailFilled:qU,MailOutlined:Ym,MailTwoTone:WU,ManOutlined:XU,MedicineBoxFilled:eW,MedicineBoxOutlined:cW,MedicineBoxTwoTone:sW,MediumCircleFilled:dW,MediumOutlined:hW,MediumSquareFilled:wW,MediumWorkmarkOutlined:jW,MehFilled:MW,MehOutlined:Zm,MehTwoTone:VW,MenuFoldOutlined:hm,MenuOutlined:Dv,MenuUnfoldOutlined:Om,MergeCellsOutlined:LW,MessageFilled:BW,MessageOutlined:Qm,MessageTwoTone:GW,MinusCircleFilled:ZW,MinusCircleOutlined:Xm,MinusCircleTwoTone:KW,MinusOutlined:Jm,MinusSquareFilled:rY,MinusSquareOutlined:Lv,MinusSquareTwoTone:oY,MobileFilled:pY,MobileOutlined:vY,MobileTwoTone:bY,MoneyCollectFilled:PY,MoneyCollectOutlined:CY,MoneyCollectTwoTone:HY,MonitorOutlined:_Y,MoreOutlined:xY,NodeCollapseOutlined:qY,NodeExpandOutlined:WY,NodeIndexOutlined:XY,NotificationFilled:eZ,NotificationOutlined:Km,NotificationTwoTone:cZ,NumberOutlined:sZ,OneToOneOutlined:dZ,OrderedListOutlined:hZ,PaperClipOutlined:Iv,PartitionOutlined:wZ,PauseCircleFilled:jZ,PauseCircleOutlined:MZ,PauseCircleTwoTone:VZ,PauseOutlined:LZ,PayCircleFilled:BZ,PayCircleOutlined:GZ,PercentageOutlined:ZZ,PhoneFilled:KZ,PhoneOutlined:rQ,PhoneTwoTone:oQ,PicCenterOutlined:pQ,PicLeftOutlined:vQ,PicRightOutlined:bQ,PictureFilled:PQ,PictureOutlined:CQ,PictureTwoTone:xv,PieChartFilled:HQ,PieChartOutlined:bm,PieChartTwoTone:_Q,PlayCircleFilled:xQ,PlayCircleOutlined:qQ,PlayCircleTwoTone:WQ,PlaySquareFilled:XQ,PlaySquareOutlined:eX,PlaySquareTwoTone:cX,PlusCircleFilled:sX,PlusCircleOutlined:dX,PlusCircleTwoTone:hX,PlusOutlined:Nv,PlusSquareFilled:wX,PlusSquareOutlined:Bv,PlusSquareTwoTone:jX,PoundCircleFilled:MX,PoundCircleOutlined:VX,PoundCircleTwoTone:LX,PoundOutlined:BX,PoweroffOutlined:th,PrinterFilled:GX,PrinterOutlined:ZX,PrinterTwoTone:KX,ProfileFilled:rJ,ProfileOutlined:oJ,ProfileTwoTone:pJ,ProjectFilled:vJ,ProjectOutlined:bJ,ProjectTwoTone:PJ,PropertySafetyFilled:CJ,PropertySafetyOutlined:HJ,PropertySafetyTwoTone:_J,PullRequestOutlined:xJ,PushpinFilled:qJ,PushpinOutlined:WJ,PushpinTwoTone:XJ,QqCircleFilled:eK,QqOutlined:eh,QqSquareFilled:cK,QrcodeOutlined:sK,QuestionCircleFilled:dK,QuestionCircleOutlined:nh,QuestionCircleTwoTone:Sm,QuestionOutlined:hK,RadarChartOutlined:wK,RadiusBottomleftOutlined:rh,RadiusBottomrightOutlined:ah,RadiusSettingOutlined:jK,RadiusUpleftOutlined:ch,RadiusUprightOutlined:lh,ReadFilled:MK,ReadOutlined:VK,ReconciliationFilled:LK,ReconciliationOutlined:BK,ReconciliationTwoTone:GK,RedEnvelopeFilled:ZK,RedEnvelopeOutlined:KK,RedEnvelopeTwoTone:rtt,RedditCircleFilled:ott,RedditOutlined:ptt,RedditSquareFilled:vtt,RedoOutlined:btt,ReloadOutlined:Ptt,RestFilled:Ctt,RestOutlined:Htt,RestTwoTone:_tt,RetweetOutlined:xtt,RightCircleFilled:qtt,RightCircleOutlined:Gm,RightCircleTwoTone:Wtt,RightOutlined:Ev,RightSquareFilled:Xtt,RightSquareOutlined:eet,RightSquareTwoTone:cet,RiseOutlined:uet,RobotFilled:get,RobotOutlined:Oet,RocketFilled:Pet,RocketOutlined:Cet,RocketTwoTone:Het,RollbackOutlined:_et,RotateLeftOutlined:qv,RotateRightOutlined:Rv,SafetyCertificateFilled:xet,SafetyCertificateOutlined:qet,SafetyCertificateTwoTone:Wet,SafetyOutlined:Xet,SaveFilled:ent,SaveOutlined:cnt,SaveTwoTone:snt,ScanOutlined:dnt,ScheduleFilled:hnt,ScheduleOutlined:wnt,ScheduleTwoTone:jnt,ScissorOutlined:Mnt,SearchOutlined:Gv,SecurityScanFilled:Vnt,SecurityScanOutlined:Lnt,SecurityScanTwoTone:Bnt,SelectOutlined:Gnt,SendOutlined:Znt,SettingFilled:qg,SettingOutlined:oh,SettingTwoTone:n1t,ShakeOutlined:l1t,ShareAltOutlined:u1t,ShopFilled:g1t,ShopOutlined:Tm,ShopTwoTone:O1t,ShoppingCartOutlined:S1t,ShoppingFilled:T1t,ShoppingOutlined:F1t,ShoppingTwoTone:k1t,ShrinkOutlined:I1t,SignalFilled:E1t,SisternodeOutlined:U1t,SketchCircleFilled:Q1t,SketchOutlined:t4t,SketchSquareFilled:a4t,SkinFilled:i4t,SkinOutlined:f4t,SkinTwoTone:m4t,SkypeFilled:y4t,SkypeOutlined:z4t,SlackCircleFilled:$4t,SlackOutlined:A4t,SlackSquareFilled:D4t,SlackSquareOutlined:N4t,SlidersFilled:R4t,SlidersOutlined:Y4t,SlidersTwoTone:J4t,SmallDashOutlined:nrt,SmileFilled:Em,SmileOutlined:xg,SmileTwoTone:Ng,SnippetsFilled:lrt,SnippetsOutlined:Uv,SnippetsTwoTone:urt,SolutionOutlined:ih,SortAscendingOutlined:grt,SortDescendingOutlined:Ort,SoundFilled:Srt,SoundOutlined:Trt,SoundTwoTone:Frt,SplitCellsOutlined:krt,StarFilled:Wv,StarOutlined:sh,StarTwoTone:Irt,StepBackwardFilled:Ert,StepBackwardOutlined:Urt,StepForwardFilled:Qrt,StepForwardOutlined:tat,StockOutlined:aat,StopFilled:iat,StopOutlined:fat,StopTwoTone:mat,StrikethroughOutlined:yat,SubnodeOutlined:zat,SwapLeftOutlined:$at,SwapOutlined:Aat,SwapRightOutlined:Yv,SwitcherFilled:Dat,SwitcherOutlined:Nat,SwitcherTwoTone:Rat,SyncOutlined:Ig,TableOutlined:Yat,TabletFilled:Jat,TabletOutlined:n2t,TabletTwoTone:l2t,TagFilled:u2t,TagOutlined:g2t,TagTwoTone:O2t,TagsFilled:S2t,TagsOutlined:T2t,TagsTwoTone:F2t,TaobaoCircleFilled:k2t,TaobaoCircleOutlined:I2t,TaobaoOutlined:E2t,TaobaoSquareFilled:U2t,TeamOutlined:Cm,ThunderboltFilled:Q2t,ThunderboltOutlined:t3t,ThunderboltTwoTone:a3t,ToTopOutlined:i3t,ToolFilled:f3t,ToolOutlined:m3t,ToolTwoTone:y3t,TrademarkCircleFilled:z3t,TrademarkCircleOutlined:$3t,TrademarkCircleTwoTone:A3t,TrademarkOutlined:D3t,TransactionOutlined:N3t,TranslationOutlined:R3t,TrophyFilled:Y3t,TrophyOutlined:J3t,TrophyTwoTone:nct,TwitterCircleFilled:lct,TwitterOutlined:Lm,TwitterSquareFilled:uct,UnderlineOutlined:gct,UndoOutlined:Oct,UngroupOutlined:Sct,UnlockFilled:Tct,UnlockOutlined:Fct,UnlockTwoTone:kct,UnorderedListOutlined:Zv,UpCircleFilled:Ict,UpCircleOutlined:Ect,UpCircleTwoTone:Uct,UpOutlined:Qv,UpSquareFilled:Qct,UpSquareOutlined:t8t,UpSquareTwoTone:a8t,UploadOutlined:uh,UsbFilled:i8t,UsbOutlined:f8t,UsbTwoTone:m8t,UserAddOutlined:y8t,UserDeleteOutlined:z8t,UserOutlined:ph,UserSwitchOutlined:$8t,UsergroupAddOutlined:A8t,UsergroupDeleteOutlined:D8t,VerifiedOutlined:N8t,VerticalAlignBottomOutlined:R8t,VerticalAlignMiddleOutlined:Y8t,VerticalAlignTopOutlined:Xv,VerticalLeftOutlined:J8t,VerticalRightOutlined:n6t,VideoCameraAddOutlined:l6t,VideoCameraFilled:u6t,VideoCameraOutlined:$m,VideoCameraTwoTone:g6t,WalletFilled:O6t,WalletOutlined:S6t,WalletTwoTone:T6t,WarningFilled:Jv,WarningOutlined:F6t,WarningTwoTone:k6t,WechatFilled:I6t,WechatOutlined:E6t,WeiboCircleFilled:U6t,WeiboCircleOutlined:Q6t,WeiboOutlined:tlt,WeiboSquareFilled:alt,WeiboSquareOutlined:ilt,WhatsAppOutlined:flt,WifiOutlined:mlt,WindowsFilled:ylt,WindowsOutlined:zlt,WomanOutlined:$lt,YahooFilled:Alt,YahooOutlined:Dlt,YoutubeFilled:Nlt,YoutubeOutlined:Im,YuqueFilled:Rlt,YuqueOutlined:Ylt,ZhihuCircleFilled:Jlt,ZhihuOutlined:not,ZhihuSquareFilled:lot,ZoomInOutlined:Kv,ZoomOutOutlined:tm,setTwoToneColor:em,getTwoToneColor:nm},Symbol.toStringTag,{value:"Module"})),fot=Object.keys(cl).map(n=>n.replace(/(Outlined|Filled|TwoTone)$/,"")).filter((n,t,e)=>e.indexOf(n)===t),Ug=["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"],Wg=["Question","QuestionCircle","Plus","PlusCircle","Pause","PauseCircle","Minus","MinusCircle","PlusSquare","MinusSquare","Info","InfoCircle","Exclamation","ExclamationCircle","Close","CloseCircle","CloseSquare","Check","CheckCircle","CheckSquare","ClockCircle","Warning","IssuesClose","Stop"],Yg=["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"],Zg=["AreaChart","PieChart","BarChart","DotChart","LineChart","RadarChart","HeatMap","Fall","Rise","Stock","BoxPlot","Fund","Sliders"],Qg=["Android","Apple","Windows","Ie","Chrome","Github","Aliwangwang","Dingding","WeiboSquare","WeiboCircle","TaobaoCircle","Html5","Weibo","Twitter","Wechat","Youtube","AlipayCircle","Taobao","Skype","Qq","MediumWorkmark","Gitlab","Medium","Linkedin","GooglePlus","Dropbox","Facebook","Codepen","CodeSandbox","CodeSandboxCircle","Amazon","Google","CodepenCircle","Alipay","AntDesign","AntCloud","Aliyun","Zhihu","Slack","SlackSquare","Behance","BehanceSquare","Dribbble","DribbbleSquare","Instagram","Yuque","Alibaba","Yahoo","Reddit","Sketch"],dot=[...Ug,...Wg,...Yg,...Zg,...Qg],got=fot.filter(n=>!dot.includes(n)),F={direction:Ug,suggestion:Wg,editor:Yg,data:Zg,logo:Qg,other:got},vot={render(){return l("svg",{viewBox:"0 0 1024 1024"},[l("path",{d:"M864 64H160C107 64 64 107 64 160v704c0 53 43 96 96 96h704c53 0 96-43 96-96V160c0-53-43-96-96-96z"},null)])}},mot={render(){return l("svg",{viewBox:"0 0 1024 1024"},[l("path",{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"},null)])}},hot={render(){return l("svg",{viewBox:"0 0 1024 1024"},[l("path",{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"},null)])}},Oot=cl,_g=function(t){return t.split(/(?=[A-Z])/).join("-").toLowerCase()},bot=w({components:{"a-badge":rm},props:["name","type","isNew","theme","justCopied"],data(){const n=_g(this.name),t=_g(this.type);return this.allIcons=Oot,{text:`<${n} />`,kebabCasedType:t}},methods:{onCopied(){this.$emit("copied",this.type,this.text)}}}),yot={class:"anticon-class"};function wot(n,t,e,r,a,u){const f=s("a-badge"),d=am("clipboard");return cm((h(),S("li",{class:im(n.justCopied===n.type?"copied":"")},[(h(),P(lm(n.allIcons[n.name]))),c("span",yot,[l(f,{dot:n.isNew},{default:p(()=>[o(om(n.kebabCasedType),1)]),_:1},8,["dot"])])],2)),[[d,n.text,"copy"],[d,n.onCopied,"success"]])}const Sot=O(bot,[["render",wot]]),Pot=w({props:["icons","title","newIcons","theme"],data(){return{justCopied:null}},methods:{onCopied(n,t){sm.success(l("span",null,[l("code",{class:"copied-code"},[t]),o(" copied \u{1F389}")])),this.justCopied=n,setTimeout(()=>{this.justCopied=null},2e3)}},render(){const{icons:n,title:t,theme:e,newIcons:r}=this.$props,a=n.map(u=>l(Sot,{key:u,name:u,type:u,theme:e,isNew:r.indexOf(u)>=0,justCopied:this.justCopied,onCopied:this.onCopied},null));return l("div",null,[l("h3",{style:"margin: 1.6em 0 .6em;"},[this.$t(`app.docs.components.icon.category.${t}`)]),l("ul",{class:"anticons-list"},[a])])}}),zot=Pot,z={Filled:"Filled",Outlined:"Outlined",TwoTone:"TwoTone"},jot=cl,Xg=w({cagetories:F,components:{ARadio:M,ARadioGroup:M.Group,ARadioButton:M.Button},newIconNames:[],data(){return{theme:z.Outlined}},methods:{handleChangeTheme(n){this.theme=n.target.value},renderCategories(){const{theme:n}=this;return Object.keys(F).map(t=>{let e=F[t];return{category:t,icons:e.map(r=>r+n).filter(r=>jot[r])}}).filter(({icons:t})=>!!t.length).map(({category:t,icons:e})=>l(zot,{key:t,title:t,theme:n,icons:e,newIcons:Xg.newIconNames},null))}},render(){return l("div",null,[l("h3",{style:"margin: 1.6em 0 .6em;"},[this.$t("app.docs.components.icon.pick-theme")]),l(s("a-radio-group"),{value:this.theme,onChange:this.handleChangeTheme},{default:()=>[l(s("a-radio-button"),{value:z.Outlined},{default:()=>[l(y,{component:mot},null),o(" "),this.$t("app.docs.components.icon.outlined")]}),l(s("a-radio-button"),{value:z.Filled},{default:()=>[l(y,{component:vot},null),o(" "),this.$t("app.docs.components.icon.filled")]}),l(s("a-radio-button"),{value:z.TwoTone},{default:()=>[l(y,{component:hot},null),o(" "),this.$t("app.docs.components.icon.two-tone")]})]}),this.renderCategories()])}}),Tot=Xg,Cot=w({components:{HomeOutlined:H,SettingFilled:qg,SmileOutlined:xg,SyncOutlined:Ig,LoadingOutlined:Dg}});function $ot(n,t,e,r,a,u){const f=s("home-outlined"),d=s("setting-filled"),g=s("smile-outlined"),v=s("sync-outlined"),m=s("loading-outlined"),b=s("a-space"),T=s("demo-box");return h(),P(T,{jsfiddle:{us:"Import icons from `@ant-design/icons-vue`, component name of icons with different theme is the icon name suffixed by the theme name. Specific the `spin` property to show spinning animation.",cn:"\u901A\u8FC7 `@ant-design/icons-vue` \u5F15\u7528 Icon \u7EC4\u4EF6\uFF0C\u4E0D\u540C\u4E3B\u9898\u7684 Icon \u7EC4\u4EF6\u540D\u4E3A\u56FE\u6807\u540D\u52A0\u4E3B\u9898\u505A\u4E3A\u540E\u7F00\uFF0C\u4E5F\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E `spin` \u5C5E\u6027\u6765\u5B9E\u73B0\u52A8\u753B\u65CB\u8F6C\u6548\u679C\u3002",docHtml:`

zh-CN

\u901A\u8FC7 @ant-design/icons-vue \u5F15\u7528 Icon \u7EC4\u4EF6\uFF0C\u4E0D\u540C\u4E3B\u9898\u7684 Icon \u7EC4\u4EF6\u540D\u4E3A\u56FE\u6807\u540D\u52A0\u4E3B\u9898\u505A\u4E3A\u540E\u7F00\uFF0C\u4E5F\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E spin \u5C5E\u6027\u6765\u5B9E\u73B0\u52A8\u753B\u65CB\u8F6C\u6548\u679C\u3002

en-US

Import icons from @ant-design/icons-vue, component name of icons with different theme is the icon name suffixed by the theme name. Specific the spin property to show spinning animation.

`,order:0,title:{"zh-CN":"\u57FA\u672C\u7528\u6CD5","en-US":"Basic"},relativePath:"components/icon/demo/basic.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXNwYWNlPgogICAgPGhvbWUtb3V0bGluZWQgLz4KICAgIDxzZXR0aW5nLWZpbGxlZCAvPgogICAgPHNtaWxlLW91dGxpbmVkIC8+CiAgICA8c3luYy1vdXRsaW5lZCBzcGluIC8+CiAgICA8c21pbGUtb3V0bGluZWQgOnJvdGF0ZT0iMTgwIiAvPgogICAgPGxvYWRpbmctb3V0bGluZWQgLz4KICA8L2Etc3BhY2U+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwppbXBvcnQgewogIEhvbWVPdXRsaW5lZCwKICBTZXR0aW5nRmlsbGVkLAogIFNtaWxlT3V0bGluZWQsCiAgU3luY091dGxpbmVkLAogIExvYWRpbmdPdXRsaW5lZCwKfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIEhvbWVPdXRsaW5lZCwKICAgIFNldHRpbmdGaWxsZWQsCiAgICBTbWlsZU91dGxpbmVkLAogICAgU3luY091dGxpbmVkLAogICAgTG9hZGluZ091dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXNwYWNlPgogICAgPGhvbWUtb3V0bGluZWQgLz4KICAgIDxzZXR0aW5nLWZpbGxlZCAvPgogICAgPHNtaWxlLW91dGxpbmVkIC8+CiAgICA8c3luYy1vdXRsaW5lZCBzcGluIC8+CiAgICA8c21pbGUtb3V0bGluZWQgOnJvdGF0ZT0iMTgwIiAvPgogICAgPGxvYWRpbmctb3V0bGluZWQgLz4KICA8L2Etc3BhY2U+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7IEhvbWVPdXRsaW5lZCwgU2V0dGluZ0ZpbGxlZCwgU21pbGVPdXRsaW5lZCwgU3luY091dGxpbmVkLCBMb2FkaW5nT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIEhvbWVPdXRsaW5lZCwKICAgIFNldHRpbmdGaWxsZWQsCiAgICBTbWlsZU91dGxpbmVkLAogICAgU3luY091dGxpbmVkLAogICAgTG9hZGluZ091dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:p(()=>[l(b,null,{default:p(()=>[l(f),l(d),l(g),l(v,{spin:""}),l(g,{rotate:180}),l(m)]),_:1})]),htmlCode:p(()=>t[0]||(t[0]=[c("pre",{class:"language-vue"},[c("code",null,[c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("template")]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("a-space")]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("home-outlined")]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("setting-filled")]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("smile-outlined")]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("sync-outlined")]),o(),c("span",{class:"token attr-name"},"spin"),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("smile-outlined")]),o(),c("span",{class:"token attr-name"},":rotate"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("180"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("loading-outlined")]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("script")]),o(),c("span",{class:"token attr-name"},"lang"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("ts"),c("span",{class:"token punctuation"},'"')]),c("span",{class:"token punctuation"},">")]),c("span",{class:"token script"},[c("span",{class:"token language-javascript"},[o(` `),c("span",{class:"token keyword"},"import"),o(),c("span",{class:"token punctuation"},"{"),o(" defineComponent "),c("span",{class:"token punctuation"},"}"),o(),c("span",{class:"token keyword"},"from"),o(),c("span",{class:"token string"},"'vue'"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token keyword"},"import"),o(),c("span",{class:"token punctuation"},"{"),o(` HomeOutlined`),c("span",{class:"token punctuation"},","),o(` SettingFilled`),c("span",{class:"token punctuation"},","),o(` SmileOutlined`),c("span",{class:"token punctuation"},","),o(` SyncOutlined`),c("span",{class:"token punctuation"},","),o(` LoadingOutlined`),c("span",{class:"token punctuation"},","),o(` `),c("span",{class:"token punctuation"},"}"),o(),c("span",{class:"token keyword"},"from"),o(),c("span",{class:"token string"},"'@ant-design/icons-vue'"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token keyword"},"export"),o(),c("span",{class:"token keyword"},"default"),o(),c("span",{class:"token function"},"defineComponent"),c("span",{class:"token punctuation"},"("),c("span",{class:"token punctuation"},"{"),o(` `),c("span",{class:"token literal-property property"},"components"),c("span",{class:"token operator"},":"),o(),c("span",{class:"token punctuation"},"{"),o(` HomeOutlined`),c("span",{class:"token punctuation"},","),o(` SettingFilled`),c("span",{class:"token punctuation"},","),o(` SmileOutlined`),c("span",{class:"token punctuation"},","),o(` SyncOutlined`),c("span",{class:"token punctuation"},","),o(` LoadingOutlined`),c("span",{class:"token punctuation"},","),o(` `),c("span",{class:"token punctuation"},"}"),c("span",{class:"token punctuation"},","),o(` `),c("span",{class:"token punctuation"},"}"),c("span",{class:"token punctuation"},")"),c("span",{class:"token punctuation"},";"),o(` `)])]),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `)])],-1)])),jsVersionHtml:p(()=>t[1]||(t[1]=[c("pre",{class:"language-vue"},[c("code",null,[c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("template")]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("a-space")]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("home-outlined")]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("setting-filled")]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("smile-outlined")]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("sync-outlined")]),o(),c("span",{class:"token attr-name"},"spin"),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("smile-outlined")]),o(),c("span",{class:"token attr-name"},":rotate"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("180"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("loading-outlined")]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("script")]),c("span",{class:"token punctuation"},">")]),c("span",{class:"token script"},[c("span",{class:"token language-javascript"},[o(` `),c("span",{class:"token keyword"},"import"),o(),c("span",{class:"token punctuation"},"{"),o(" defineComponent "),c("span",{class:"token punctuation"},"}"),o(),c("span",{class:"token keyword"},"from"),o(),c("span",{class:"token string"},"'vue'"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token keyword"},"import"),o(),c("span",{class:"token punctuation"},"{"),o(" HomeOutlined"),c("span",{class:"token punctuation"},","),o(" SettingFilled"),c("span",{class:"token punctuation"},","),o(" SmileOutlined"),c("span",{class:"token punctuation"},","),o(" SyncOutlined"),c("span",{class:"token punctuation"},","),o(" LoadingOutlined "),c("span",{class:"token punctuation"},"}"),o(),c("span",{class:"token keyword"},"from"),o(),c("span",{class:"token string"},"'@ant-design/icons-vue'"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token keyword"},"export"),o(),c("span",{class:"token keyword"},"default"),o(),c("span",{class:"token function"},"defineComponent"),c("span",{class:"token punctuation"},"("),c("span",{class:"token punctuation"},"{"),o(` `),c("span",{class:"token literal-property property"},"components"),c("span",{class:"token operator"},":"),o(),c("span",{class:"token punctuation"},"{"),o(` HomeOutlined`),c("span",{class:"token punctuation"},","),o(` SettingFilled`),c("span",{class:"token punctuation"},","),o(` SmileOutlined`),c("span",{class:"token punctuation"},","),o(` SyncOutlined`),c("span",{class:"token punctuation"},","),o(` LoadingOutlined`),c("span",{class:"token punctuation"},","),o(` `),c("span",{class:"token punctuation"},"}"),c("span",{class:"token punctuation"},","),o(` `),c("span",{class:"token punctuation"},"}"),c("span",{class:"token punctuation"},")"),c("span",{class:"token punctuation"},";"),o(` `)])]),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `)])],-1)])),_:1})}const Mot=O(Cot,[["render",$ot]]),Fot=w({components:{Icon:y,HomeOutlined:H}});function Hot(n,t,e,r,a,u){const f=s("icon"),d=s("HomeOutlined"),g=s("a-space"),v=s("demo-box");return h(),P(v,{jsfiddle:{us:"Create a reusable Vue component by using `Icon`. The property / slot `component` takes a Vue component that renders to `svg` element.",cn:"\u5229\u7528 `Icon` \u7EC4\u4EF6\u5C01\u88C5\u4E00\u4E2A\u53EF\u590D\u7528\u7684\u81EA\u5B9A\u4E49\u56FE\u6807\u3002\u53EF\u4EE5\u901A\u8FC7 `component` \u5C5E\u6027\u6216\u63D2\u69FD\u4F20\u5165\u4E00\u4E2A `svg` \u7EC4\u4EF6\u6765\u6E32\u67D3\u6700\u7EC8\u7684\u56FE\u6807\uFF0C\u4EE5\u6EE1\u8DB3\u7279\u5B9A\u7684\u9700\u6C42\u3002",docHtml:`

zh-CN

\u5229\u7528 Icon \u7EC4\u4EF6\u5C01\u88C5\u4E00\u4E2A\u53EF\u590D\u7528\u7684\u81EA\u5B9A\u4E49\u56FE\u6807\u3002\u53EF\u4EE5\u901A\u8FC7 component \u5C5E\u6027\u6216\u63D2\u69FD\u4F20\u5165\u4E00\u4E2A svg \u7EC4\u4EF6\u6765\u6E32\u67D3\u6700\u7EC8\u7684\u56FE\u6807\uFF0C\u4EE5\u6EE1\u8DB3\u7279\u5B9A\u7684\u9700\u6C42\u3002

en-US

Create a reusable Vue component by using Icon. The property / slot component takes a Vue component that renders to svg element.

`,order:1,title:{"zh-CN":"\u81EA\u5B9A\u4E49\u56FE\u6807","en-US":"Custom Icon"},relativePath:"components/icon/demo/custom.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXNwYWNlPgogICAgPGljb24gOnN0eWxlPSJ7IGNvbG9yOiAnaG90cGluaycgfSI+CiAgICAgIDx0ZW1wbGF0ZSAjY29tcG9uZW50PgogICAgICAgIDxzdmcgd2lkdGg9IjFlbSIgaGVpZ2h0PSIxZW0iIGZpbGw9ImN1cnJlbnRDb2xvciIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCI+CiAgICAgICAgICA8cGF0aAogICAgICAgICAgICBkPSJNOTIzIDI4My42Yy0xMy40LTMxLjEtMzIuNi01OC45LTU2LjktODIuOC0yNC4zLTIzLjgtNTIuNS00Mi40LTg0LTU1LjUtMzIuNS0xMy41LTY2LjktMjAuMy0xMDIuNC0yMC4zLTQ5LjMgMC05Ny40IDEzLjUtMTM5LjIgMzktMTAgNi4xLTE5LjUgMTIuOC0yOC41IDIwLjEtOS03LjMtMTguNS0xNC0yOC41LTIwLjEtNDEuOC0yNS41LTg5LjktMzktMTM5LjItMzktMzUuNSAwLTY5LjkgNi44LTEwMi40IDIwLjMtMzEuNCAxMy01OS43IDMxLjctODQgNTUuNS0yNC40IDIzLjktNDMuNSA1MS43LTU2LjkgODIuOC0xMy45IDMyLjMtMjEgNjYuNi0yMSAxMDEuOSAwIDMzLjMgNi44IDY4IDIwLjMgMTAzLjMgMTEuMyAyOS41IDI3LjUgNjAuMSA0OC4yIDkxIDMyLjggNDguOSA3Ny45IDk5LjkgMTMzLjkgMTUxLjYgOTIuOCA4NS43IDE4NC43IDE0NC45IDE4OC42IDE0Ny4zbDIzLjcgMTUuMmMxMC41IDYuNyAyNCA2LjcgMzQuNSAwbDIzLjctMTUuMmMzLjktMi41IDk1LjctNjEuNiAxODguNi0xNDcuMyA1Ni01MS43IDEwMS4xLTEwMi43IDEzMy45LTE1MS42IDIwLjctMzAuOSAzNy02MS41IDQ4LjItOTEgMTMuNS0zNS4zIDIwLjMtNzAgMjAuMy0xMDMuMyAwLjEtMzUuMy03LTY5LjYtMjAuOS0xMDEuOXoiCiAgICAgICAgICAvPgogICAgICAgIDwvc3ZnPgogICAgICA8L3RlbXBsYXRlPgogICAgPC9pY29uPgoKICAgIDxpY29uIDpzdHlsZT0ieyBmb250U2l6ZTogJzMycHgnIH0iPgogICAgICA8dGVtcGxhdGUgI2NvbXBvbmVudD0ic3ZnUHJvcHMiPgogICAgICAgIDxzdmcgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgd2lkdGg9IjFlbSIgaGVpZ2h0PSIxZW0iIGZpbGw9ImN1cnJlbnRDb2xvciIgdi1iaW5kPSJzdmdQcm9wcyI+CiAgICAgICAgICA8cGF0aAogICAgICAgICAgICBkPSJNOTkuMDk2IDMxNS42MzRzLTgyLjU4LTY0LjAzMi04Mi41OC0xMzIuMTNjMC02Ni4wNjQgMzMuMDMyLTE2NS4xNjIgMTQ4LjY0Ni0xNDguNjQ2IDgzLjM3IDExLjkxIDk5LjA5NiAxNjUuMTYyIDk5LjA5NiAxNjUuMTYybC0xNjUuMTYyIDExNS42MTR6TTkyNC45MDYgMzE1LjYzNHM4Mi41OC02NC4wMzIgODIuNTgtMTMyLjEzYzAtNjYuMDY0LTMzLjAzMi0xNjUuMTYyLTE0OC42NDYtMTQ4LjY0Ni04My4zNyAxMS45MS05OS4wOTYgMTY1LjE2Mi05OS4wOTYgMTY1LjE2MmwxNjUuMTYyIDExNS42MTR6IgogICAgICAgICAgICBmaWxsPSIjNkI2NzZFIgogICAgICAgICAgICBwLWlkPSIxMTQzIgogICAgICAgICAgLz4KICAgICAgICAgIDxwYXRoCiAgICAgICAgICAgIGQ9Ik0xMDI0IDU2MS41NDhjMCAyNjQuNTI2LTIyOS4yMyA0MjkuNDItNTEyLjAwMiA0MjkuNDJTMCA4MjYuMDc2IDAgNTYxLjU0OCAyODMuOTYgNjYuMDY0IDUxMi4wMDIgNjYuMDY0IDEwMjQgMjk3LjAyMiAxMDI0IDU2MS41NDh6IgogICAgICAgICAgICBmaWxsPSIjRkZFQkQyIgogICAgICAgICAgICBwLWlkPSIxMTQ0IgogICAgICAgICAgLz4KICAgICAgICAgIDxwYXRoCiAgICAgICAgICAgIGQ9Ik0zMzAuMzI0IDg0Mi4xMjZjMCA4Mi4wOTYgODEuMzQgMTQ4LjY0NiAxODEuNjc4IDE0OC42NDZzMTgxLjY3OC02Ni41NSAxODEuNjc4LTE0OC42NDZIMzMwLjMyNHoiCiAgICAgICAgICAgIGZpbGw9IiNFOUQ3QzMiCiAgICAgICAgICAgIHAtaWQ9IjExNDUiCiAgICAgICAgICAvPgogICAgICAgICAgPHBhdGgKICAgICAgICAgICAgZD0iTTY0NC4xMyA2MTEuMDk4QzU5NC41ODIgNTI4LjUxNiA1NjEuNTUgNTEyIDUxMi4wMDIgNTEyYy00OS41NDggMC04Mi41OCAxNi41MTYtMTMyLjEzIDk5LjA5Ni00Mi40ODggNzAuODE0LTc4LjczIDIxMS4yNjQtNDkuNTQ4IDI0Ny43NDIgNjYuMDY0IDgyLjU4IDE2NS4xNjIgMzMuMDMyIDE4MS42NzggMzMuMDMyIDE2LjUxNiAwIDExNS42MTQgNDkuNTQ4IDE4MS42NzgtMzMuMDMyIDI5LjE4LTM2LjQ3Ni03LjA2NC0xNzYuOTMtNDkuNTUtMjQ3Ljc0eiIKICAgICAgICAgICAgZmlsbD0iI0ZGRkZGRiIKICAgICAgICAgICAgcC1pZD0iMTE0NiIKICAgICAgICAgIC8+CiAgICAgICAgICA8cGF0aAogICAgICAgICAgICBkPSJNNjExLjA5OCA0OTUuNDg0YzAtNDUuNjA4IDM2Ljk3NC04Mi41OCA4Mi41OC04Mi41OCA0OS41NDggMCAxOTguMTk0IDk5LjA5OCAxOTguMTk0IDE2NS4xNjJzLTc5LjkzNCAxNDQuOTA0LTE0OC42NDYgOTkuMDk2Yy00OS41NDgtMzMuMDMyLTEzMi4xMjgtMTQ4LjY0Ni0xMzIuMTI4LTE4MS42Nzh6TTQxMi45MDQgNDk1LjQ4NGMwLTQ1LjYwOC0zNi45NzQtODIuNTgtODIuNTgtODIuNTgtNDkuNTQ4IDAtMTk4LjE5NCA5OS4wOTgtMTk4LjE5NCAxNjUuMTYyczc5LjkzNCAxNDQuOTA0IDE0OC42NDYgOTkuMDk2YzQ5LjU0OC0zMy4wMzIgMTMyLjEyOC0xNDguNjQ2IDEzMi4xMjgtMTgxLjY3OHoiCiAgICAgICAgICAgIGZpbGw9IiM2QjY3NkUiCiAgICAgICAgICAgIHAtaWQ9IjExNDciCiAgICAgICAgICAvPgogICAgICAgICAgPHBhdGgKICAgICAgICAgICAgZD0iTTUxMi4wMDIgNzI2LjYyMmMtMzAuMDYgMC0xMTUuNjE0IDUuNjY4LTExNS42MTQgMzMuMDMyIDAgNDkuNjM4IDEwNS40ODQgODUuMjQgMTE1LjYxNCA4Mi41OCAxMC4xMjggMi42NiAxMTUuNjE0LTMyLjk0NCAxMTUuNjE0LTgyLjU4LTAuMDAyLTI3LjM2Ni04NS41NTYtMzMuMDMyLTExNS42MTQtMzMuMDMyeiIKICAgICAgICAgICAgZmlsbD0iIzQ2NDY1NSIKICAgICAgICAgICAgcC1pZD0iMTE0OCIKICAgICAgICAgIC8+CiAgICAgICAgICA8cGF0aAogICAgICAgICAgICBkPSJNMzMwLjMyNCA0OTUuNDg0bS0zMy4wMzIgMGEzMy4wMzIgMzMuMDMyIDAgMSAwIDY2LjA2NCAwIDMzLjAzMiAzMy4wMzIgMCAxIDAtNjYuMDY0IDBaIgogICAgICAgICAgICBmaWxsPSIjNDY0NjU1IgogICAgICAgICAgICBwLWlkPSIxMTQ5IgogICAgICAgICAgLz4KICAgICAgICAgIDxwYXRoCiAgICAgICAgICAgIGQ9Ik02OTMuNjc4IDQ5NS40ODRtLTMzLjAzMiAwYTMzLjAzMiAzMy4wMzIgMCAxIDAgNjYuMDY0IDAgMzMuMDMyIDMzLjAzMiAwIDEgMC02Ni4wNjQgMFoiCiAgICAgICAgICAgIGZpbGw9IiM0NjQ2NTUiCiAgICAgICAgICAgIHAtaWQ9IjExNTAiCiAgICAgICAgICAvPgogICAgICAgIDwvc3ZnPgogICAgICA8L3RlbXBsYXRlPgogICAgPC9pY29uPgogICAgPGljb24+CiAgICAgIDx0ZW1wbGF0ZSAjY29tcG9uZW50PjxIb21lT3V0bGluZWQgLz48L3RlbXBsYXRlPgogICAgPC9pY29uPgogICAgPEhvbWVPdXRsaW5lZCAvPgogIDwvYS1zcGFjZT4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmltcG9ydCBJY29uLCB7IEhvbWVPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgSWNvbiwKICAgIEhvbWVPdXRsaW5lZCwKICB9LAp9KTsKPC9zY3JpcHQ+CjxzdHlsZSBzY29wZWQ+Ci5jdXN0b20taWNvbnMtbGlzdCA6ZGVlcCguYW50aWNvbikgewogIG1hcmdpbi1yaWdodDogNnB4Owp9Cjwvc3R5bGU+Cg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXNwYWNlPgogICAgPGljb24gOnN0eWxlPSJ7IGNvbG9yOiAnaG90cGluaycgfSI+CiAgICAgIDx0ZW1wbGF0ZSAjY29tcG9uZW50PgogICAgICAgIDxzdmcgd2lkdGg9IjFlbSIgaGVpZ2h0PSIxZW0iIGZpbGw9ImN1cnJlbnRDb2xvciIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCI+CiAgICAgICAgICA8cGF0aAogICAgICAgICAgICBkPSJNOTIzIDI4My42Yy0xMy40LTMxLjEtMzIuNi01OC45LTU2LjktODIuOC0yNC4zLTIzLjgtNTIuNS00Mi40LTg0LTU1LjUtMzIuNS0xMy41LTY2LjktMjAuMy0xMDIuNC0yMC4zLTQ5LjMgMC05Ny40IDEzLjUtMTM5LjIgMzktMTAgNi4xLTE5LjUgMTIuOC0yOC41IDIwLjEtOS03LjMtMTguNS0xNC0yOC41LTIwLjEtNDEuOC0yNS41LTg5LjktMzktMTM5LjItMzktMzUuNSAwLTY5LjkgNi44LTEwMi40IDIwLjMtMzEuNCAxMy01OS43IDMxLjctODQgNTUuNS0yNC40IDIzLjktNDMuNSA1MS43LTU2LjkgODIuOC0xMy45IDMyLjMtMjEgNjYuNi0yMSAxMDEuOSAwIDMzLjMgNi44IDY4IDIwLjMgMTAzLjMgMTEuMyAyOS41IDI3LjUgNjAuMSA0OC4yIDkxIDMyLjggNDguOSA3Ny45IDk5LjkgMTMzLjkgMTUxLjYgOTIuOCA4NS43IDE4NC43IDE0NC45IDE4OC42IDE0Ny4zbDIzLjcgMTUuMmMxMC41IDYuNyAyNCA2LjcgMzQuNSAwbDIzLjctMTUuMmMzLjktMi41IDk1LjctNjEuNiAxODguNi0xNDcuMyA1Ni01MS43IDEwMS4xLTEwMi43IDEzMy45LTE1MS42IDIwLjctMzAuOSAzNy02MS41IDQ4LjItOTEgMTMuNS0zNS4zIDIwLjMtNzAgMjAuMy0xMDMuMyAwLjEtMzUuMy03LTY5LjYtMjAuOS0xMDEuOXoiCiAgICAgICAgICAvPgogICAgICAgIDwvc3ZnPgogICAgICA8L3RlbXBsYXRlPgogICAgPC9pY29uPgoKICAgIDxpY29uIDpzdHlsZT0ieyBmb250U2l6ZTogJzMycHgnIH0iPgogICAgICA8dGVtcGxhdGUgI2NvbXBvbmVudD0ic3ZnUHJvcHMiPgogICAgICAgIDxzdmcgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgd2lkdGg9IjFlbSIgaGVpZ2h0PSIxZW0iIGZpbGw9ImN1cnJlbnRDb2xvciIgdi1iaW5kPSJzdmdQcm9wcyI+CiAgICAgICAgICA8cGF0aAogICAgICAgICAgICBkPSJNOTkuMDk2IDMxNS42MzRzLTgyLjU4LTY0LjAzMi04Mi41OC0xMzIuMTNjMC02Ni4wNjQgMzMuMDMyLTE2NS4xNjIgMTQ4LjY0Ni0xNDguNjQ2IDgzLjM3IDExLjkxIDk5LjA5NiAxNjUuMTYyIDk5LjA5NiAxNjUuMTYybC0xNjUuMTYyIDExNS42MTR6TTkyNC45MDYgMzE1LjYzNHM4Mi41OC02NC4wMzIgODIuNTgtMTMyLjEzYzAtNjYuMDY0LTMzLjAzMi0xNjUuMTYyLTE0OC42NDYtMTQ4LjY0Ni04My4zNyAxMS45MS05OS4wOTYgMTY1LjE2Mi05OS4wOTYgMTY1LjE2MmwxNjUuMTYyIDExNS42MTR6IgogICAgICAgICAgICBmaWxsPSIjNkI2NzZFIgogICAgICAgICAgICBwLWlkPSIxMTQzIgogICAgICAgICAgLz4KICAgICAgICAgIDxwYXRoCiAgICAgICAgICAgIGQ9Ik0xMDI0IDU2MS41NDhjMCAyNjQuNTI2LTIyOS4yMyA0MjkuNDItNTEyLjAwMiA0MjkuNDJTMCA4MjYuMDc2IDAgNTYxLjU0OCAyODMuOTYgNjYuMDY0IDUxMi4wMDIgNjYuMDY0IDEwMjQgMjk3LjAyMiAxMDI0IDU2MS41NDh6IgogICAgICAgICAgICBmaWxsPSIjRkZFQkQyIgogICAgICAgICAgICBwLWlkPSIxMTQ0IgogICAgICAgICAgLz4KICAgICAgICAgIDxwYXRoCiAgICAgICAgICAgIGQ9Ik0zMzAuMzI0IDg0Mi4xMjZjMCA4Mi4wOTYgODEuMzQgMTQ4LjY0NiAxODEuNjc4IDE0OC42NDZzMTgxLjY3OC02Ni41NSAxODEuNjc4LTE0OC42NDZIMzMwLjMyNHoiCiAgICAgICAgICAgIGZpbGw9IiNFOUQ3QzMiCiAgICAgICAgICAgIHAtaWQ9IjExNDUiCiAgICAgICAgICAvPgogICAgICAgICAgPHBhdGgKICAgICAgICAgICAgZD0iTTY0NC4xMyA2MTEuMDk4QzU5NC41ODIgNTI4LjUxNiA1NjEuNTUgNTEyIDUxMi4wMDIgNTEyYy00OS41NDggMC04Mi41OCAxNi41MTYtMTMyLjEzIDk5LjA5Ni00Mi40ODggNzAuODE0LTc4LjczIDIxMS4yNjQtNDkuNTQ4IDI0Ny43NDIgNjYuMDY0IDgyLjU4IDE2NS4xNjIgMzMuMDMyIDE4MS42NzggMzMuMDMyIDE2LjUxNiAwIDExNS42MTQgNDkuNTQ4IDE4MS42NzgtMzMuMDMyIDI5LjE4LTM2LjQ3Ni03LjA2NC0xNzYuOTMtNDkuNTUtMjQ3Ljc0eiIKICAgICAgICAgICAgZmlsbD0iI0ZGRkZGRiIKICAgICAgICAgICAgcC1pZD0iMTE0NiIKICAgICAgICAgIC8+CiAgICAgICAgICA8cGF0aAogICAgICAgICAgICBkPSJNNjExLjA5OCA0OTUuNDg0YzAtNDUuNjA4IDM2Ljk3NC04Mi41OCA4Mi41OC04Mi41OCA0OS41NDggMCAxOTguMTk0IDk5LjA5OCAxOTguMTk0IDE2NS4xNjJzLTc5LjkzNCAxNDQuOTA0LTE0OC42NDYgOTkuMDk2Yy00OS41NDgtMzMuMDMyLTEzMi4xMjgtMTQ4LjY0Ni0xMzIuMTI4LTE4MS42Nzh6TTQxMi45MDQgNDk1LjQ4NGMwLTQ1LjYwOC0zNi45NzQtODIuNTgtODIuNTgtODIuNTgtNDkuNTQ4IDAtMTk4LjE5NCA5OS4wOTgtMTk4LjE5NCAxNjUuMTYyczc5LjkzNCAxNDQuOTA0IDE0OC42NDYgOTkuMDk2YzQ5LjU0OC0zMy4wMzIgMTMyLjEyOC0xNDguNjQ2IDEzMi4xMjgtMTgxLjY3OHoiCiAgICAgICAgICAgIGZpbGw9IiM2QjY3NkUiCiAgICAgICAgICAgIHAtaWQ9IjExNDciCiAgICAgICAgICAvPgogICAgICAgICAgPHBhdGgKICAgICAgICAgICAgZD0iTTUxMi4wMDIgNzI2LjYyMmMtMzAuMDYgMC0xMTUuNjE0IDUuNjY4LTExNS42MTQgMzMuMDMyIDAgNDkuNjM4IDEwNS40ODQgODUuMjQgMTE1LjYxNCA4Mi41OCAxMC4xMjggMi42NiAxMTUuNjE0LTMyLjk0NCAxMTUuNjE0LTgyLjU4LTAuMDAyLTI3LjM2Ni04NS41NTYtMzMuMDMyLTExNS42MTQtMzMuMDMyeiIKICAgICAgICAgICAgZmlsbD0iIzQ2NDY1NSIKICAgICAgICAgICAgcC1pZD0iMTE0OCIKICAgICAgICAgIC8+CiAgICAgICAgICA8cGF0aAogICAgICAgICAgICBkPSJNMzMwLjMyNCA0OTUuNDg0bS0zMy4wMzIgMGEzMy4wMzIgMzMuMDMyIDAgMSAwIDY2LjA2NCAwIDMzLjAzMiAzMy4wMzIgMCAxIDAtNjYuMDY0IDBaIgogICAgICAgICAgICBmaWxsPSIjNDY0NjU1IgogICAgICAgICAgICBwLWlkPSIxMTQ5IgogICAgICAgICAgLz4KICAgICAgICAgIDxwYXRoCiAgICAgICAgICAgIGQ9Ik02OTMuNjc4IDQ5NS40ODRtLTMzLjAzMiAwYTMzLjAzMiAzMy4wMzIgMCAxIDAgNjYuMDY0IDAgMzMuMDMyIDMzLjAzMiAwIDEgMC02Ni4wNjQgMFoiCiAgICAgICAgICAgIGZpbGw9IiM0NjQ2NTUiCiAgICAgICAgICAgIHAtaWQ9IjExNTAiCiAgICAgICAgICAvPgogICAgICAgIDwvc3ZnPgogICAgICA8L3RlbXBsYXRlPgogICAgPC9pY29uPgogICAgPGljb24+CiAgICAgIDx0ZW1wbGF0ZSAjY29tcG9uZW50PjxIb21lT3V0bGluZWQgLz48L3RlbXBsYXRlPgogICAgPC9pY29uPgogICAgPEhvbWVPdXRsaW5lZCAvPgogIDwvYS1zcGFjZT4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50IH0gZnJvbSAndnVlJzsKaW1wb3J0IEljb24sIHsgSG9tZU91dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBjb21wb25lbnRzOiB7CiAgICBJY29uLAogICAgSG9tZU91dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4KPHN0eWxlIHNjb3BlZD4KLmN1c3RvbS1pY29ucy1saXN0IDpkZWVwKC5hbnRpY29uKSB7CiAgbWFyZ2luLXJpZ2h0OiA2cHg7Cn0KPC9zdHlsZT4="}},{default:p(()=>[l(g,null,{default:p(()=>[l(f,{style:{color:"hotpink"}},{component:p(()=>t[0]||(t[0]=[c("svg",{width:"1em",height:"1em",fill:"currentColor",viewBox:"0 0 1024 1024"},[c("path",{d:"M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z"})],-1)])),_:1}),l(f,{style:{fontSize:"32px"}},{component:p(m=>[(h(),S("svg",um({viewBox:"0 0 1024 1024",width:"1em",height:"1em",fill:"currentColor"},m),t[1]||(t[1]=[c("path",{d:"M99.096 315.634s-82.58-64.032-82.58-132.13c0-66.064 33.032-165.162 148.646-148.646 83.37 11.91 99.096 165.162 99.096 165.162l-165.162 115.614zM924.906 315.634s82.58-64.032 82.58-132.13c0-66.064-33.032-165.162-148.646-148.646-83.37 11.91-99.096 165.162-99.096 165.162l165.162 115.614z",fill:"#6B676E","p-id":"1143"},null,-1),c("path",{d:"M1024 561.548c0 264.526-229.23 429.42-512.002 429.42S0 826.076 0 561.548 283.96 66.064 512.002 66.064 1024 297.022 1024 561.548z",fill:"#FFEBD2","p-id":"1144"},null,-1),c("path",{d:"M330.324 842.126c0 82.096 81.34 148.646 181.678 148.646s181.678-66.55 181.678-148.646H330.324z",fill:"#E9D7C3","p-id":"1145"},null,-1),c("path",{d:"M644.13 611.098C594.582 528.516 561.55 512 512.002 512c-49.548 0-82.58 16.516-132.13 99.096-42.488 70.814-78.73 211.264-49.548 247.742 66.064 82.58 165.162 33.032 181.678 33.032 16.516 0 115.614 49.548 181.678-33.032 29.18-36.476-7.064-176.93-49.55-247.74z",fill:"#FFFFFF","p-id":"1146"},null,-1),c("path",{d:"M611.098 495.484c0-45.608 36.974-82.58 82.58-82.58 49.548 0 198.194 99.098 198.194 165.162s-79.934 144.904-148.646 99.096c-49.548-33.032-132.128-148.646-132.128-181.678zM412.904 495.484c0-45.608-36.974-82.58-82.58-82.58-49.548 0-198.194 99.098-198.194 165.162s79.934 144.904 148.646 99.096c49.548-33.032 132.128-148.646 132.128-181.678z",fill:"#6B676E","p-id":"1147"},null,-1),c("path",{d:"M512.002 726.622c-30.06 0-115.614 5.668-115.614 33.032 0 49.638 105.484 85.24 115.614 82.58 10.128 2.66 115.614-32.944 115.614-82.58-0.002-27.366-85.556-33.032-115.614-33.032z",fill:"#464655","p-id":"1148"},null,-1),c("path",{d:"M330.324 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z",fill:"#464655","p-id":"1149"},null,-1),c("path",{d:"M693.678 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z",fill:"#464655","p-id":"1150"},null,-1)]),16))]),_:1}),l(f,null,{component:p(()=>[l(d)]),_:1}),l(d)]),_:1})]),htmlCode:p(()=>t[2]||(t[2]=[c("pre",{class:"language-vue"},[c("code",null,[c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("template")]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("a-space")]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("icon")]),o(),c("span",{class:"token attr-name"},":style"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("{ color: 'hotpink' }"),c("span",{class:"token punctuation"},'"')]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("template")]),o(),c("span",{class:"token attr-name"},"#component"),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("svg")]),o(),c("span",{class:"token attr-name"},"width"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1em"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token attr-name"},"height"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1em"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token attr-name"},"fill"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("currentColor"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token attr-name"},"viewBox"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("0 0 1024 1024"),c("span",{class:"token punctuation"},'"')]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("path")]),o(` `),c("span",{class:"token attr-name"},"d"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("icon")]),o(),c("span",{class:"token attr-name"},":style"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("{ fontSize: '32px' }"),c("span",{class:"token punctuation"},'"')]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("template")]),o(),c("span",{class:"token attr-name"},"#component"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("svgProps"),c("span",{class:"token punctuation"},'"')]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("svg")]),o(),c("span",{class:"token attr-name"},"viewBox"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("0 0 1024 1024"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token attr-name"},"width"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1em"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token attr-name"},"height"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1em"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token attr-name"},"fill"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("currentColor"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token attr-name"},"v-bind"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("svgProps"),c("span",{class:"token punctuation"},'"')]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("path")]),o(` `),c("span",{class:"token attr-name"},"d"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("M99.096 315.634s-82.58-64.032-82.58-132.13c0-66.064 33.032-165.162 148.646-148.646 83.37 11.91 99.096 165.162 99.096 165.162l-165.162 115.614zM924.906 315.634s82.58-64.032 82.58-132.13c0-66.064-33.032-165.162-148.646-148.646-83.37 11.91-99.096 165.162-99.096 165.162l165.162 115.614z"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"fill"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("#6B676E"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"p-id"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1143"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("path")]),o(` `),c("span",{class:"token attr-name"},"d"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("M1024 561.548c0 264.526-229.23 429.42-512.002 429.42S0 826.076 0 561.548 283.96 66.064 512.002 66.064 1024 297.022 1024 561.548z"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"fill"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("#FFEBD2"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"p-id"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1144"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("path")]),o(` `),c("span",{class:"token attr-name"},"d"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("M330.324 842.126c0 82.096 81.34 148.646 181.678 148.646s181.678-66.55 181.678-148.646H330.324z"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"fill"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("#E9D7C3"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"p-id"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1145"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("path")]),o(` `),c("span",{class:"token attr-name"},"d"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("M644.13 611.098C594.582 528.516 561.55 512 512.002 512c-49.548 0-82.58 16.516-132.13 99.096-42.488 70.814-78.73 211.264-49.548 247.742 66.064 82.58 165.162 33.032 181.678 33.032 16.516 0 115.614 49.548 181.678-33.032 29.18-36.476-7.064-176.93-49.55-247.74z"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"fill"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("#FFFFFF"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"p-id"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1146"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("path")]),o(` `),c("span",{class:"token attr-name"},"d"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("M611.098 495.484c0-45.608 36.974-82.58 82.58-82.58 49.548 0 198.194 99.098 198.194 165.162s-79.934 144.904-148.646 99.096c-49.548-33.032-132.128-148.646-132.128-181.678zM412.904 495.484c0-45.608-36.974-82.58-82.58-82.58-49.548 0-198.194 99.098-198.194 165.162s79.934 144.904 148.646 99.096c49.548-33.032 132.128-148.646 132.128-181.678z"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"fill"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("#6B676E"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"p-id"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1147"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("path")]),o(` `),c("span",{class:"token attr-name"},"d"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("M512.002 726.622c-30.06 0-115.614 5.668-115.614 33.032 0 49.638 105.484 85.24 115.614 82.58 10.128 2.66 115.614-32.944 115.614-82.58-0.002-27.366-85.556-33.032-115.614-33.032z"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"fill"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("#464655"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"p-id"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1148"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("path")]),o(` `),c("span",{class:"token attr-name"},"d"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("M330.324 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"fill"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("#464655"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"p-id"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1149"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("path")]),o(` `),c("span",{class:"token attr-name"},"d"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("M693.678 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"fill"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("#464655"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"p-id"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1150"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("icon")]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("template")]),o(),c("span",{class:"token attr-name"},"#component"),c("span",{class:"token punctuation"},">")]),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("HomeOutlined")]),o(),c("span",{class:"token punctuation"},"/>")]),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("HomeOutlined")]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("script")]),o(),c("span",{class:"token attr-name"},"lang"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("ts"),c("span",{class:"token punctuation"},'"')]),c("span",{class:"token punctuation"},">")]),c("span",{class:"token script"},[c("span",{class:"token language-javascript"},[o(` `),c("span",{class:"token keyword"},"import"),o(),c("span",{class:"token punctuation"},"{"),o(" defineComponent "),c("span",{class:"token punctuation"},"}"),o(),c("span",{class:"token keyword"},"from"),o(),c("span",{class:"token string"},"'vue'"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token keyword"},"import"),o(" Icon"),c("span",{class:"token punctuation"},","),o(),c("span",{class:"token punctuation"},"{"),o(" HomeOutlined "),c("span",{class:"token punctuation"},"}"),o(),c("span",{class:"token keyword"},"from"),o(),c("span",{class:"token string"},"'@ant-design/icons-vue'"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token keyword"},"export"),o(),c("span",{class:"token keyword"},"default"),o(),c("span",{class:"token function"},"defineComponent"),c("span",{class:"token punctuation"},"("),c("span",{class:"token punctuation"},"{"),o(` `),c("span",{class:"token literal-property property"},"components"),c("span",{class:"token operator"},":"),o(),c("span",{class:"token punctuation"},"{"),o(` Icon`),c("span",{class:"token punctuation"},","),o(` HomeOutlined`),c("span",{class:"token punctuation"},","),o(` `),c("span",{class:"token punctuation"},"}"),c("span",{class:"token punctuation"},","),o(` `),c("span",{class:"token punctuation"},"}"),c("span",{class:"token punctuation"},")"),c("span",{class:"token punctuation"},";"),o(` `)])]),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("style")]),o(),c("span",{class:"token attr-name"},"scoped"),c("span",{class:"token punctuation"},">")]),c("span",{class:"token style"},[c("span",{class:"token language-css"},[o(` `),c("span",{class:"token selector"},".custom-icons-list :deep(.anticon)"),o(),c("span",{class:"token punctuation"},"{"),o(` `),c("span",{class:"token property"},"margin-right"),c("span",{class:"token punctuation"},":"),o(" 6px"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token punctuation"},"}"),o(` `)])]),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `)])],-1)])),jsVersionHtml:p(()=>t[3]||(t[3]=[c("pre",{class:"language-vue"},[c("code",null,[c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("template")]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("a-space")]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("icon")]),o(),c("span",{class:"token attr-name"},":style"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("{ color: 'hotpink' }"),c("span",{class:"token punctuation"},'"')]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("template")]),o(),c("span",{class:"token attr-name"},"#component"),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("svg")]),o(),c("span",{class:"token attr-name"},"width"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1em"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token attr-name"},"height"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1em"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token attr-name"},"fill"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("currentColor"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token attr-name"},"viewBox"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("0 0 1024 1024"),c("span",{class:"token punctuation"},'"')]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("path")]),o(` `),c("span",{class:"token attr-name"},"d"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("icon")]),o(),c("span",{class:"token attr-name"},":style"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("{ fontSize: '32px' }"),c("span",{class:"token punctuation"},'"')]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("template")]),o(),c("span",{class:"token attr-name"},"#component"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("svgProps"),c("span",{class:"token punctuation"},'"')]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("svg")]),o(),c("span",{class:"token attr-name"},"viewBox"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("0 0 1024 1024"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token attr-name"},"width"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1em"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token attr-name"},"height"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1em"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token attr-name"},"fill"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("currentColor"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token attr-name"},"v-bind"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("svgProps"),c("span",{class:"token punctuation"},'"')]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("path")]),o(` `),c("span",{class:"token attr-name"},"d"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("M99.096 315.634s-82.58-64.032-82.58-132.13c0-66.064 33.032-165.162 148.646-148.646 83.37 11.91 99.096 165.162 99.096 165.162l-165.162 115.614zM924.906 315.634s82.58-64.032 82.58-132.13c0-66.064-33.032-165.162-148.646-148.646-83.37 11.91-99.096 165.162-99.096 165.162l165.162 115.614z"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"fill"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("#6B676E"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"p-id"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1143"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("path")]),o(` `),c("span",{class:"token attr-name"},"d"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("M1024 561.548c0 264.526-229.23 429.42-512.002 429.42S0 826.076 0 561.548 283.96 66.064 512.002 66.064 1024 297.022 1024 561.548z"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"fill"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("#FFEBD2"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"p-id"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1144"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("path")]),o(` `),c("span",{class:"token attr-name"},"d"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("M330.324 842.126c0 82.096 81.34 148.646 181.678 148.646s181.678-66.55 181.678-148.646H330.324z"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"fill"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("#E9D7C3"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"p-id"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1145"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("path")]),o(` `),c("span",{class:"token attr-name"},"d"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("M644.13 611.098C594.582 528.516 561.55 512 512.002 512c-49.548 0-82.58 16.516-132.13 99.096-42.488 70.814-78.73 211.264-49.548 247.742 66.064 82.58 165.162 33.032 181.678 33.032 16.516 0 115.614 49.548 181.678-33.032 29.18-36.476-7.064-176.93-49.55-247.74z"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"fill"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("#FFFFFF"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"p-id"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1146"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("path")]),o(` `),c("span",{class:"token attr-name"},"d"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("M611.098 495.484c0-45.608 36.974-82.58 82.58-82.58 49.548 0 198.194 99.098 198.194 165.162s-79.934 144.904-148.646 99.096c-49.548-33.032-132.128-148.646-132.128-181.678zM412.904 495.484c0-45.608-36.974-82.58-82.58-82.58-49.548 0-198.194 99.098-198.194 165.162s79.934 144.904 148.646 99.096c49.548-33.032 132.128-148.646 132.128-181.678z"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"fill"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("#6B676E"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"p-id"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1147"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("path")]),o(` `),c("span",{class:"token attr-name"},"d"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("M512.002 726.622c-30.06 0-115.614 5.668-115.614 33.032 0 49.638 105.484 85.24 115.614 82.58 10.128 2.66 115.614-32.944 115.614-82.58-0.002-27.366-85.556-33.032-115.614-33.032z"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"fill"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("#464655"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"p-id"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1148"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("path")]),o(` `),c("span",{class:"token attr-name"},"d"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("M330.324 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"fill"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("#464655"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"p-id"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1149"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("path")]),o(` `),c("span",{class:"token attr-name"},"d"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("M693.678 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"fill"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("#464655"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token attr-name"},"p-id"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("1150"),c("span",{class:"token punctuation"},'"')]),o(` `),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("icon")]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("template")]),o(),c("span",{class:"token attr-name"},"#component"),c("span",{class:"token punctuation"},">")]),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("HomeOutlined")]),o(),c("span",{class:"token punctuation"},"/>")]),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("HomeOutlined")]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("script")]),c("span",{class:"token punctuation"},">")]),c("span",{class:"token script"},[c("span",{class:"token language-javascript"},[o(` `),c("span",{class:"token keyword"},"import"),o(),c("span",{class:"token punctuation"},"{"),o(" defineComponent "),c("span",{class:"token punctuation"},"}"),o(),c("span",{class:"token keyword"},"from"),o(),c("span",{class:"token string"},"'vue'"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token keyword"},"import"),o(" Icon"),c("span",{class:"token punctuation"},","),o(),c("span",{class:"token punctuation"},"{"),o(" HomeOutlined "),c("span",{class:"token punctuation"},"}"),o(),c("span",{class:"token keyword"},"from"),o(),c("span",{class:"token string"},"'@ant-design/icons-vue'"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token keyword"},"export"),o(),c("span",{class:"token keyword"},"default"),o(),c("span",{class:"token function"},"defineComponent"),c("span",{class:"token punctuation"},"("),c("span",{class:"token punctuation"},"{"),o(` `),c("span",{class:"token literal-property property"},"components"),c("span",{class:"token operator"},":"),o(),c("span",{class:"token punctuation"},"{"),o(` Icon`),c("span",{class:"token punctuation"},","),o(` HomeOutlined`),c("span",{class:"token punctuation"},","),o(` `),c("span",{class:"token punctuation"},"}"),c("span",{class:"token punctuation"},","),o(` `),c("span",{class:"token punctuation"},"}"),c("span",{class:"token punctuation"},")"),c("span",{class:"token punctuation"},";"),o(` `)])]),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("style")]),o(),c("span",{class:"token attr-name"},"scoped"),c("span",{class:"token punctuation"},">")]),c("span",{class:"token style"},[c("span",{class:"token language-css"},[o(` `),c("span",{class:"token selector"},".custom-icons-list :deep(.anticon)"),o(),c("span",{class:"token punctuation"},"{"),o(` `),c("span",{class:"token property"},"margin-right"),c("span",{class:"token punctuation"},":"),o(" 6px"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token punctuation"},"}"),o(` `)])]),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `)])],-1)])),_:1})}const Aot=O(Fot,[["render",Hot],["__scopeId","data-v-d75fbf42"]]);const Vot=Gg({scriptUrl:"//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js"}),kot={components:{IconFont:Vot}};function _ot(n,t,e,r,a,u){const f=s("icon-font"),d=s("a-space"),g=s("demo-box");return h(),P(g,{jsfiddle:{us:"If you are using [iconfont.cn](http://iconfont.cn/), you can use the icons in your project gracefully.",cn:"\u5BF9\u4E8E\u4F7F\u7528 [iconfont.cn](http://iconfont.cn/) \u7684\u7528\u6237\uFF0C\u901A\u8FC7\u8BBE\u7F6E `createFromIconfontCN` \u65B9\u6CD5\u53C2\u6570\u5BF9\u8C61\u4E2D\u7684 `scriptUrl` \u5B57\u6BB5\uFF0C \u5373\u53EF\u8F7B\u677E\u5730\u4F7F\u7528\u5DF2\u6709\u9879\u76EE\u4E2D\u7684\u56FE\u6807\u3002",docHtml:`

zh-CN

\u5BF9\u4E8E\u4F7F\u7528 iconfont.cn \u7684\u7528\u6237\uFF0C\u901A\u8FC7\u8BBE\u7F6E createFromIconfontCN \u65B9\u6CD5\u53C2\u6570\u5BF9\u8C61\u4E2D\u7684 scriptUrl \u5B57\u6BB5\uFF0C \u5373\u53EF\u8F7B\u677E\u5730\u4F7F\u7528\u5DF2\u6709\u9879\u76EE\u4E2D\u7684\u56FE\u6807\u3002

en-US

If you are using iconfont.cn, you can use the icons in your project gracefully.

`,order:2,title:{"zh-CN":"\u4F7F\u7528 iconfont.cn","en-US":"Use iconfont.cn"},relativePath:"components/icon/demo/iconfont.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXNwYWNlPgogICAgPGljb24tZm9udCB0eXBlPSJpY29uLXR1aWNodSIgLz4KICAgIDxpY29uLWZvbnQgdHlwZT0iaWNvbi1mYWNlYm9vayIgLz4KICAgIDxpY29uLWZvbnQgdHlwZT0iaWNvbi10d2l0dGVyIiAvPgogIDwvYS1zcGFjZT4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgY3JlYXRlRnJvbUljb25mb250Q04gfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwoKY29uc3QgSWNvbkZvbnQgPSBjcmVhdGVGcm9tSWNvbmZvbnRDTih7CiAgc2NyaXB0VXJsOiAnLy9hdC5hbGljZG4uY29tL3QvZm9udF84ZDVsOGZ6azViODdpdWRpLmpzJywKfSk7CmV4cG9ydCBkZWZhdWx0IHsKICBjb21wb25lbnRzOiB7CiAgICBJY29uRm9udCwKICB9LAp9Owo8L3NjcmlwdD4KPHN0eWxlIHNjb3BlZD4KLmljb25zLWxpc3QgOmRlZXAoLmFudGljb24pIHsKICBtYXJnaW4tcmlnaHQ6IDZweDsKICBmb250LXNpemU6IDI0cHg7Cn0KPC9zdHlsZT4K",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXNwYWNlPgogICAgPGljb24tZm9udCB0eXBlPSJpY29uLXR1aWNodSIgLz4KICAgIDxpY29uLWZvbnQgdHlwZT0iaWNvbi1mYWNlYm9vayIgLz4KICAgIDxpY29uLWZvbnQgdHlwZT0iaWNvbi10d2l0dGVyIiAvPgogIDwvYS1zcGFjZT4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgY3JlYXRlRnJvbUljb25mb250Q04gfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpjb25zdCBJY29uRm9udCA9IGNyZWF0ZUZyb21JY29uZm9udENOKHsKICBzY3JpcHRVcmw6ICcvL2F0LmFsaWNkbi5jb20vdC9mb250XzhkNWw4ZnprNWI4N2l1ZGkuanMnLAp9KTsKZXhwb3J0IGRlZmF1bHQgewogIGNvbXBvbmVudHM6IHsKICAgIEljb25Gb250LAogIH0sCn07Cjwvc2NyaXB0Pgo8c3R5bGUgc2NvcGVkPgouaWNvbnMtbGlzdCA6ZGVlcCguYW50aWNvbikgewogIG1hcmdpbi1yaWdodDogNnB4OwogIGZvbnQtc2l6ZTogMjRweDsKfQo8L3N0eWxlPg=="}},{default:p(()=>[l(d,null,{default:p(()=>[l(f,{type:"icon-tuichu"}),l(f,{type:"icon-facebook"}),l(f,{type:"icon-twitter"})]),_:1})]),htmlCode:p(()=>t[0]||(t[0]=[c("pre",{class:"language-vue"},[c("code",null,[c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("template")]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("a-space")]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("icon-font")]),o(),c("span",{class:"token attr-name"},"type"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("icon-tuichu"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("icon-font")]),o(),c("span",{class:"token attr-name"},"type"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("icon-facebook"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("icon-font")]),o(),c("span",{class:"token attr-name"},"type"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("icon-twitter"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("script")]),c("span",{class:"token punctuation"},">")]),c("span",{class:"token script"},[c("span",{class:"token language-javascript"},[o(` `),c("span",{class:"token keyword"},"import"),o(),c("span",{class:"token punctuation"},"{"),o(" createFromIconfontCN "),c("span",{class:"token punctuation"},"}"),o(),c("span",{class:"token keyword"},"from"),o(),c("span",{class:"token string"},"'@ant-design/icons-vue'"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token keyword"},"const"),o(" IconFont "),c("span",{class:"token operator"},"="),o(),c("span",{class:"token function"},"createFromIconfontCN"),c("span",{class:"token punctuation"},"("),c("span",{class:"token punctuation"},"{"),o(` `),c("span",{class:"token literal-property property"},"scriptUrl"),c("span",{class:"token operator"},":"),o(),c("span",{class:"token string"},"'//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'"),c("span",{class:"token punctuation"},","),o(` `),c("span",{class:"token punctuation"},"}"),c("span",{class:"token punctuation"},")"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token keyword"},"export"),o(),c("span",{class:"token keyword"},"default"),o(),c("span",{class:"token punctuation"},"{"),o(` `),c("span",{class:"token literal-property property"},"components"),c("span",{class:"token operator"},":"),o(),c("span",{class:"token punctuation"},"{"),o(` IconFont`),c("span",{class:"token punctuation"},","),o(` `),c("span",{class:"token punctuation"},"}"),c("span",{class:"token punctuation"},","),o(` `),c("span",{class:"token punctuation"},"}"),c("span",{class:"token punctuation"},";"),o(` `)])]),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("style")]),o(),c("span",{class:"token attr-name"},"scoped"),c("span",{class:"token punctuation"},">")]),c("span",{class:"token style"},[c("span",{class:"token language-css"},[o(` `),c("span",{class:"token selector"},".icons-list :deep(.anticon)"),o(),c("span",{class:"token punctuation"},"{"),o(` `),c("span",{class:"token property"},"margin-right"),c("span",{class:"token punctuation"},":"),o(" 6px"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token property"},"font-size"),c("span",{class:"token punctuation"},":"),o(" 24px"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token punctuation"},"}"),o(` `)])]),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `)])],-1)])),jsVersionHtml:p(()=>t[1]||(t[1]=[c("pre",{class:"language-vue"},[c("code",null,[c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("template")]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("a-space")]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("icon-font")]),o(),c("span",{class:"token attr-name"},"type"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("icon-tuichu"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("icon-font")]),o(),c("span",{class:"token attr-name"},"type"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("icon-facebook"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("icon-font")]),o(),c("span",{class:"token attr-name"},"type"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("icon-twitter"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("script")]),c("span",{class:"token punctuation"},">")]),c("span",{class:"token script"},[c("span",{class:"token language-javascript"},[o(` `),c("span",{class:"token keyword"},"import"),o(),c("span",{class:"token punctuation"},"{"),o(" createFromIconfontCN "),c("span",{class:"token punctuation"},"}"),o(),c("span",{class:"token keyword"},"from"),o(),c("span",{class:"token string"},"'@ant-design/icons-vue'"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token keyword"},"const"),o(" IconFont "),c("span",{class:"token operator"},"="),o(),c("span",{class:"token function"},"createFromIconfontCN"),c("span",{class:"token punctuation"},"("),c("span",{class:"token punctuation"},"{"),o(` `),c("span",{class:"token literal-property property"},"scriptUrl"),c("span",{class:"token operator"},":"),o(),c("span",{class:"token string"},"'//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'"),c("span",{class:"token punctuation"},","),o(` `),c("span",{class:"token punctuation"},"}"),c("span",{class:"token punctuation"},")"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token keyword"},"export"),o(),c("span",{class:"token keyword"},"default"),o(),c("span",{class:"token punctuation"},"{"),o(` `),c("span",{class:"token literal-property property"},"components"),c("span",{class:"token operator"},":"),o(),c("span",{class:"token punctuation"},"{"),o(` IconFont`),c("span",{class:"token punctuation"},","),o(` `),c("span",{class:"token punctuation"},"}"),c("span",{class:"token punctuation"},","),o(` `),c("span",{class:"token punctuation"},"}"),c("span",{class:"token punctuation"},";"),o(` `)])]),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("style")]),o(),c("span",{class:"token attr-name"},"scoped"),c("span",{class:"token punctuation"},">")]),c("span",{class:"token style"},[c("span",{class:"token language-css"},[o(` `),c("span",{class:"token selector"},".icons-list :deep(.anticon)"),o(),c("span",{class:"token punctuation"},"{"),o(` `),c("span",{class:"token property"},"margin-right"),c("span",{class:"token punctuation"},":"),o(" 6px"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token property"},"font-size"),c("span",{class:"token punctuation"},":"),o(" 24px"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token punctuation"},"}"),o(` `)])]),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `)])],-1)])),_:1})}const Dot=O(kot,[["render",_ot],["__scopeId","data-v-b415d89d"]]);const Lot={components:{SmileTwoTone:Ng,HeartTwoTone:Eg,CheckCircleTwoTone:Bg}};function Iot(n,t,e,r,a,u){const f=s("smile-two-tone"),d=s("heart-two-tone"),g=s("check-circle-two-tone"),v=s("a-space"),m=s("demo-box");return h(),P(m,{jsfiddle:{us:"You can set `two-tone-color` prop to specific primary color for two-tone icons.",cn:"\u53CC\u8272\u56FE\u6807\u53EF\u4EE5\u901A\u8FC7 `two-tone-color` \u5C5E\u6027\u8BBE\u7F6E\u4E3B\u9898\u8272\u3002",docHtml:`

zh-CN

\u53CC\u8272\u56FE\u6807\u53EF\u4EE5\u901A\u8FC7 two-tone-color \u5C5E\u6027\u8BBE\u7F6E\u4E3B\u9898\u8272\u3002

en-US

You can set two-tone-color prop to specific primary color for two-tone icons.

`,order:3,title:{"zh-CN":"\u591A\u8272\u56FE\u6807","en-US":"Two-tone icon and colorful icon"},relativePath:"components/icon/demo/two-tone.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXNwYWNlPgogICAgPHNtaWxlLXR3by10b25lIC8+CiAgICA8aGVhcnQtdHdvLXRvbmUgdHdvLXRvbmUtY29sb3I9IiNlYjJmOTYiIC8+CiAgICA8Y2hlY2stY2lyY2xlLXR3by10b25lIHR3by10b25lLWNvbG9yPSIjNTJjNDFhIiAvPgogIDwvYS1zcGFjZT4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgU21pbGVUd29Ub25lLCBIZWFydFR3b1RvbmUsIENoZWNrQ2lyY2xlVHdvVG9uZSB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IHsKICBjb21wb25lbnRzOiB7CiAgICBTbWlsZVR3b1RvbmUsCiAgICBIZWFydFR3b1RvbmUsCiAgICBDaGVja0NpcmNsZVR3b1RvbmUsCiAgfSwKfTsKPC9zY3JpcHQ+CjxzdHlsZSBzY29wZWQ+Ci5pY29ucy1saXN0IDpkZWVwKC5hbnRpY29uKSB7CiAgbWFyZ2luLXJpZ2h0OiA2cHg7CiAgZm9udC1zaXplOiAyNHB4Owp9Cjwvc3R5bGU+Cg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXNwYWNlPgogICAgPHNtaWxlLXR3by10b25lIC8+CiAgICA8aGVhcnQtdHdvLXRvbmUgdHdvLXRvbmUtY29sb3I9IiNlYjJmOTYiIC8+CiAgICA8Y2hlY2stY2lyY2xlLXR3by10b25lIHR3by10b25lLWNvbG9yPSIjNTJjNDFhIiAvPgogIDwvYS1zcGFjZT4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgU21pbGVUd29Ub25lLCBIZWFydFR3b1RvbmUsIENoZWNrQ2lyY2xlVHdvVG9uZSB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IHsKICBjb21wb25lbnRzOiB7CiAgICBTbWlsZVR3b1RvbmUsCiAgICBIZWFydFR3b1RvbmUsCiAgICBDaGVja0NpcmNsZVR3b1RvbmUsCiAgfSwKfTsKPC9zY3JpcHQ+CjxzdHlsZSBzY29wZWQ+Ci5pY29ucy1saXN0IDpkZWVwKC5hbnRpY29uKSB7CiAgbWFyZ2luLXJpZ2h0OiA2cHg7CiAgZm9udC1zaXplOiAyNHB4Owp9Cjwvc3R5bGU+"}},{default:p(()=>[l(v,null,{default:p(()=>[l(f),l(d,{"two-tone-color":"#eb2f96"}),l(g,{"two-tone-color":"#52c41a"})]),_:1})]),htmlCode:p(()=>t[0]||(t[0]=[c("pre",{class:"language-vue"},[c("code",null,[c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("template")]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("a-space")]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("smile-two-tone")]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("heart-two-tone")]),o(),c("span",{class:"token attr-name"},"two-tone-color"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("#eb2f96"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("check-circle-two-tone")]),o(),c("span",{class:"token attr-name"},"two-tone-color"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("#52c41a"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("script")]),c("span",{class:"token punctuation"},">")]),c("span",{class:"token script"},[c("span",{class:"token language-javascript"},[o(` `),c("span",{class:"token keyword"},"import"),o(),c("span",{class:"token punctuation"},"{"),o(" SmileTwoTone"),c("span",{class:"token punctuation"},","),o(" HeartTwoTone"),c("span",{class:"token punctuation"},","),o(" CheckCircleTwoTone "),c("span",{class:"token punctuation"},"}"),o(),c("span",{class:"token keyword"},"from"),o(),c("span",{class:"token string"},"'@ant-design/icons-vue'"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token keyword"},"export"),o(),c("span",{class:"token keyword"},"default"),o(),c("span",{class:"token punctuation"},"{"),o(` `),c("span",{class:"token literal-property property"},"components"),c("span",{class:"token operator"},":"),o(),c("span",{class:"token punctuation"},"{"),o(` SmileTwoTone`),c("span",{class:"token punctuation"},","),o(` HeartTwoTone`),c("span",{class:"token punctuation"},","),o(` CheckCircleTwoTone`),c("span",{class:"token punctuation"},","),o(` `),c("span",{class:"token punctuation"},"}"),c("span",{class:"token punctuation"},","),o(` `),c("span",{class:"token punctuation"},"}"),c("span",{class:"token punctuation"},";"),o(` `)])]),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("style")]),o(),c("span",{class:"token attr-name"},"scoped"),c("span",{class:"token punctuation"},">")]),c("span",{class:"token style"},[c("span",{class:"token language-css"},[o(` `),c("span",{class:"token selector"},".icons-list :deep(.anticon)"),o(),c("span",{class:"token punctuation"},"{"),o(` `),c("span",{class:"token property"},"margin-right"),c("span",{class:"token punctuation"},":"),o(" 6px"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token property"},"font-size"),c("span",{class:"token punctuation"},":"),o(" 24px"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token punctuation"},"}"),o(` `)])]),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `)])],-1)])),jsVersionHtml:p(()=>t[1]||(t[1]=[c("pre",{class:"language-vue"},[c("code",null,[c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("template")]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("a-space")]),c("span",{class:"token punctuation"},">")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("smile-two-tone")]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("heart-two-tone")]),o(),c("span",{class:"token attr-name"},"two-tone-color"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("#eb2f96"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("check-circle-two-tone")]),o(),c("span",{class:"token attr-name"},"two-tone-color"),c("span",{class:"token attr-value"},[c("span",{class:"token punctuation attr-equals"},"="),c("span",{class:"token punctuation"},'"'),o("#52c41a"),c("span",{class:"token punctuation"},'"')]),o(),c("span",{class:"token punctuation"},"/>")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("script")]),c("span",{class:"token punctuation"},">")]),c("span",{class:"token script"},[c("span",{class:"token language-javascript"},[o(` `),c("span",{class:"token keyword"},"import"),o(),c("span",{class:"token punctuation"},"{"),o(" SmileTwoTone"),c("span",{class:"token punctuation"},","),o(" HeartTwoTone"),c("span",{class:"token punctuation"},","),o(" CheckCircleTwoTone "),c("span",{class:"token punctuation"},"}"),o(),c("span",{class:"token keyword"},"from"),o(),c("span",{class:"token string"},"'@ant-design/icons-vue'"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token keyword"},"export"),o(),c("span",{class:"token keyword"},"default"),o(),c("span",{class:"token punctuation"},"{"),o(` `),c("span",{class:"token literal-property property"},"components"),c("span",{class:"token operator"},":"),o(),c("span",{class:"token punctuation"},"{"),o(` SmileTwoTone`),c("span",{class:"token punctuation"},","),o(` HeartTwoTone`),c("span",{class:"token punctuation"},","),o(` CheckCircleTwoTone`),c("span",{class:"token punctuation"},","),o(` `),c("span",{class:"token punctuation"},"}"),c("span",{class:"token punctuation"},","),o(` `),c("span",{class:"token punctuation"},"}"),c("span",{class:"token punctuation"},";"),o(` `)])]),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"<"),o("style")]),o(),c("span",{class:"token attr-name"},"scoped"),c("span",{class:"token punctuation"},">")]),c("span",{class:"token style"},[c("span",{class:"token language-css"},[o(` `),c("span",{class:"token selector"},".icons-list :deep(.anticon)"),o(),c("span",{class:"token punctuation"},"{"),o(` `),c("span",{class:"token property"},"margin-right"),c("span",{class:"token punctuation"},":"),o(" 6px"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token property"},"font-size"),c("span",{class:"token punctuation"},":"),o(" 24px"),c("span",{class:"token punctuation"},";"),o(` `),c("span",{class:"token punctuation"},"}"),o(` `)])]),c("span",{class:"token tag"},[c("span",{class:"token tag"},[c("span",{class:"token punctuation"},"")]),o(` `)])],-1)])),_:1})}const xot=O(Lot,[["render",Iot],["__scopeId","data-v-4b3c3d70"]]),Not={pageData:{title:"Icon",description:"",frontmatter:{category:"Components",type:"\u901A\u7528",title:"Icon",subtitle:"\u56FE\u6807",cover:"https://gw.alipayobjects.com/zos/alicdn/rrwbSt3FQ/Icon.svg"},headers:[{level:2,title:"\u8BBE\u8BA1\u5E08\u4E13\u5C5E",slug:"\u8BBE\u8BA1\u5E08\u4E13\u5C5E",content:"\u5B89\u88C5 [Kitchen Sketch \u63D2\u4EF6 \u{1F48E}](https://kitchen.alipay.com)\uFF0C\u5C31\u53EF\u4EE5\u4E00\u952E\u62D6\u62FD\u4F7F\u7528 Ant Design \u548C Iconfont \u7684\u6D77\u91CF\u56FE\u6807\uFF0C\u8FD8\u53EF\u4EE5\u5173\u8054\u81EA\u6709\u9879\u76EE\u3002"},{level:2,title:"API",slug:"API",content:"\u901A\u7528\u56FE\u6807"},{level:3,title:"\u901A\u7528\u56FE\u6807",slug:"\u901A\u7528\u56FE\u6807",content:""},{level:3,title:"\u81EA\u5B9A\u4E49 Icon/Custom Icon",slug:"\u81EA\u5B9A\u4E49-Icon-Custom-Icon",content:""},{level:3,title:"SVG \u56FE\u6807",slug:"SVG-\u56FE\u6807",content:"\u5728 `1.2.0` \u4E4B\u540E\uFF0C\u6211\u4EEC\u4F7F\u7528\u4E86 SVG \u56FE\u6807\u66FF\u6362\u4E86\u539F\u5148\u7684 font \u56FE\u6807\uFF0C\u4ECE\u800C\u5E26\u6765\u4E86\u4EE5\u4E0B\u4F18\u52BF\uFF1A"},{level:3,title:"\u53CC\u8272\u56FE\u6807\u4E3B\u8272",slug:"\u53CC\u8272\u56FE\u6807\u4E3B\u8272",content:"\u5BF9\u4E8E\u53CC\u8272\u56FE\u6807\uFF0C\u53EF\u4EE5\u901A\u8FC7\u4F7F\u7528 `Icon.getTwoToneColor()` \u548C `Icon.setTwoToneColor(colorString)` \u6765\u5168\u5C40\u8BBE\u7F6E\u56FE\u6807\u4E3B\u8272\u3002"},{level:3,title:"\u81EA\u5B9A\u4E49 font \u56FE\u6807",slug:"\u81EA\u5B9A\u4E49-font-\u56FE\u6807",content:"\u5728 `1.2.0` \u4E4B\u540E\uFF0C\u6211\u4EEC\u63D0\u4F9B\u4E86\u4E00\u4E2A `createFromIconfontCN` \u65B9\u6CD5\uFF0C\u65B9\u4FBF\u5F00\u53D1\u8005\u8C03\u7528\u5728 [iconfont.cn](http://iconfont.cn/) \u4E0A\u81EA\u884C\u7BA1\u7406\u7684\u56FE\u6807\u3002"},{level:3,title:"\u81EA\u5B9A\u4E49 SVG \u56FE\u6807",slug:"\u81EA\u5B9A\u4E49-SVG-\u56FE\u6807",content:"\u5982\u679C\u4F7F\u7528 `vue cli 3`\uFF0C\u53EF\u4EE5\u901A\u8FC7\u914D\u7F6E [vue-svg-loader](https://www.npmjs.com/package/vue-svg-loader) \u6765\u5C06 `svg` \u56FE\u6807\u4F5C\u4E3A `Vue` \u7EC4\u4EF6\u5BFC\u5165\u3002\u66F4\u591A`vue-svg-loader` \u7684\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u9605 [\u6587\u6863](https://github.com/visualfanatic/vue-svg-loader)\u3002"}],relativePath:"components/icon/index.zh-CN.md",content:` \u8BED\u4E49\u5316\u7684\u77E2\u91CF\u56FE\u5F62\u3002\u4F7F\u7528\u56FE\u6807\u7EC4\u4EF6\uFF0C\u4F60\u9700\u8981\u5B89\u88C5 \`@ant-design/icons-vue\` \u56FE\u6807\u7EC4\u4EF6\u5305\uFF1A \`\`\`bash npm install --save @ant-design/icons-vue \`\`\` ## \u8BBE\u8BA1\u5E08\u4E13\u5C5E \u5B89\u88C5 [Kitchen Sketch \u63D2\u4EF6 \u{1F48E}](https://kitchen.alipay.com)\uFF0C\u5C31\u53EF\u4EE5\u4E00\u952E\u62D6\u62FD\u4F7F\u7528 Ant Design \u548C Iconfont \u7684\u6D77\u91CF\u56FE\u6807\uFF0C\u8FD8\u53EF\u4EE5\u5173\u8054\u81EA\u6709\u9879\u76EE\u3002 ## API ### \u901A\u7528\u56FE\u6807 | \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C | | --- | --- | --- | --- | --- | | rotate | \u56FE\u6807\u65CB\u8F6C\u89D2\u5EA6\uFF08IE9 \u65E0\u6548\uFF09 | number | - | | | spin | \u662F\u5426\u6709\u65CB\u8F6C\u52A8\u753B | boolean | false | | | style | \u8BBE\u7F6E\u56FE\u6807\u7684\u6837\u5F0F\uFF0C\u4F8B\u5982 \`fontSize\` \u548C \`color\` | CSSProperties | - | | | twoToneColor | \u4EC5\u9002\u7528\u53CC\u8272\u56FE\u6807\u3002\u8BBE\u7F6E\u53CC\u8272\u56FE\u6807\u7684\u4E3B\u8981\u989C\u8272 | string (\u5341\u516D\u8FDB\u5236\u989C\u8272) | - | | \u5176\u4E2D\u6211\u4EEC\u63D0\u4F9B\u4E86\u4E09\u79CD\u4E3B\u9898\u7684\u56FE\u6807\uFF0C\u4E0D\u540C\u4E3B\u9898\u7684 Icon \u7EC4\u4EF6\u540D\u4E3A\u56FE\u6807\u540D\u52A0\u4E3B\u9898\u505A\u4E3A\u540E\u7F00\u3002 \`\`\`jsx import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue'; <star-outlined /> <star-filled /> <star-two-tone two-tone-color="#eb2f96" /> \`\`\` ### \u81EA\u5B9A\u4E49 Icon/Custom Icon | \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C | | --- | --- | --- | --- | --- | | component | \u63A7\u5236\u5982\u4F55\u6E32\u67D3\u56FE\u6807\uFF0C\u901A\u5E38\u662F\u4E00\u4E2A\u6E32\u67D3\u6839\u6807\u7B7E\u4E3A \`<svg>\` \u7684 \`Vue\` \u7EC4\u4EF6 | ComponentType&lt;CustomIconComponentProps> | - | | | rotate | \u56FE\u6807\u65CB\u8F6C\u89D2\u5EA6\uFF08IE9 \u65E0\u6548\uFF09 | number | - | | | spin | \u662F\u5426\u6709\u65CB\u8F6C\u52A8\u753B | boolean | false | | | style | \u8BBE\u7F6E\u56FE\u6807\u7684\u6837\u5F0F\uFF0C\u4F8B\u5982 \`fontSize\` \u548C \`color\` | CSSProperties | - | | ### SVG \u56FE\u6807 \u5728 \`1.2.0\` \u4E4B\u540E\uFF0C\u6211\u4EEC\u4F7F\u7528\u4E86 SVG \u56FE\u6807\u66FF\u6362\u4E86\u539F\u5148\u7684 font \u56FE\u6807\uFF0C\u4ECE\u800C\u5E26\u6765\u4E86\u4EE5\u4E0B\u4F18\u52BF\uFF1A - \u5B8C\u5168\u79BB\u7EBF\u5316\u4F7F\u7528\uFF0C\u4E0D\u9700\u8981\u4ECE CDN \u4E0B\u8F7D\u5B57\u4F53\u6587\u4EF6\uFF0C\u56FE\u6807\u4E0D\u4F1A\u56E0\u4E3A\u7F51\u7EDC\u95EE\u9898\u5448\u73B0\u65B9\u5757\uFF0C\u4E5F\u65E0\u9700\u5B57\u4F53\u6587\u4EF6\u672C\u5730\u90E8\u7F72\u3002 - \u5728\u4F4E\u7AEF\u8BBE\u5907\u4E0A SVG \u6709\u66F4\u597D\u7684\u6E05\u6670\u5EA6\u3002 - \u652F\u6301\u591A\u8272\u56FE\u6807\u3002 - \u5BF9\u4E8E\u5185\u5EFA\u56FE\u6807\u7684\u66F4\u6362\u53EF\u4EE5\u63D0\u4F9B\u66F4\u591A API\uFF0C\u800C\u4E0D\u9700\u8981\u8FDB\u884C\u6837\u5F0F\u8986\u76D6\u3002 \u66F4\u591A\u8BA8\u8BBA\u53EF\u53C2\u8003\uFF1A[#10353](https://github.com/ant-design/ant-design/issues/10353)\u3002 \u6240\u6709\u7684\u56FE\u6807\u90FD\u4F1A\u4EE5 \`<svg>\` \u6807\u7B7E\u6E32\u67D3\uFF0C\u53EF\u4EE5\u4F7F\u7528 \`style\` \u548C \`class\` \u8BBE\u7F6E\u56FE\u6807\u7684\u5927\u5C0F\u548C\u5355\u8272\u56FE\u6807\u7684\u989C\u8272\u3002\u4F8B\u5982\uFF1A \`\`\`html <template> <message-outlined :style="{fontSize: '16px', color: '#08c'}" /> </template> <script> import { MessageOutlined } from '@ant-design/icons-vue'; import { defineComponent } from 'vue'; export default defineComponent({ components: { MessageOutlined, }, }); </script> \`\`\` ### \u53CC\u8272\u56FE\u6807\u4E3B\u8272 \u5BF9\u4E8E\u53CC\u8272\u56FE\u6807\uFF0C\u53EF\u4EE5\u901A\u8FC7\u4F7F\u7528 \`Icon.getTwoToneColor()\` \u548C \`Icon.setTwoToneColor(colorString)\` \u6765\u5168\u5C40\u8BBE\u7F6E\u56FE\u6807\u4E3B\u8272\u3002 \`\`\`jsx import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons-vue'; setTwoToneColor('#eb2f96'); getTwoToneColor(); // #eb2f96 \`\`\` ### \u81EA\u5B9A\u4E49 font \u56FE\u6807 \u5728 \`1.2.0\` \u4E4B\u540E\uFF0C\u6211\u4EEC\u63D0\u4F9B\u4E86\u4E00\u4E2A \`createFromIconfontCN\` \u65B9\u6CD5\uFF0C\u65B9\u4FBF\u5F00\u53D1\u8005\u8C03\u7528\u5728 [iconfont.cn](http://iconfont.cn/) \u4E0A\u81EA\u884C\u7BA1\u7406\u7684\u56FE\u6807\u3002 \`\`\`jsx import { createFromIconfontCN } from '@ant-design/icons-vue'; import { defineComponent } from 'vue'; const MyIcon = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // \u5728 iconfont.cn \u4E0A\u751F\u6210 }); export default defineComponent({ setup() { return () => <MyIcon type="icon-dianzan" />; }, }); \`\`\` \u5176\u672C\u8D28\u4E0A\u662F\u521B\u5EFA\u4E86\u4E00\u4E2A\u4F7F\u7528 \`<use>\` \u6807\u7B7E\u6765\u6E32\u67D3\u56FE\u6807\u7684\u7EC4\u4EF6\u3002 \`options\` \u7684\u914D\u7F6E\u9879\u5982\u4E0B\uFF1A | \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | | --- | --- | --- | --- | | extraCommonProps | \u7ED9\u6240\u6709\u7684 \`svg\` \u56FE\u6807 \`<Icon />\` \u7EC4\u4EF6\u8BBE\u7F6E\u989D\u5916\u7684\u5C5E\u6027 | \`{ class, attrs, props, on, style }\` | {} | | scriptUrl | [iconfont.cn](http://iconfont.cn/) \u9879\u76EE\u5728\u7EBF\u751F\u6210\u7684 \`js\` \u5730\u5740 | string | - | \u5728 \`scriptUrl\` \u90FD\u8BBE\u7F6E\u6709\u6548\u7684\u60C5\u51B5\u4E0B\uFF0C\u7EC4\u4EF6\u5728\u6E32\u67D3\u524D\u4F1A\u81EA\u52A8\u5F15\u5165 [iconfont.cn](http://iconfont.cn/) \u9879\u76EE\u4E2D\u7684\u56FE\u6807\u7B26\u53F7\u96C6\uFF0C\u65E0\u9700\u624B\u52A8\u5F15\u5165\u3002 \u89C1 [iconfont.cn \u4F7F\u7528\u5E2E\u52A9](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) \u67E5\u770B\u5982\u4F55\u751F\u6210 \`js\` \u5730\u5740\u3002 ### \u81EA\u5B9A\u4E49 SVG \u56FE\u6807 \u5982\u679C\u4F7F\u7528 \`vue cli 3\`\uFF0C\u53EF\u4EE5\u901A\u8FC7\u914D\u7F6E [vue-svg-loader](https://www.npmjs.com/package/vue-svg-loader) \u6765\u5C06 \`svg\` \u56FE\u6807\u4F5C\u4E3A \`Vue\` \u7EC4\u4EF6\u5BFC\u5165\u3002\u66F4\u591A\`vue-svg-loader\` \u7684\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u9605 [\u6587\u6863](https://github.com/visualfanatic/vue-svg-loader)\u3002 \`\`\`js // vue.config.js module.exports = { chainWebpack: config => { const svgRule = config.module.rule('svg'); svgRule.uses.clear(); svgRule.use('vue-svg-loader').loader('vue-svg-loader'); }, }; \`\`\` \`\`\`jsx import { defineComponent } from 'vue'; import Icon from '@ant-design/icons-vue'; import MessageSvg from 'path/to/message.svg'; // '*.svg' \u6587\u4EF6\u7684\u8DEF\u5F84 export default defineComponent({ setup() { return () => <Icon type={MessageSvg} />; }, }); \`\`\` \`Icon\` \u4E2D\u7684 \`component\` \u7EC4\u4EF6\u7684\u63A5\u53D7\u7684\u5C5E\u6027\u5982\u4E0B\uFF1A | \u5B57\u6BB5 | \u8BF4\u660E | \u7C7B\u578B | \u53EA\u8BFB\u503C | | ------ | ----------------------- | ---------------- | -------------- | | class | \u8BA1\u7B97\u540E\u7684 \`svg\` \u7C7B\u540D | string | - | | fill | \`svg\` \u5143\u7D20\u586B\u5145\u7684\u989C\u8272 | string | 'currentColor' | | height | \`svg\` \u5143\u7D20\u9AD8\u5EA6 | string \\| number | '1em' | | style | \u8BA1\u7B97\u540E\u7684 \`svg\` \u5143\u7D20\u6837\u5F0F | CSSProperties | - | | width | \`svg\` \u5143\u7D20\u5BBD\u5EA6 | string \\| number | '1em' | `,html:`

\u8BED\u4E49\u5316\u7684\u77E2\u91CF\u56FE\u5F62\u3002\u4F7F\u7528\u56FE\u6807\u7EC4\u4EF6\uFF0C\u4F60\u9700\u8981\u5B89\u88C5 @ant-design/icons-vue \u56FE\u6807\u7EC4\u4EF6\u5305\uFF1A

npm install --save @ant-design/icons-vue

\u8BBE\u8BA1\u5E08\u4E13\u5C5E

\u5B89\u88C5 Kitchen Sketch \u63D2\u4EF6 \u{1F48E}\uFF0C\u5C31\u53EF\u4EE5\u4E00\u952E\u62D6\u62FD\u4F7F\u7528 Ant Design \u548C Iconfont \u7684\u6D77\u91CF\u56FE\u6807\uFF0C\u8FD8\u53EF\u4EE5\u5173\u8054\u81EA\u6709\u9879\u76EE\u3002

API

\u901A\u7528\u56FE\u6807

\u53C2\u6570 \u8BF4\u660E \u7C7B\u578B \u9ED8\u8BA4\u503C \u7248\u672C
rotate \u56FE\u6807\u65CB\u8F6C\u89D2\u5EA6\uFF08IE9 \u65E0\u6548\uFF09 number -
spin \u662F\u5426\u6709\u65CB\u8F6C\u52A8\u753B boolean false
style \u8BBE\u7F6E\u56FE\u6807\u7684\u6837\u5F0F\uFF0C\u4F8B\u5982 fontSize \u548C color CSSProperties -
twoToneColor \u4EC5\u9002\u7528\u53CC\u8272\u56FE\u6807\u3002\u8BBE\u7F6E\u53CC\u8272\u56FE\u6807\u7684\u4E3B\u8981\u989C\u8272 string (\u5341\u516D\u8FDB\u5236\u989C\u8272) -

\u5176\u4E2D\u6211\u4EEC\u63D0\u4F9B\u4E86\u4E09\u79CD\u4E3B\u9898\u7684\u56FE\u6807\uFF0C\u4E0D\u540C\u4E3B\u9898\u7684 Icon \u7EC4\u4EF6\u540D\u4E3A\u56FE\u6807\u540D\u52A0\u4E3B\u9898\u505A\u4E3A\u540E\u7F00\u3002

import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue';

<star-outlined />
<star-filled />
<star-two-tone two-tone-color="#eb2f96" />

\u81EA\u5B9A\u4E49 Icon/Custom Icon

\u53C2\u6570 \u8BF4\u660E \u7C7B\u578B \u9ED8\u8BA4\u503C \u7248\u672C
component \u63A7\u5236\u5982\u4F55\u6E32\u67D3\u56FE\u6807\uFF0C\u901A\u5E38\u662F\u4E00\u4E2A\u6E32\u67D3\u6839\u6807\u7B7E\u4E3A <svg> \u7684 Vue \u7EC4\u4EF6 ComponentType<CustomIconComponentProps> -
rotate \u56FE\u6807\u65CB\u8F6C\u89D2\u5EA6\uFF08IE9 \u65E0\u6548\uFF09 number -
spin \u662F\u5426\u6709\u65CB\u8F6C\u52A8\u753B boolean false
style \u8BBE\u7F6E\u56FE\u6807\u7684\u6837\u5F0F\uFF0C\u4F8B\u5982 fontSize \u548C color CSSProperties -

SVG \u56FE\u6807

\u5728 1.2.0 \u4E4B\u540E\uFF0C\u6211\u4EEC\u4F7F\u7528\u4E86 SVG \u56FE\u6807\u66FF\u6362\u4E86\u539F\u5148\u7684 font \u56FE\u6807\uFF0C\u4ECE\u800C\u5E26\u6765\u4E86\u4EE5\u4E0B\u4F18\u52BF\uFF1A

\u66F4\u591A\u8BA8\u8BBA\u53EF\u53C2\u8003\uFF1A#10353\u3002

\u6240\u6709\u7684\u56FE\u6807\u90FD\u4F1A\u4EE5 <svg> \u6807\u7B7E\u6E32\u67D3\uFF0C\u53EF\u4EE5\u4F7F\u7528 style \u548C class \u8BBE\u7F6E\u56FE\u6807\u7684\u5927\u5C0F\u548C\u5355\u8272\u56FE\u6807\u7684\u989C\u8272\u3002\u4F8B\u5982\uFF1A

<template>
  <message-outlined :style="{fontSize: '16px', color: '#08c'}" />
</template>
<script>
  import { MessageOutlined } from '@ant-design/icons-vue';
  import { defineComponent } from 'vue';
  export default defineComponent({
    components: {
      MessageOutlined,
    },
  });
</script>

\u53CC\u8272\u56FE\u6807\u4E3B\u8272

\u5BF9\u4E8E\u53CC\u8272\u56FE\u6807\uFF0C\u53EF\u4EE5\u901A\u8FC7\u4F7F\u7528 Icon.getTwoToneColor() \u548C Icon.setTwoToneColor(colorString) \u6765\u5168\u5C40\u8BBE\u7F6E\u56FE\u6807\u4E3B\u8272\u3002

import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons-vue';

setTwoToneColor('#eb2f96');
getTwoToneColor(); // #eb2f96

\u81EA\u5B9A\u4E49 font \u56FE\u6807

\u5728 1.2.0 \u4E4B\u540E\uFF0C\u6211\u4EEC\u63D0\u4F9B\u4E86\u4E00\u4E2A createFromIconfontCN \u65B9\u6CD5\uFF0C\u65B9\u4FBF\u5F00\u53D1\u8005\u8C03\u7528\u5728 iconfont.cn \u4E0A\u81EA\u884C\u7BA1\u7406\u7684\u56FE\u6807\u3002

import { createFromIconfontCN } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // \u5728 iconfont.cn \u4E0A\u751F\u6210
});

export default defineComponent({
  setup() {
    return () => <MyIcon type="icon-dianzan" />;
  },
});

\u5176\u672C\u8D28\u4E0A\u662F\u521B\u5EFA\u4E86\u4E00\u4E2A\u4F7F\u7528 <use> \u6807\u7B7E\u6765\u6E32\u67D3\u56FE\u6807\u7684\u7EC4\u4EF6\u3002

options \u7684\u914D\u7F6E\u9879\u5982\u4E0B\uFF1A

\u53C2\u6570 \u8BF4\u660E \u7C7B\u578B \u9ED8\u8BA4\u503C
extraCommonProps \u7ED9\u6240\u6709\u7684 svg \u56FE\u6807 <Icon /> \u7EC4\u4EF6\u8BBE\u7F6E\u989D\u5916\u7684\u5C5E\u6027 { class, attrs, props, on, style } {}
scriptUrl iconfont.cn \u9879\u76EE\u5728\u7EBF\u751F\u6210\u7684 js \u5730\u5740 string -

\u5728 scriptUrl \u90FD\u8BBE\u7F6E\u6709\u6548\u7684\u60C5\u51B5\u4E0B\uFF0C\u7EC4\u4EF6\u5728\u6E32\u67D3\u524D\u4F1A\u81EA\u52A8\u5F15\u5165 iconfont.cn \u9879\u76EE\u4E2D\u7684\u56FE\u6807\u7B26\u53F7\u96C6\uFF0C\u65E0\u9700\u624B\u52A8\u5F15\u5165\u3002

\u89C1 iconfont.cn \u4F7F\u7528\u5E2E\u52A9 \u67E5\u770B\u5982\u4F55\u751F\u6210 js \u5730\u5740\u3002

\u81EA\u5B9A\u4E49 SVG \u56FE\u6807

\u5982\u679C\u4F7F\u7528 vue cli 3\uFF0C\u53EF\u4EE5\u901A\u8FC7\u914D\u7F6E vue-svg-loader \u6765\u5C06 svg \u56FE\u6807\u4F5C\u4E3A Vue \u7EC4\u4EF6\u5BFC\u5165\u3002\u66F4\u591Avue-svg-loader \u7684\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u9605 \u6587\u6863\u3002

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule.use('vue-svg-loader').loader('vue-svg-loader');
  },
};
import { defineComponent } from 'vue';
import Icon from '@ant-design/icons-vue';
import MessageSvg from 'path/to/message.svg'; // '*.svg' \u6587\u4EF6\u7684\u8DEF\u5F84

export default defineComponent({
  setup() {
    return () => <Icon type={MessageSvg} />;
  },
});

Icon \u4E2D\u7684 component \u7EC4\u4EF6\u7684\u63A5\u53D7\u7684\u5C5E\u6027\u5982\u4E0B\uFF1A

\u5B57\u6BB5 \u8BF4\u660E \u7C7B\u578B \u53EA\u8BFB\u503C
class \u8BA1\u7B97\u540E\u7684 svg \u7C7B\u540D string -
fill svg \u5143\u7D20\u586B\u5145\u7684\u989C\u8272 string 'currentColor'
height svg \u5143\u7D20\u9AD8\u5EA6 string | number '1em'
style \u8BA1\u7B97\u540E\u7684 svg \u5143\u7D20\u6837\u5F0F CSSProperties -
width svg \u5143\u7D20\u5BBD\u5EA6 string | number '1em'
`,lastUpdated:1748060300767}},Bot={class:"markdown"};function Eot(n,t,e,r,a,u){return h(),S("article",Bot,t[0]||(t[0]=[Lg(`

\u8BED\u4E49\u5316\u7684\u77E2\u91CF\u56FE\u5F62\u3002\u4F7F\u7528\u56FE\u6807\u7EC4\u4EF6\uFF0C\u4F60\u9700\u8981\u5B89\u88C5 @ant-design/icons-vue \u56FE\u6807\u7EC4\u4EF6\u5305\uFF1A

npm install --save @ant-design/icons-vue

\u8BBE\u8BA1\u5E08\u4E13\u5C5E

\u5B89\u88C5 Kitchen Sketch \u63D2\u4EF6 \u{1F48E}\uFF0C\u5C31\u53EF\u4EE5\u4E00\u952E\u62D6\u62FD\u4F7F\u7528 Ant Design \u548C Iconfont \u7684\u6D77\u91CF\u56FE\u6807\uFF0C\u8FD8\u53EF\u4EE5\u5173\u8054\u81EA\u6709\u9879\u76EE\u3002

API

\u901A\u7528\u56FE\u6807

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C\u7248\u672C
rotate\u56FE\u6807\u65CB\u8F6C\u89D2\u5EA6\uFF08IE9 \u65E0\u6548\uFF09number-
spin\u662F\u5426\u6709\u65CB\u8F6C\u52A8\u753Bbooleanfalse
style\u8BBE\u7F6E\u56FE\u6807\u7684\u6837\u5F0F\uFF0C\u4F8B\u5982 fontSize \u548C colorCSSProperties-
twoToneColor\u4EC5\u9002\u7528\u53CC\u8272\u56FE\u6807\u3002\u8BBE\u7F6E\u53CC\u8272\u56FE\u6807\u7684\u4E3B\u8981\u989C\u8272string (\u5341\u516D\u8FDB\u5236\u989C\u8272)-

\u5176\u4E2D\u6211\u4EEC\u63D0\u4F9B\u4E86\u4E09\u79CD\u4E3B\u9898\u7684\u56FE\u6807\uFF0C\u4E0D\u540C\u4E3B\u9898\u7684 Icon \u7EC4\u4EF6\u540D\u4E3A\u56FE\u6807\u540D\u52A0\u4E3B\u9898\u505A\u4E3A\u540E\u7F00\u3002

import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue';

<star-outlined />
<star-filled />
<star-two-tone two-tone-color="#eb2f96" />

\u81EA\u5B9A\u4E49 Icon/Custom Icon

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C\u7248\u672C
component\u63A7\u5236\u5982\u4F55\u6E32\u67D3\u56FE\u6807\uFF0C\u901A\u5E38\u662F\u4E00\u4E2A\u6E32\u67D3\u6839\u6807\u7B7E\u4E3A <svg> \u7684 Vue \u7EC4\u4EF6ComponentType<CustomIconComponentProps>-
rotate\u56FE\u6807\u65CB\u8F6C\u89D2\u5EA6\uFF08IE9 \u65E0\u6548\uFF09number-
spin\u662F\u5426\u6709\u65CB\u8F6C\u52A8\u753Bbooleanfalse
style\u8BBE\u7F6E\u56FE\u6807\u7684\u6837\u5F0F\uFF0C\u4F8B\u5982 fontSize \u548C colorCSSProperties-

SVG \u56FE\u6807

\u5728 1.2.0 \u4E4B\u540E\uFF0C\u6211\u4EEC\u4F7F\u7528\u4E86 SVG \u56FE\u6807\u66FF\u6362\u4E86\u539F\u5148\u7684 font \u56FE\u6807\uFF0C\u4ECE\u800C\u5E26\u6765\u4E86\u4EE5\u4E0B\u4F18\u52BF\uFF1A

\u66F4\u591A\u8BA8\u8BBA\u53EF\u53C2\u8003\uFF1A#10353\u3002

\u6240\u6709\u7684\u56FE\u6807\u90FD\u4F1A\u4EE5 <svg> \u6807\u7B7E\u6E32\u67D3\uFF0C\u53EF\u4EE5\u4F7F\u7528 style \u548C class \u8BBE\u7F6E\u56FE\u6807\u7684\u5927\u5C0F\u548C\u5355\u8272\u56FE\u6807\u7684\u989C\u8272\u3002\u4F8B\u5982\uFF1A

<template>
  <message-outlined :style="{fontSize: '16px', color: '#08c'}" />
</template>
<script>
  import { MessageOutlined } from '@ant-design/icons-vue';
  import { defineComponent } from 'vue';
  export default defineComponent({
    components: {
      MessageOutlined,
    },
  });
</script>

\u53CC\u8272\u56FE\u6807\u4E3B\u8272

\u5BF9\u4E8E\u53CC\u8272\u56FE\u6807\uFF0C\u53EF\u4EE5\u901A\u8FC7\u4F7F\u7528 Icon.getTwoToneColor() \u548C Icon.setTwoToneColor(colorString) \u6765\u5168\u5C40\u8BBE\u7F6E\u56FE\u6807\u4E3B\u8272\u3002

import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons-vue';

setTwoToneColor('#eb2f96');
getTwoToneColor(); // #eb2f96

\u81EA\u5B9A\u4E49 font \u56FE\u6807

\u5728 1.2.0 \u4E4B\u540E\uFF0C\u6211\u4EEC\u63D0\u4F9B\u4E86\u4E00\u4E2A createFromIconfontCN \u65B9\u6CD5\uFF0C\u65B9\u4FBF\u5F00\u53D1\u8005\u8C03\u7528\u5728 iconfont.cn \u4E0A\u81EA\u884C\u7BA1\u7406\u7684\u56FE\u6807\u3002

import { createFromIconfontCN } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // \u5728 iconfont.cn \u4E0A\u751F\u6210
});

export default defineComponent({
  setup() {
    return () => <MyIcon type="icon-dianzan" />;
  },
});

\u5176\u672C\u8D28\u4E0A\u662F\u521B\u5EFA\u4E86\u4E00\u4E2A\u4F7F\u7528 <use> \u6807\u7B7E\u6765\u6E32\u67D3\u56FE\u6807\u7684\u7EC4\u4EF6\u3002

options \u7684\u914D\u7F6E\u9879\u5982\u4E0B\uFF1A

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
extraCommonProps\u7ED9\u6240\u6709\u7684 svg \u56FE\u6807 <Icon /> \u7EC4\u4EF6\u8BBE\u7F6E\u989D\u5916\u7684\u5C5E\u6027{ class, attrs, props, on, style }{}
scriptUrliconfont.cn \u9879\u76EE\u5728\u7EBF\u751F\u6210\u7684 js \u5730\u5740string-

\u5728 scriptUrl \u90FD\u8BBE\u7F6E\u6709\u6548\u7684\u60C5\u51B5\u4E0B\uFF0C\u7EC4\u4EF6\u5728\u6E32\u67D3\u524D\u4F1A\u81EA\u52A8\u5F15\u5165 iconfont.cn \u9879\u76EE\u4E2D\u7684\u56FE\u6807\u7B26\u53F7\u96C6\uFF0C\u65E0\u9700\u624B\u52A8\u5F15\u5165\u3002

\u89C1 iconfont.cn \u4F7F\u7528\u5E2E\u52A9 \u67E5\u770B\u5982\u4F55\u751F\u6210 js \u5730\u5740\u3002

\u81EA\u5B9A\u4E49 SVG \u56FE\u6807

\u5982\u679C\u4F7F\u7528 vue cli 3\uFF0C\u53EF\u4EE5\u901A\u8FC7\u914D\u7F6E vue-svg-loader \u6765\u5C06 svg \u56FE\u6807\u4F5C\u4E3A Vue \u7EC4\u4EF6\u5BFC\u5165\u3002\u66F4\u591Avue-svg-loader \u7684\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u9605 \u6587\u6863\u3002

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule.use('vue-svg-loader').loader('vue-svg-loader');
  },
};
import { defineComponent } from 'vue';
import Icon from '@ant-design/icons-vue';
import MessageSvg from 'path/to/message.svg'; // '*.svg' \u6587\u4EF6\u7684\u8DEF\u5F84

export default defineComponent({
  setup() {
    return () => <Icon type={MessageSvg} />;
  },
});

Icon \u4E2D\u7684 component \u7EC4\u4EF6\u7684\u63A5\u53D7\u7684\u5C5E\u6027\u5982\u4E0B\uFF1A

\u5B57\u6BB5\u8BF4\u660E\u7C7B\u578B\u53EA\u8BFB\u503C
class\u8BA1\u7B97\u540E\u7684 svg \u7C7B\u540Dstring-
fillsvg \u5143\u7D20\u586B\u5145\u7684\u989C\u8272string'currentColor'
heightsvg \u5143\u7D20\u9AD8\u5EA6string | number'1em'
style\u8BA1\u7B97\u540E\u7684 svg \u5143\u7D20\u6837\u5F0FCSSProperties-
widthsvg \u5143\u7D20\u5BBD\u5EA6string | number'1em'
`,34)]))}const qot=O(Not,[["render",Eot]]),Rot={pageData:{title:"Icon",description:"",frontmatter:{category:"Components",type:"General",title:"Icon",cover:"https://gw.alipayobjects.com/zos/alicdn/rrwbSt3FQ/Icon.svg"},headers:[{level:2,title:"API",slug:"API",content:"Common Icon"},{level:3,title:"Common Icon",slug:"Common-Icon",content:""},{level:3,title:"Custom Icon",slug:"Custom-Icon",content:""},{level:3,title:"About SVG icons",slug:"About-SVG-icons",content:"We introduced SVG icons in version `1.2.0`, replacing font icons. This has the following benefits:"},{level:3,title:"Set TwoTone Color",slug:"Set-TwoTone-Color",content:"When using the two-tone icons, you can use the static methods `getTwoToneColor()` and `setTwoToneColor(colorString)` to spicify the primary color."},{level:3,title:"Custom Font Icon",slug:"Custom-Font-Icon",content:"We added a `createFromIconfontCN` function to help developer using their own icons deployed at [iconfont.cn](http://iconfont.cn/) in a convenient way."},{level:3,title:"Custom SVG Icon",slug:"Custom-SVG-Icon",content:"You can import SVG icon as an vue component by using `vue cli 3` and [`vue-svg-loader`](https://www.npmjs.com/package/vue-svg-loader). `vue-svg-loader`'s `options` [reference](https://github.com/visualfanatic/vue-svg-loader)."}],relativePath:"components/icon/index.en-US.md",content:` Semantic vector graphics. Before use icons, you need to install \`@ant-design/icons-vue\` package: \`\`\`bash npm install --save @ant-design/icons-vue \`\`\` ## API ### Common Icon | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | rotate | Rotate by n degrees (not working in IE9) | number | - | | | spin | Rotate icon with animation | boolean | false | | | style | Style properties of icon, like \`fontSize\` and \`color\` | CSSProperties | - | | | twoToneColor | Only supports the two-tone icon. Specify the primary color. | string (hex color) | - | | We still have three different themes for icons, icon component name is the icon name suffixed by the theme name. \`\`\`jsx import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue'; <star-outlined /> <star-filled /> <star-two-tone two-tone-color="#eb2f96" /> \`\`\` ### Custom Icon | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | component | The component used for the root node. | ComponentType&lt;CustomIconComponentProps> | - | | | rotate | Rotate degrees (not working in IE9) | number | - | | | spin | Rotate icon with animation | boolean | false | | | style | Style properties of icon, like \`fontSize\` and \`color\` | CSSProperties | - | | ### About SVG icons We introduced SVG icons in version \`1.2.0\`, replacing font icons. This has the following benefits: - Complete offline usage of icons, without dependency on a CDN-hosted font icon file (No more empty square during downloading and no need to deploy icon font files locally either!) - Much more display accuracy on lower-resolution screens - The ability to choose icon color - No need to change built-in icons with overriding styles by providing more props in component More discussion of SVG icon reference at [#10353](https://github.com/ant-design/ant-design/issues/10353). > \u26A0\uFE0F Given the extra bundle size caused by all SVG icons imported in 1.2.0, we will provide a new API to allow developers to import icons as needed, you can track [#12011](https://github.com/ant-design/ant-design/issues/12011) for updates. > > While you wait, you can use [webpack plugin](https://github.com/Beven91/webpack-ant-icon-loader) from the community to chunk the icon file. The properties \`theme\`, \`component\` and \`twoToneColor\` were added in \`1.2.0\`. The best practice is to pass the property \`theme\` to every \`<Icon />\` component. \`\`\`html <template> <message-outlined :style="{fontSize: '16px', color: '#08c'}" /> </template> <script> import { MessageOutlined } from '@ant-design/icons-vue'; import { defineComponent } from 'vue'; export default defineComponent({ components: { MessageOutlined, }, }); </script> \`\`\` All the icons will render to \`<svg>\`. You can still set \`style\` and \`class\` for size and color of icons. ### Set TwoTone Color When using the two-tone icons, you can use the static methods \`getTwoToneColor()\` and \`setTwoToneColor(colorString)\` to spicify the primary color. \`\`\`jsx import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons'; setTwoToneColor('#eb2f96'); getTwoToneColor(); // #eb2f96 \`\`\` ### Custom Font Icon We added a \`createFromIconfontCN\` function to help developer using their own icons deployed at [iconfont.cn](http://iconfont.cn/) in a convenient way. > This method is specified for [iconfont.cn](http://iconfont.cn/). \`\`\`jsx import { createFromIconfontCN } from '@ant-design/icons-vue'; import { defineComponent } from 'vue'; const MyIcon = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn }); export default defineComponent({ setup() { return () => <MyIcon type="icon-dianzan" />; }, }); \`\`\` It create a component that uses SVG sprites in essence. The following options are available: | Property | Description | Type | Default | | --- | --- | --- | --- | | extraCommonProps | Define extra properties to the component | \`{ class, attrs, props, on, style }\` | {} | | scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. | string | - | The property \`scriptUrl\` should be set to import the SVG sprite symbols. See [iconfont.cn documents](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) to learn about how to generate \`scriptUrl\`. ### Custom SVG Icon You can import SVG icon as an vue component by using \`vue cli 3\` and [\`vue-svg-loader\`](https://www.npmjs.com/package/vue-svg-loader). \`vue-svg-loader\`'s \`options\` [reference](https://github.com/visualfanatic/vue-svg-loader). \`\`\`js // vue.config.js module.exports = { chainWebpack: config => { const svgRule = config.module.rule('svg'); svgRule.uses.clear(); svgRule.use('vue-svg-loader').loader('vue-svg-loader'); }, }; \`\`\` \`\`\`jsx import { defineComponent } from 'vue'; import Icon from '@ant-design/icons-vue'; import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file. export default defineComponent({ setup() { return () => <Icon type={MessageSvg} />; }, }); \`\`\` The following properties are available for the component: | Property | Description | Type | Default | | -------- | ------------------------------------------------ | ---------------- | -------------- | | class | The computed class name of the \`svg\` element | string | - | | fill | Define the color used to paint the \`svg\` element | string | 'currentColor' | | height | The height of the \`svg\` element | string \\| number | '1em' | | style | The computed style of the \`svg\` element | CSSProperties | - | | width | The width of the \`svg\` element | string \\| number | '1em' | `,html:`

Semantic vector graphics. Before use icons, you need to install @ant-design/icons-vue package:

npm install --save @ant-design/icons-vue

API

Common Icon

Property Description Type Default Version
rotate Rotate by n degrees (not working in IE9) number -
spin Rotate icon with animation boolean false
style Style properties of icon, like fontSize and color CSSProperties -
twoToneColor Only supports the two-tone icon. Specify the primary color. string (hex color) -

We still have three different themes for icons, icon component name is the icon name suffixed by the theme name.

import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue';

<star-outlined />
<star-filled />
<star-two-tone two-tone-color="#eb2f96" />

Custom Icon

Property Description Type Default Version
component The component used for the root node. ComponentType<CustomIconComponentProps> -
rotate Rotate degrees (not working in IE9) number -
spin Rotate icon with animation boolean false
style Style properties of icon, like fontSize and color CSSProperties -

About SVG icons

We introduced SVG icons in version 1.2.0, replacing font icons. This has the following benefits:

More discussion of SVG icon reference at #10353.

\u26A0\uFE0F Given the extra bundle size caused by all SVG icons imported in 1.2.0, we will provide a new API to allow developers to import icons as needed, you can track #12011 for updates.

While you wait, you can use webpack plugin from the community to chunk the icon file.

The properties theme, component and twoToneColor were added in 1.2.0. The best practice is to pass the property theme to every <Icon /> component.

<template>
  <message-outlined :style="{fontSize: '16px', color: '#08c'}" />
</template>
<script>
  import { MessageOutlined } from '@ant-design/icons-vue';
  import { defineComponent } from 'vue';
  export default defineComponent({
    components: {
      MessageOutlined,
    },
  });
</script>

All the icons will render to <svg>. You can still set style and class for size and color of icons.

Set TwoTone Color

When using the two-tone icons, you can use the static methods getTwoToneColor() and setTwoToneColor(colorString) to spicify the primary color.

import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons';

setTwoToneColor('#eb2f96');
getTwoToneColor(); // #eb2f96

Custom Font Icon

We added a createFromIconfontCN function to help developer using their own icons deployed at iconfont.cn in a convenient way.

This method is specified for iconfont.cn.

import { createFromIconfontCN } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn
});

export default defineComponent({
  setup() {
    return () => <MyIcon type="icon-dianzan" />;
  },
});

It create a component that uses SVG sprites in essence.

The following options are available:

Property Description Type Default
extraCommonProps Define extra properties to the component { class, attrs, props, on, style } {}
scriptUrl The URL generated by iconfont.cn project. string -

The property scriptUrl should be set to import the SVG sprite symbols.

See iconfont.cn documents to learn about how to generate scriptUrl.

Custom SVG Icon

You can import SVG icon as an vue component by using vue cli 3 and vue-svg-loader. vue-svg-loader's options reference.

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule.use('vue-svg-loader').loader('vue-svg-loader');
  },
};
import { defineComponent } from 'vue';
import Icon from '@ant-design/icons-vue';
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.

export default defineComponent({
  setup() {
    return () => <Icon type={MessageSvg} />;
  },
});

The following properties are available for the component:

Property Description Type Default
class The computed class name of the svg element string -
fill Define the color used to paint the svg element string 'currentColor'
height The height of the svg element string | number '1em'
style The computed style of the svg element CSSProperties -
width The width of the svg element string | number '1em'
`,lastUpdated:1748060300765}},Got={class:"markdown"};function Uot(n,t,e,r,a,u){return h(),S("article",Got,t[0]||(t[0]=[Lg(`

Semantic vector graphics. Before use icons, you need to install @ant-design/icons-vue package:

npm install --save @ant-design/icons-vue

API

Common Icon

PropertyDescriptionTypeDefaultVersion
rotateRotate by n degrees (not working in IE9)number-
spinRotate icon with animationbooleanfalse
styleStyle properties of icon, like fontSize and colorCSSProperties-
twoToneColorOnly supports the two-tone icon. Specify the primary color.string (hex color)-

We still have three different themes for icons, icon component name is the icon name suffixed by the theme name.

import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue';

<star-outlined />
<star-filled />
<star-two-tone two-tone-color="#eb2f96" />

Custom Icon

PropertyDescriptionTypeDefaultVersion
componentThe component used for the root node.ComponentType<CustomIconComponentProps>-
rotateRotate degrees (not working in IE9)number-
spinRotate icon with animationbooleanfalse
styleStyle properties of icon, like fontSize and colorCSSProperties-

About SVG icons

We introduced SVG icons in version 1.2.0, replacing font icons. This has the following benefits:

More discussion of SVG icon reference at #10353.

\u26A0\uFE0F Given the extra bundle size caused by all SVG icons imported in 1.2.0, we will provide a new API to allow developers to import icons as needed, you can track #12011 for updates.

While you wait, you can use webpack plugin from the community to chunk the icon file.

The properties theme, component and twoToneColor were added in 1.2.0. The best practice is to pass the property theme to every <Icon /> component.

<template>
  <message-outlined :style="{fontSize: '16px', color: '#08c'}" />
</template>
<script>
  import { MessageOutlined } from '@ant-design/icons-vue';
  import { defineComponent } from 'vue';
  export default defineComponent({
    components: {
      MessageOutlined,
    },
  });
</script>

All the icons will render to <svg>. You can still set style and class for size and color of icons.

Set TwoTone Color

When using the two-tone icons, you can use the static methods getTwoToneColor() and setTwoToneColor(colorString) to spicify the primary color.

import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons';

setTwoToneColor('#eb2f96');
getTwoToneColor(); // #eb2f96

Custom Font Icon

We added a createFromIconfontCN function to help developer using their own icons deployed at iconfont.cn in a convenient way.

This method is specified for iconfont.cn.

import { createFromIconfontCN } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn
});

export default defineComponent({
  setup() {
    return () => <MyIcon type="icon-dianzan" />;
  },
});

It create a component that uses SVG sprites in essence.

The following options are available:

PropertyDescriptionTypeDefault
extraCommonPropsDefine extra properties to the component{ class, attrs, props, on, style }{}
scriptUrlThe URL generated by iconfont.cn project.string-

The property scriptUrl should be set to import the SVG sprite symbols.

See iconfont.cn documents to learn about how to generate scriptUrl.

Custom SVG Icon

You can import SVG icon as an vue component by using vue cli 3 and vue-svg-loader. vue-svg-loader's options reference.

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule.use('vue-svg-loader').loader('vue-svg-loader');
  },
};
import { defineComponent } from 'vue';
import Icon from '@ant-design/icons-vue';
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.

export default defineComponent({
  setup() {
    return () => <Icon type={MessageSvg} />;
  },
});

The following properties are available for the component:

PropertyDescriptionTypeDefault
classThe computed class name of the svg elementstring-
fillDefine the color used to paint the svg elementstring'currentColor'
heightThe height of the svg elementstring | number'1em'
styleThe computed style of the svg elementCSSProperties-
widthThe width of the svg elementstring | number'1em'
`,35)]))}const Wot=O(Rot,[["render",Uot]]),Yot=w({CN:qot,US:Wot,components:{IconDisplay:Tot,Basic:Mot,Custom:Aot,Iconfont:Dot,Twotone:xot}});function Zot(n,t,e,r,a,u){const f=s("icon-display"),d=s("basic"),g=s("twotone"),v=s("custom"),m=s("iconfont"),b=s("demo-sort");return h(),S(pm,null,[l(f),l(b,null,{default:p(()=>[l(d),l(g),l(v),l(m)]),_:1})],64)}const A0t=O(Yot,[["render",Zot]]);export{A0t as default};