1 line
83 KiB
JavaScript
1 line
83 KiB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{1206:function(t,s,e){},1207:function(t,s,e){},1208:function(t,s,e){},1209:function(t,s,e){},1299:function(t,s,e){"use strict";var a=e(1206);e.n(a).a},1300:function(t,s,e){"use strict";var a=e(1207);e.n(a).a},1301:function(t,s,e){"use strict";var a=e(1208);e.n(a).a},1302:function(t,s,e){"use strict";var a=e(1209);e.n(a).a},1303:function(t,s,e){"use strict";Object.defineProperty(s,"__esModule",{value:!0}),s.default={fill:["account-book","alert","alipay-circle","alipay-square","aliwangwang","amazon-circle","android","amazon-square","api","appstore","audio","apple","backward","bank","behance-circle","bell","behance-square","book","box-plot","bug","bulb","calculator","build","calendar","camera","car","caret-down","caret-left","caret-right","carry-out","caret-up","check-circle","check-square","chrome","ci-circle","clock-circle","close-circle","cloud","close-square","code-sandbox-square","code-sandbox-circle","code","codepen-circle","compass","codepen-square","contacts","container","control","copy","copyright-circle","credit-card","crown","customer-service","dashboard","delete","diff","dingtalk-circle","database","dingtalk-square","dislike","dollar-circle","down-circle","down-square","dribbble-circle","dribbble-square","dropbox-circle","dropbox-square","environment","edit","exclamation-circle","euro-circle","experiment","eye-invisible","eye","facebook","fast-backward","fast-forward","file-add","file-excel","file-exclamation","file-image","file-markdown","file-pdf","file-ppt","file-text","file-unknown","file-word","file-zip","file","filter","fire","flag","folder-add","folder","folder-open","forward","frown","fund","funnel-plot","gift","github","gitlab","golden","google-circle","google-plus-circle","google-plus-square","google-square","hdd","heart","highlight","home","hourglass","html5","idcard","ie-circle","ie-square","info-circle","instagram","insurance","interaction","interation","layout","left-circle","left-square","like","linkedin","lock","mail","medicine-box","medium-circle","medium-square","meh","message","minus-circle","minus-square","mobile","money-collect","pause-circle","pay-circle","notification","phone","picture","pie-chart","play-circle","play-square","plus-circle","plus-square","pound-circle","printer","profile","project","pushpin","property-safety","qq-circle","qq-square","question-circle","read","reconciliation","red-envelope","reddit-circle","reddit-square","rest","right-circle","rocket","right-square","safety-certificate","save","schedule","security-scan","setting","shop","shopping","sketch-circle","sketch-square","skin","slack-circle","skype","slack-square","sliders","smile","snippets","sound","star","step-backward","step-forward","stop","switcher","tablet","tag","tags","taobao-circle","taobao-square","tool","thunderbolt","trademark-circle","twitter-circle","trophy","twitter-square","unlock","up-circle","up-square","usb","video-camera","wallet","warning","wechat","weibo-circle","windows","yahoo","weibo-square","yuque","youtube","zhihu-circle","zhihu-square"],outline:["account-book","alert","alipay-circle","aliwangwang","android","api","appstore","audio","apple","backward","bank","bell","behance-square","book","box-plot","bug","bulb","calculator","build","calendar","camera","car","caret-down","caret-left","caret-right","carry-out","caret-up","check-circle","check-square","chrome","clock-circle","close-circle","cloud","close-square","code","codepen-circle","compass","contacts","container","control","copy","credit-card","crown","customer-service","dashboard","delete","diff","database","dislike","down-circle","down-square","dribbble-square","environment","edit","exclamation-circle","experiment","eye-invisible","eye","facebook","fast-backward","fast-forward","file-add","file-excel","file-exclamation","file-image","file-markdown","file-pdf","file-ppt","file-text","file-unknown","file-word","file-zip","file","filter","fire","flag","folder-add","folder","folder-open","forward","frown","fund","funnel-plot","gift","github","gitlab","hdd","heart","highlight","home","hourglass","html5","idcard","info-circle","instagram","insurance","interaction","interation","layout","left-circle","left-square","like","linkedin","lock","mail","medicine-box","meh","message","minus-circle","minus-square","mobile","money-collect","pause-circle","pay-circle","notification","phone","picture","pie-chart","play-circle","play-square","plus-circle","plus-square","printer","profile","project","pushpin","property-safety","question-circle","read","reconciliation","red-envelope","rest","right-circle","rocket","right-square","safety-certificate","save","schedule","security-scan","setting","shop","shopping","skin","skype","slack-square","sliders","smile","snippets","sound","star","step-backward","step-forward","stop","switcher","tablet","tag","tags","taobao-circle","tool","thunderbolt","trophy","unlock","up-circle","up-square","usb","video-camera","wallet","warning","wechat","weibo-circle","windows","yahoo","weibo-square","yuque","youtube","alibaba","align-center","align-left","align-right","alipay","aliyun","amazon","ant-cloud","apartment","ant-design","area-chart","arrow-left","arrow-down","arrow-up","arrows-alt","arrow-right","audit","bar-chart","barcode","bars","behance","bg-colors","block","bold","border-bottom","border-left","border-outer","border-inner","border-right","border-horizontal","border-top","border-verticle","border","branches","check","ci","close","cloud-download","cloud-server","cloud-sync","cloud-upload","cluster","codepen","code-sandbox","colum-height","column-width","column-height","coffee","copyright","dash","deployment-unit","desktop","dingding","disconnect","dollar","double-left","dot-chart","double-right","down","drag","download","dribbble","dropbox","ellipsis","enter","euro","exception","exclamation","export","fall","file-done","file-jpg","file-protect","file-sync","file-search","font-colors","font-size","fork","form","fullscreen-exit","fullscreen","gateway","global","google-plus","gold","google","heat-map","history","ie","import","inbox","info","italic","key","issues-close","laptop","left","line-chart","link","line-height","line","loading-3-quarters","loading","login","logout","man","medium","medium-workmark","menu-unfold","menu-fold","menu","minus","monitor","more","ordered-list","number","pause","percentage","paper-clip","pic-center","pic-left","pic-right","plus","pound","poweroff","pull-request","qq","question","radar-chart","qrcode","radius-bottomleft","radius-bottomright","radius-upleft","radius-setting","radius-upright","reddit","redo","reload","retweet","right","rise","rollback","safety","robot","scan","search","scissor","select","shake","share-alt","shopping-cart","shrink","sketch","slack","small-dash","solution","sort-descending","sort-ascending","stock","swap-left","swap-right","strikethrough","swap","sync","table","team","taobao","to-top","trademark","transaction","twitter","underline","undo","unordered-list","up","upload","user-add","user-delete","usergroup-add","user","usergroup-delete","vertical-align-bottom","vertical-align-middle","vertical-align-top","vertical-left","vertical-right","weibo","wifi","zhihu","woman","zoom-out","zoom-in"],twotone:["account-book","alert","api","appstore","audio","bank","bell","book","box-plot","bug","bulb","calculator","build","calendar","camera","car","carry-out","check-circle","check-square","clock-circle","close-circle","cloud","close-square","code","compass","contacts","container","control","copy","credit-card","crown","customer-service","dashboard","delete","diff","database","dislike","down-circle","down-square","environment","edit","exclamation-circle","experiment","eye-invisible","eye","file-add","file-excel","file-exclamation","file-image","file-markdown","file-pdf","file-ppt","file-text","file-unknown","file-word","file-zip","file","filter","fire","flag","folder-add","folder","folder-open","frown","fund","funnel-plot","gift","hdd","heart","highlight","home","hourglass","html5","idcard","info-circle","insurance","interaction","interation","layout","left-circle","left-square","like","lock","mail","medicine-box","meh","message","minus-circle","minus-square","mobile","money-collect","pause-circle","notification","phone","picture","pie-chart","play-circle","play-square","plus-circle","plus-square","pound-circle","printer","profile","project","pushpin","property-safety","question-circle","reconciliation","red-envelope","rest","right-circle","rocket","right-square","safety-certificate","save","schedule","security-scan","setting","shop","shopping","skin","sliders","smile","snippets","sound","star","stop","switcher","tablet","tag","tags","tool","thunderbolt","trademark-circle","trophy","unlock","up-circle","up-square","usb","video-camera","wallet","warning","ci","copyright","dollar","euro","gold","canlendar"]}},1451:function(t,s,e){"use strict";e.r(s);var a=e(1303),n=e.n(a),o=e(1191),l=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("li",{directives:[{name:"clipboard",rawName:"v-clipboard:copy",value:t.text,expression:"text",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:t.onCopied,expression:"onCopied",arg:"success"}],class:t.justCopied===t.type?"copied":""},[e("a-icon",{attrs:{type:t.type,theme:t.theme}}),t._v(" "),e("span",{staticClass:"anticon-class"},[e("a-badge",{attrs:{dot:t.isNew}},[t._v("\n "+t._s(t.type)+"\n ")])],1)],1)};l._withStripped=!0;var r={props:["type","isNew","theme","justCopied"],data:function(){var t=this.type,s=this.theme;return{text:"outlined"===s?'<a-icon type="'+t+'" />':'<a-icon type="'+t+'" theme="'+s+'" />'}},methods:{onCopied:function(){this.$emit("copied",this.type,this.text)}}},i=e(31),c=Object(i.a)(r,l,[],!1,null,null,null);c.options.__file="site/theme/template/IconDisplay/CopyableIcon.vue";var v=c.exports,p={props:["icons","title","newIcons","theme"],data:function(){return{justCopied:null}},methods:{onCopied:function(t,s){var e=this,a=this.$createElement;o.a.success(a("span",[a("code",{class:"copied-code"},[s])," copied 🎉"])),this.justCopied=t,setTimeout((function(){e.justCopied=null}),2e3)}},render:function(){var t=this,s=arguments[0],e=this.$props,a=e.icons,n=e.title,o=e.theme,l=e.newIcons,r=a.map((function(e){return s(v,{key:e,attrs:{type:e,theme:o,isNew:l.indexOf(e)>=0,justCopied:t.justCopied},on:{copied:t.onCopied}})})),i=this.$t("message");return s("div",[s("h3",[i["app.docs.components.icon.category."+n]]),s("ul",{class:"anticons-list"},[r])])}},_={render:function(){var t=arguments[0],s="M864 64H160C107 64 64 107 64 160v704c0 53 43 96 96 96h704c53 0 96-43 96-96V160c0-53-43-96-96-96z";return t("svg",{attrs:{viewBox:"0 0 1024 1024"}},[t("path",{attrs:{d:s}})])}},d={render:function(){var t=arguments[0],s="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";return t("svg",{attrs:{viewBox:"0 0 1024 1024"}},[t("path",{attrs:{d:s}})])}},h={render:function(){var t=arguments[0],s="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";return t("svg",{attrs:{viewBox:"0 0 1024 1024"}},[t("path",{attrs:{d:s}})])}},u={cagetories:{direction:["step-backward","step-forward","fast-backward","fast-forward","shrink","arrows-alt","down","up","left","right","caret-up","caret-down","caret-left","caret-right","up-circle","down-circle","left-circle","right-circle","double-right","double-left","vertical-left","vertical-right","forward","backward","rollback","enter","retweet","swap","swap-left","swap-right","arrow-up","arrow-down","arrow-left","arrow-right","play-circle","up-square","down-square","left-square","right-square","login","logout","menu-fold","menu-unfold","border-bottom","border-horizontal","border-inner","border-outter","border-left","border-right","border-top","border-verticle","pic-center","pic-left","pic-right","radius-bottomleft","radius-bottomright","radius-upleft","fullscreen","fullscreen-exit"],suggestion:["question","question-circle","plus","plus-circle","pause","pause-circle","minus","minus-circle","plus-square","minus-square","info","info-circle","exclamation","exclamation-circle","close","close-circle","close-square","check","check-circle","check-square","clock-circle","warning","issues-close","stop"],edit:["edit","form","copy","scissor","delete","snippets","diff","highlight","align-center","align-left","align-right","bg-colors","bold","italic","underline","strikethrough","redo","undo","zoom-in","zoom-out","font-colors","font-size","line-height","colum-height","colum-width","dash","small-dash","sort-ascending","sort-descending","drag","ordered-list","radius-setting"],data:["area-chart","pie-chart","bar-chart","dot-chart","line-chart","radar-chart","heat-map","fall","rise","stock","box-plot","fund","sliders"],other:["lock","unlock","bars","book","calendar","cloud","cloud-download","code","copy","credit-card","delete","desktop","download","ellipsis","file","file-text","file-unknown","file-pdf","file-word","file-excel","file-jpg","file-ppt","file-markdown","file-add","folder","folder-open","folder-add","hdd","frown","meh","smile","inbox","laptop","appstore","link","mail","mobile","notification","paper-clip","picture","poweroff","reload","search","setting","share-alt","shopping-cart","tablet","tag","tags","to-top","upload","user","video-camera","home","loading","loading-3-quarters","cloud-upload","star","heart","environment","eye","eye-invisible","camera","save","team","solution","phone","filter","exception","export","customer-service","qrcode","scan","like","dislike","message","pay-circle","calculator","pushpin","bulb","select","switcher","rocket","bell","disconnect","database","compass","barcode","hourglass","key","flag","layout","printer","sound","usb","skin","tool","sync","wifi","car","schedule","user-add","user-delete","usergroup-add","usergroup-delete","man","woman","shop","gift","idcard","medicine-box","red-envelope","coffee","copyright","trademark","safety","wallet","bank","trophy","contacts","global","shake","api","fork","dashboard","table","profile","alert","audit","batch-folding","branches","build","border","crown","experiment","fire","money-collect","property-safety","read","reconciliation","rest","security-scan","insurance","interation","safety-certificate","project","thunderbolt","block","cluster","deployment-unit","dollar","euro","pound","file-done","file-exclamation","file-protect","file-search","file-sync","gateway","gold","robot","shopping"],logo:["android","apple","windows","ie","chrome","github","aliwangwang","dingding","weibo-square","weibo-circle","taobao-circle","html5","weibo","twitter","wechat","youtube","alipay-circle","taobao","skype","qq","medium-workmark","gitlab","medium","linkedin","google-plus","dropbox","facebook","codepen","code-sandbox","code-sandbox-circle","amazon","google","codepen-circle","alipay","ant-design","aliyun","zhihu","slack","slack-square","behance","behance-square","dribbble","dribbble-square","instagram","yuque","alibaba","yahoo"]},newIconNames:["border-bottom","border-horizontal","border-inner","border-outter","border-left","border-right","border-top","border-verticle","pic-center","pic-left","pic-right","radius-bottomleft","radius-bottomright","radius-upleft","radius-upleft","fullscreen","fullscreen-exit","issues-close","stop","scissor","snippets","diff","highlight","align-center","align-left","align-right","bg-colors","bold","italic","underline","redo","undo","zoom-in","zoom-out","font-colors","font-size","line-height","colum-height","colum-width","dash","small-dash","sort-ascending","sort-descending","drag","ordered-list","radius-setting","radar-chart","heat-map","fall","rise","stock","box-plot","fund","sliders","alert","audit","batch-folding","branches","build","border","crown","experiment","fire","money-collect","property-safety","read","reconciliation","rest","security-scan","insurance","interation","safety-certificate","project","thunderbolt","block","cluster","deployment-unit","dollar","euro","pound","file-done","file-exclamation","file-protect","file-search","file-sync","gateway","gold","robot","strikethrough","shopping","alibaba","yahoo"],themeTypeMapper:{filled:"fill",outlined:"outline",twoTone:"twotone"},data:function(){return{theme:"outlined"}},methods:{getComputedDisplayList:function(){var t=this;return Object.keys(u.cagetories).map((function(s){return{category:s,icons:u.cagetories[s].filter((function(s){return-1!==n.a[u.themeTypeMapper[t.theme]].indexOf(s)}))}})).filter((function(t){var s=t.icons;return Boolean(s.length)}))},handleChangeTheme:function(t){this.theme=t.target.value},renderCategories:function(t){var s=this,e=this.$createElement;return t.map((function(t){var a=t.category,n=t.icons;return e(p,{key:a,attrs:{title:a,icons:n,theme:s.theme,newIcons:u.newIconNames}})}))}},render:function(){var t=arguments[0],s=this.getComputedDisplayList(),e=this.$t("message");return t("div",[t("h3",[e["app.docs.components.icon.pick-theme"]]),t("a-radio-group",{attrs:{value:this.theme},on:{change:this.handleChangeTheme}},[t("a-radio-button",{attrs:{value:"outlined"}},[t("a-icon",{attrs:{component:d}})," ",e["app.docs.components.icon.outlined"]]),t("a-radio-button",{attrs:{value:"filled"}},[t("a-icon",{attrs:{component:_}})," ",e["app.docs.components.icon.filled"]]),t("a-radio-button",{attrs:{value:"twoTone"}},[t("a-icon",{attrs:{component:h}})," ",e["app.docs.components.icon.two-tone"]])]),this.renderCategories(s)])}},m=u,g=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n <div class="icons-list">\n <a-icon type="home"/>\n <a-icon type="setting" theme="filled"/>\n <a-icon type="smile" theme="outlined"/>\n <a-icon type="sync" spin=""/>\n <a-icon type="smile" :rotate="180"/>\n <a-icon type="loading"/>\n </div>\n',script:null,style:null,us:"\n#### Basic\nUse tag `<Icon/>` to create an icon and set its type in the `type` prop. Specific the `spin` property to show spinning animation and the `theme` property to switch different themes.\n",cn:"\n#### 基本用法\n使用 `<Icon/>` 标签声明组件，指定图标对应的 `type` 属性。可以通过 `theme` 属性来设置不同的主题风格的图标，也可以通过设置 `spin` 属性来实现动画旋转效果。\n",sourceCode:'<template>\n <div class="icons-list">\n <a-icon type="home" />\n <a-icon type="setting" theme="filled" />\n <a-icon type="smile" theme="outlined" />\n <a-icon type="sync" spin />\n <a-icon type="smile" :rotate="180" />\n <a-icon type="loading" />\n </div>\n</template>\n<style scoped>\n .icons-list >>> .anticon {\n margin-right: 6px;\n font-size: 24px;\n }\n</style>\n'}}},[e("template",{slot:"component"},[e("div",{staticClass:"icons-list"},[e("a-icon",{attrs:{type:"home"}}),t._v(" "),e("a-icon",{attrs:{type:"setting",theme:"filled"}}),t._v(" "),e("a-icon",{attrs:{type:"smile",theme:"outlined"}}),t._v(" "),e("a-icon",{attrs:{type:"sync",spin:""}}),t._v(" "),e("a-icon",{attrs:{type:"smile",rotate:180}}),t._v(" "),e("a-icon",{attrs:{type:"loading"}})],1)]),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"基本用法"}},[t._v("基本用法 "),e("a",{staticClass:"anchor",attrs:{href:"#基本用法"}},[t._v("#")])]),t._v(" "),e("p",[t._v("使用 "),e("code",[t._v("<Icon/>")]),t._v(" 标签声明组件，指定图标对应的 "),e("code",[t._v("type")]),t._v(" 属性。可以通过 "),e("code",[t._v("theme")]),t._v(" 属性来设置不同的主题风格的图标，也可以通过设置 "),e("code",[t._v("spin")]),t._v(" 属性来实现动画旋转效果。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Basic"}},[t._v("Basic "),e("a",{staticClass:"anchor",attrs:{href:"#Basic"}},[t._v("#")])]),t._v(" "),e("p",[t._v("Use tag "),e("code",[t._v("<Icon/>")]),t._v(" to create an icon and set its type in the "),e("code",[t._v("type")]),t._v(" prop. Specific the "),e("code",[t._v("spin")]),t._v(" property to show spinning animation and the "),e("code",[t._v("theme")]),t._v(" property to switch different themes.")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"icons-list"')]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"home"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"setting"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("theme")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"filled"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"smile"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("theme")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"outlined"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"sync"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("spin")]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"smile"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":rotate")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"180"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"loading"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("scoped")]),t._v(">")]),e("span",{staticClass:"css"},[t._v("\n "),e("span",{staticClass:"hljs-selector-class"},[t._v(".icons-list")]),t._v(" >>> "),e("span",{staticClass:"hljs-selector-class"},[t._v(".anticon")]),t._v(" {\n "),e("span",{staticClass:"hljs-attribute"},[t._v("margin-right")]),t._v(": "),e("span",{staticClass:"hljs-number"},[t._v("6px")]),t._v(";\n "),e("span",{staticClass:"hljs-attribute"},[t._v("font-size")]),t._v(": "),e("span",{staticClass:"hljs-number"},[t._v("24px")]),t._v(";\n }\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};g._withStripped=!0;e(1299);var f=Object(i.a)({},g,[],!1,null,"a48b5360",null);f.options.__file="components/icon/demo/basic.md";var j=f.exports,C=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n <div class="custom-icons-list">\n <heart-icon :style="{ color: \'hotpink\' }"/>\n <panda-icon :style="{ fontSize: \'32px\' }"/>\n </div>\n',script:'\n const HeartSvg = {\n template: `\n <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">\n <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"/>\n </svg>\n `,\n };\n const PandaSvg = {\n template: `\n <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">\n <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"/>\n <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"/>\n <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"/>\n <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"/>\n <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"/>\n <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"/>\n <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"/>\n <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"/>\n </svg>\n `,\n };\n\n const HeartIcon = {\n template: `\n <a-icon :component="HeartSvg"/>\n `,\n data() {\n return {\n HeartSvg,\n };\n },\n };\n\n const PandaIcon = {\n template: `\n <a-icon :component="PandaSvg"/>\n `,\n data() {\n return {\n PandaSvg,\n };\n },\n };\n\n export default {\n components: {\n HeartIcon,\n PandaIcon,\n },\n };\n',style:null,us:'\n#### Custom Icon\nCreate a reusable Vue component by using `<a-icon :component="{...}"/>`. The property `component` takes a Vue component that renders to `svg` element.\n',cn:"\n#### 自定义图标\n利用 `Icon` 组件封装一个可复用的自定义图标。可以通过 `component` 属性传入一个组件来渲染最终的图标，以满足特定的需求。\n",sourceCode:'<template>\n <div class="custom-icons-list">\n <heart-icon :style="{ color: \'hotpink\' }" />\n <panda-icon :style="{ fontSize: \'32px\' }" />\n </div>\n</template>\n<script>\n const HeartSvg = {\n template: `\n <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">\n <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" />\n </svg>\n `,\n };\n const PandaSvg = {\n template: `\n <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">\n <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" />\n <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" />\n <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" />\n <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" />\n <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" />\n <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" />\n <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" />\n <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" />\n </svg>\n `,\n };\n\n const HeartIcon = {\n template: `\n <a-icon :component="HeartSvg" />\n `,\n data() {\n return {\n HeartSvg,\n };\n },\n };\n\n const PandaIcon = {\n template: `\n <a-icon :component="PandaSvg" />\n `,\n data() {\n return {\n PandaSvg,\n };\n },\n };\n\n export default {\n components: {\n HeartIcon,\n PandaIcon,\n },\n };\n<\/script>\n<style scoped>\n .custom-icons-list >>> .anticon {\n margin-right: 6px;\n }\n</style>\n'}}},[e("template",{slot:"component"},[e("div",{staticClass:"custom-icons-list"},[e("heart-icon",{style:{color:"hotpink"}}),t._v(" "),e("panda-icon",{style:{fontSize:"32px"}})],1)]),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"自定义图标"}},[t._v("自定义图标 "),e("a",{staticClass:"anchor",attrs:{href:"#自定义图标"}},[t._v("#")])]),t._v(" "),e("p",[t._v("利用 "),e("code",[t._v("Icon")]),t._v(" 组件封装一个可复用的自定义图标。可以通过 "),e("code",[t._v("component")]),t._v(" 属性传入一个组件来渲染最终的图标，以满足特定的需求。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Custom-Icon"}},[t._v("Custom Icon "),e("a",{staticClass:"anchor",attrs:{href:"#Custom-Icon"}},[t._v("#")])]),t._v(" "),e("p",[t._v("Create a reusable Vue component by using "),e("code",[t._v('<a-icon :component="{...}"/>')]),t._v(". The property "),e("code",[t._v("component")]),t._v(" takes a Vue component that renders to "),e("code",[t._v("svg")]),t._v(" element.")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"custom-icons-list"')]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("heart-icon")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":style")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v("\"{ color: 'hotpink' }\"")]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("panda-icon")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":style")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v("\"{ fontSize: '32px' }\"")]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"handlebars"},[e("span",{staticClass:"xml"},[t._v("\n const HeartSvg = {\n template: `\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("svg")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"1em"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("height")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"1em"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("fill")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"currentColor"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("viewBox")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"0 0 1024 1024"')]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("path")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("d")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"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"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("svg")]),t._v(">")]),t._v("\n `,\n };\n const PandaSvg = {\n template: `\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("svg")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("viewBox")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"0 0 1024 1024"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"1em"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("height")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"1em"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("fill")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"currentColor"')]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("path")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("d")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"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"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("fill")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"#6B676E"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("p-id")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"1143"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("path")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("d")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"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"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("fill")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"#FFEBD2"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("p-id")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"1144"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("path")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("d")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"M330.324 842.126c0 82.096 81.34 148.646 181.678 148.646s181.678-66.55 181.678-148.646H330.324z"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("fill")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"#E9D7C3"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("p-id")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"1145"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("path")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("d")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"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"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("fill")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"#FFFFFF"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("p-id")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"1146"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("path")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("d")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"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"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("fill")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"#6B676E"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("p-id")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"1147"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("path")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("d")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"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"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("fill")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"#464655"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("p-id")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"1148"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("path")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("d")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"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"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("fill")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"#464655"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("p-id")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"1149"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("path")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("d")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"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"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("fill")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"#464655"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("p-id")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"1150"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("svg")]),t._v(">")]),t._v("\n `,\n };\n\n const HeartIcon = {\n template: `\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":component")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"HeartSvg"')]),t._v(" />")]),t._v("\n `,\n data() {\n return {\n HeartSvg,\n };\n },\n };\n\n const PandaIcon = {\n template: `\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v(":component")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"PandaSvg"')]),t._v(" />")]),t._v("\n `,\n data() {\n return {\n PandaSvg,\n };\n },\n };\n\n export default {\n components: {\n HeartIcon,\n PandaIcon,\n },\n };\n")])]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("scoped")]),t._v(">")]),e("span",{staticClass:"css"},[t._v("\n "),e("span",{staticClass:"hljs-selector-class"},[t._v(".custom-icons-list")]),t._v(" >>> "),e("span",{staticClass:"hljs-selector-class"},[t._v(".anticon")]),t._v(" {\n "),e("span",{staticClass:"hljs-attribute"},[t._v("margin-right")]),t._v(": "),e("span",{staticClass:"hljs-number"},[t._v("6px")]),t._v(";\n }\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};C._withStripped=!0;var y={template:'\n <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">\n <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"/>\n </svg>\n'},b={template:'\n <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">\n <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"/>\n <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"/>\n <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"/>\n <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"/>\n <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"/>\n <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"/>\n <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"/>\n <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"/>\n </svg>\n'},w={components:{HeartIcon:{template:'\n <a-icon :component="HeartSvg"/>\n',data:function(){return{HeartSvg:y}}},PandaIcon:{template:'\n <a-icon :component="PandaSvg"/>\n',data:function(){return{PandaSvg:b}}}}},k=(e(1300),Object(i.a)(w,C,[],!1,null,"6212f54a",null));k.options.__file="components/icon/demo/custom.md";var x=k.exports,I=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n <div class="icons-list">\n <icon-font type="icon-tuichu"/>\n <icon-font type="icon-facebook"/>\n <icon-font type="icon-twitter"/>\n </div>\n',script:"\n import { Icon } from 'ant-design-vue';\n\n const IconFont = Icon.createFromIconfontCN({\n scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',\n });\n export default {\n components: {\n IconFont,\n },\n };\n",style:null,us:"\n#### Use iconfont.cn\nIf you are using [iconfont.cn](http://iconfont.cn/), you can use the icons in your project gracefully.\n",cn:"\n#### 使用 iconfont.cn\n对于使用 [iconfont.cn](http://iconfont.cn/) 的用户，通过设置 `createFromIconfontCN` 方法参数对象中的 `scriptUrl` 字段， 即可轻松地使用已有项目中的图标。\n",sourceCode:'<template>\n <div class="icons-list">\n <icon-font type="icon-tuichu" />\n <icon-font type="icon-facebook" />\n <icon-font type="icon-twitter" />\n </div>\n</template>\n<script>\n import { Icon } from \'ant-design-vue\';\n\n const IconFont = Icon.createFromIconfontCN({\n scriptUrl: \'//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js\',\n });\n export default {\n components: {\n IconFont,\n },\n };\n<\/script>\n<style scoped>\n .icons-list >>> .anticon {\n margin-right: 6px;\n font-size: 24px;\n }\n</style>\n'}}},[e("template",{slot:"component"},[e("div",{staticClass:"icons-list"},[e("icon-font",{attrs:{type:"icon-tuichu"}}),t._v(" "),e("icon-font",{attrs:{type:"icon-facebook"}}),t._v(" "),e("icon-font",{attrs:{type:"icon-twitter"}})],1)]),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"使用-iconfont.cn"}},[t._v("使用 iconfont.cn "),e("a",{staticClass:"anchor",attrs:{href:"#使用-iconfont.cn"}},[t._v("#")])]),t._v(" "),e("p",[t._v("对于使用 "),e("a",{attrs:{href:"http://iconfont.cn/"}},[t._v("iconfont.cn")]),t._v(" 的用户，通过设置 "),e("code",[t._v("createFromIconfontCN")]),t._v(" 方法参数对象中的 "),e("code",[t._v("scriptUrl")]),t._v(" 字段， 即可轻松地使用已有项目中的图标。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Use-iconfont.cn"}},[t._v("Use iconfont.cn "),e("a",{staticClass:"anchor",attrs:{href:"#Use-iconfont.cn"}},[t._v("#")])]),t._v(" "),e("p",[t._v("If you are using "),e("a",{attrs:{href:"http://iconfont.cn/"}},[t._v("iconfont.cn")]),t._v(", you can use the icons in your project gracefully.")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"icons-list"')]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("icon-font")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"icon-tuichu"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("icon-font")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"icon-facebook"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("icon-font")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"icon-twitter"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),e("span",{staticClass:"javascript"},[t._v("\n "),e("span",{staticClass:"hljs-keyword"},[t._v("import")]),t._v(" { Icon } "),e("span",{staticClass:"hljs-keyword"},[t._v("from")]),t._v(" "),e("span",{staticClass:"hljs-string"},[t._v("'ant-design-vue'")]),t._v(";\n\n "),e("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" IconFont = Icon.createFromIconfontCN({\n "),e("span",{staticClass:"hljs-attr"},[t._v("scriptUrl")]),t._v(": "),e("span",{staticClass:"hljs-string"},[t._v("'//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'")]),t._v(",\n });\n "),e("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),e("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n "),e("span",{staticClass:"hljs-attr"},[t._v("components")]),t._v(": {\n IconFont,\n },\n };\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("scoped")]),t._v(">")]),e("span",{staticClass:"css"},[t._v("\n "),e("span",{staticClass:"hljs-selector-class"},[t._v(".icons-list")]),t._v(" >>> "),e("span",{staticClass:"hljs-selector-class"},[t._v(".anticon")]),t._v(" {\n "),e("span",{staticClass:"hljs-attribute"},[t._v("margin-right")]),t._v(": "),e("span",{staticClass:"hljs-number"},[t._v("6px")]),t._v(";\n "),e("span",{staticClass:"hljs-attribute"},[t._v("font-size")]),t._v(": "),e("span",{staticClass:"hljs-number"},[t._v("24px")]),t._v(";\n }\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};I._withStripped=!0;var S={components:{IconFont:e(11).a.createFromIconfontCN({scriptUrl:"//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js"})}},q=(e(1301),Object(i.a)(S,I,[],!1,null,"b3c40938",null));q.options.__file="components/icon/demo/iconfont.md";var z=q.exports,T=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[[e("demo-box",{attrs:{jsfiddle:{html:'\n <div class="icons-list">\n <a-icon type="smile" theme="twoTone"/>\n <a-icon type="heart" theme="twoTone" twoToneColor="#eb2f96"/>\n <a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>\n </div>\n',script:null,style:null,us:"\n#### Two-tone icon and colorful icon\nSpecific them property `theme` to `twoTone` to render two-tone icons. You can also set the primary color.\n",cn:"\n#### 多色图标\n可以通过设置 `theme` 属性为 `twoTone` 来渲染双色图标，并且可以设置主题色。\n",sourceCode:'<template>\n <div class="icons-list">\n <a-icon type="smile" theme="twoTone" />\n <a-icon type="heart" theme="twoTone" twoToneColor="#eb2f96" />\n <a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />\n </div>\n</template>\n<style scoped>\n .icons-list >>> .anticon {\n margin-right: 6px;\n font-size: 24px;\n }\n</style>\n'}}},[e("template",{slot:"component"},[e("div",{staticClass:"icons-list"},[e("a-icon",{attrs:{type:"smile",theme:"twoTone"}}),t._v(" "),e("a-icon",{attrs:{type:"heart",theme:"twoTone",twoToneColor:"#eb2f96"}}),t._v(" "),e("a-icon",{attrs:{type:"check-circle",theme:"twoTone",twoToneColor:"#52c41a"}})],1)]),t._v(" "),e("template",{slot:"description"},[e("h4",{attrs:{id:"多色图标"}},[t._v("多色图标 "),e("a",{staticClass:"anchor",attrs:{href:"#多色图标"}},[t._v("#")])]),t._v(" "),e("p",[t._v("可以通过设置 "),e("code",[t._v("theme")]),t._v(" 属性为 "),e("code",[t._v("twoTone")]),t._v(" 来渲染双色图标，并且可以设置主题色。")])]),t._v(" "),e("template",{slot:"us-description"},[e("h4",{attrs:{id:"Two-tone-icon-and-colorful-icon"}},[t._v("Two-tone icon and colorful icon "),e("a",{staticClass:"anchor",attrs:{href:"#Two-tone-icon-and-colorful-icon"}},[t._v("#")])]),t._v(" "),e("p",[t._v("Specific them property "),e("code",[t._v("theme")]),t._v(" to "),e("code",[t._v("twoTone")]),t._v(" to render two-tone icons. You can also set the primary color.")])]),t._v(" "),e("template",{slot:"code"},[e("pre",[e("code",{staticClass:"language-html"},[e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"icons-list"')]),t._v(">")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"smile"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("theme")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"twoTone"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"heart"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("theme")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"twoTone"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("twoToneColor")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"#eb2f96"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"check-circle"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("theme")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"twoTone"')]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("twoToneColor")]),t._v("="),e("span",{staticClass:"hljs-string"},[t._v('"#52c41a"')]),t._v(" />")]),t._v("\n "),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),e("span",{staticClass:"hljs-tag"},[t._v("<"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(" "),e("span",{staticClass:"hljs-attr"},[t._v("scoped")]),t._v(">")]),e("span",{staticClass:"css"},[t._v("\n "),e("span",{staticClass:"hljs-selector-class"},[t._v(".icons-list")]),t._v(" >>> "),e("span",{staticClass:"hljs-selector-class"},[t._v(".anticon")]),t._v(" {\n "),e("span",{staticClass:"hljs-attribute"},[t._v("margin-right")]),t._v(": "),e("span",{staticClass:"hljs-number"},[t._v("6px")]),t._v(";\n "),e("span",{staticClass:"hljs-attribute"},[t._v("font-size")]),t._v(": "),e("span",{staticClass:"hljs-number"},[t._v("24px")]),t._v(";\n }\n")]),e("span",{staticClass:"hljs-tag"},[t._v("</"),e("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};T._withStripped=!0;e(1302);var M=Object(i.a)({},T,[],!1,null,"b3daf10e",null);M.options.__file="components/icon/demo/two-tone.md";var F=M.exports,P=function(){var t=this.$createElement;this._self._c;return this._m(0)};P._withStripped=!0;var V=Object(i.a)({},P,[function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[e("h2",{attrs:{id:"API"}},[t._v("API "),e("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),t._v(" "),e("th",[t._v("说明")]),t._v(" "),e("th",[t._v("类型")]),t._v(" "),e("th",[t._v("默认值")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("type")]),t._v(" "),e("td",[t._v("图标类型。遵循图标的命名规范")]),t._v(" "),e("td",[t._v("string")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("style")]),t._v(" "),e("td",[t._v("设置图标的样式，例如 "),e("code",{pre:!0},[t._v("fontSize")]),t._v(" 和 "),e("code",{pre:!0},[t._v("color")])]),t._v(" "),e("td",[t._v("CSSProperties")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("theme")]),t._v(" "),e("td",[t._v("图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标")]),t._v(" "),e("td",[t._v("'filled' | 'outlined' | 'twoTone'")]),t._v(" "),e("td",[t._v("'outlined'")])]),t._v(" "),e("tr",[e("td",[t._v("spin")]),t._v(" "),e("td",[t._v("是否有旋转动画")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("rotate")]),t._v(" "),e("td",[t._v("图标旋转角度（1.4.0 后新增，IE9 无效）")]),t._v(" "),e("td",[t._v("number")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("component")]),t._v(" "),e("td",[t._v("控制如何渲染图标，通常是一个渲染根标签为 "),e("code",{pre:!0},[t._v("<svg>")]),t._v(" 的 "),e("code",{pre:!0},[t._v("Vue")]),t._v(" 组件，"),e("strong",[t._v("会使 "),e("code",{pre:!0},[t._v("type")]),t._v(" 属性失效")])]),t._v(" "),e("td",[t._v("ComponentType<CustomIconComponentProps>")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("twoToneColor")]),t._v(" "),e("td",[t._v("仅适用双色图标。设置双色图标的主要颜色")]),t._v(" "),e("td",[t._v("string (十六进制颜色)")]),t._v(" "),e("td",[t._v("-")])])])]),t._v(" "),e("h3",{attrs:{id:"SVG-图标"}},[t._v("SVG 图标 "),e("a",{staticClass:"anchor",attrs:{href:"#SVG-图标"}},[t._v("#")])]),t._v(" "),e("p",[t._v("在 "),e("code",{pre:!0},[t._v("1.2.0")]),t._v(" 之后，我们使用了 SVG 图标替换了原先的 font 图标，从而带来了以下优势：")]),t._v(" "),e("ul",[e("li",[t._v("完全离线化使用，不需要从 CDN 下载字体文件，图标不会因为网络问题呈现方块，也无需字体文件本地部署。")]),t._v(" "),e("li",[t._v("在低端设备上 SVG 有更好的清晰度。")]),t._v(" "),e("li",[t._v("支持多色图标。")]),t._v(" "),e("li",[t._v("对于内建图标的更换可以提供更多 API，而不需要进行样式覆盖。")])]),t._v(" "),e("p",[t._v("更多讨论可参考："),e("a",{attrs:{href:"https://github.com/ant-design/ant-design/issues/10353"}},[t._v("#10353")]),t._v("。")]),t._v(" "),e("blockquote",[e("p",[t._v("⚠️ 1.2.0 之后我们全量引入了所有图标，导致 antd 默认的包体积有一定增加，我们会在不远的未来增加新的 API 来实现图标的按需使用，更多相关讨论可关注："),e("a",{attrs:{href:"https://github.com/ant-design/ant-design/issues/12011"}},[t._v("#12011")]),t._v("。")])]),t._v(" "),e("p",[t._v("其中 "),e("code",{pre:!0},[t._v("theme")]),t._v(", "),e("code",{pre:!0},[t._v("component")]),t._v(", "),e("code",{pre:!0},[t._v("twoToneColor")]),t._v(" 是 "),e("code",{pre:!0},[t._v("1.2.x")]),t._v(" 版本新增加的属性。最佳实践是给使用的 "),e("code",{pre:!0},[t._v("<Icon />")]),t._v(" 组件传入属性 "),e("code",{pre:!0},[t._v("theme")]),t._v(" 以明确图标的主题风格。例如：")]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-html"}},[e("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("a-icon")]),t._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"star"')]),t._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("theme")]),t._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"filled"')]),t._v(" />")]),t._v("\n")])]),t._v(" "),e("p",[t._v("所有的图标都会以 "),e("code",{pre:!0},[t._v("<svg>")]),t._v(" 标签渲染，可以使用 "),e("code",{pre:!0},[t._v("style")]),t._v(" 和 "),e("code",{pre:!0},[t._v("class")]),t._v(" 设置图标的大小和单色图标的颜色。例如：")]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-html"}},[e("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("a-icon")]),t._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"message"')]),t._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v(":style")]),t._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("\"{ fontSize: '16px', color: '#08c' }\"")]),t._v(" />")]),t._v("\n")])]),t._v(" "),e("h3",{attrs:{id:"双色图标主色"}},[t._v("双色图标主色 "),e("a",{staticClass:"anchor",attrs:{href:"#双色图标主色"}},[t._v("#")])]),t._v(" "),e("p",[t._v("对于双色图标，可以通过使用 "),e("code",{pre:!0},[t._v("Icon.getTwoToneColor()")]),t._v(" 和 "),e("code",{pre:!0},[t._v("Icon.setTwoToneColor(colorString)")]),t._v(" 来全局设置图标主色。")]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("import")]),t._v(" { Icon } "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'ant-design-vue'")]),t._v(";\n\nIcon.setTwoToneColor("),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'#eb2f96'")]),t._v(");\nIcon.getTwoToneColor(); "),e("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// #eb2f96")]),t._v("\n")])]),t._v(" "),e("h3",{attrs:{id:"自定义-font-图标"}},[t._v("自定义 font 图标 "),e("a",{staticClass:"anchor",attrs:{href:"#自定义-font-图标"}},[t._v("#")])]),t._v(" "),e("p",[t._v("在 "),e("code",{pre:!0},[t._v("1.2.0")]),t._v(" 之后，我们提供了一个 "),e("code",{pre:!0},[t._v("createFromIconfontCN")]),t._v(" 方法，方便开发者调用在 "),e("a",{attrs:{href:"http://iconfont.cn/"}},[t._v("iconfont.cn")]),t._v(" 上自行管理的图标。")]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-js"}},[e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("const")]),t._v(" MyIcon = Icon.createFromIconfontCN({\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("scriptUrl")]),t._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'")]),t._v(", "),e("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// 在 iconfont.cn 上生成")]),t._v("\n});\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" Vue({\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("el")]),t._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'#app'")]),t._v(",\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("template")]),t._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'<my-icon type=\"icon-example\" />'")]),t._v(",\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("components")]),t._v(": {\n "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'my-icon'")]),t._v(": MyIcon,\n },\n});\n")])]),t._v(" "),e("p",[t._v("其本质上是创建了一个使用 "),e("code",{pre:!0},[t._v("<use>")]),t._v(" 标签来渲染图标的组件。")]),t._v(" "),e("p",[e("code",{pre:!0},[t._v("options")]),t._v(" 的配置项如下：")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("参数")]),t._v(" "),e("th",[t._v("说明")]),t._v(" "),e("th",[t._v("类型")]),t._v(" "),e("th",[t._v("默认值")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("scriptUrl")]),t._v(" "),e("td",[e("a",{attrs:{href:"http://iconfont.cn/"}},[t._v("iconfont.cn")]),t._v(" 项目在线生成的 "),e("code",{pre:!0},[t._v("js")]),t._v(" 地址")]),t._v(" "),e("td",[t._v("string")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("extraCommonProps")]),t._v(" "),e("td",[t._v("给所有的 "),e("code",{pre:!0},[t._v("svg")]),t._v(" 图标 "),e("code",{pre:!0},[t._v("<Icon />")]),t._v(" 组件设置额外的属性")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("{ class, attrs, props, on, style }")])]),t._v(" "),e("td",[t._v("{}")])])])]),t._v(" "),e("p",[t._v("在 "),e("code",{pre:!0},[t._v("scriptUrl")]),t._v(" 都设置有效的情况下，组件在渲染前会自动引入 "),e("a",{attrs:{href:"http://iconfont.cn/"}},[t._v("iconfont.cn")]),t._v(" 项目中的图标符号集，无需手动引入。")]),t._v(" "),e("p",[t._v("见 "),e("a",{attrs:{href:"http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code"}},[t._v("iconfont.cn 使用帮助")]),t._v(" 查看如何生成 "),e("code",{pre:!0},[t._v("js")]),t._v(" 地址。")]),t._v(" "),e("h3",{attrs:{id:"自定义-SVG-图标"}},[t._v("自定义 SVG 图标 "),e("a",{staticClass:"anchor",attrs:{href:"#自定义-SVG-图标"}},[t._v("#")])]),t._v(" "),e("p",[t._v("如果使用 "),e("code",{pre:!0},[t._v("vue cli 3")]),t._v("，可以通过配置 "),e("a",{attrs:{href:"https://www.npmjs.com/package/vue-svg-loader"}},[t._v("vue-svg-loader")]),t._v(" 来将 "),e("code",{pre:!0},[t._v("svg")]),t._v(" 图标作为 "),e("code",{pre:!0},[t._v("Vue")]),t._v(" 组件导入。更多"),e("code",{pre:!0},[t._v("vue-svg-loader")]),t._v(" 的使用方式请参阅 "),e("a",{attrs:{href:"https://github.com/visualfanatic/vue-svg-loader"}},[t._v("文档")]),t._v("。")]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-js"}},[e("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// vue.config.js")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-built_in"}},[t._v("module")]),t._v(".exports = {\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("chainWebpack")]),t._v(": "),e("span",{pre:!0,attrs:{class:"hljs-function"}},[e("span",{pre:!0,attrs:{class:"hljs-params"}},[t._v("config")]),t._v(" =>")]),t._v(" {\n "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("const")]),t._v(" svgRule = config.module.rule("),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'svg'")]),t._v(");\n\n svgRule.uses.clear();\n\n svgRule.use("),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'vue-svg-loader'")]),t._v(").loader("),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'vue-svg-loader'")]),t._v(");\n },\n};\n")])]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("import")]),t._v(" MessageSvg "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'path/to/message.svg'")]),t._v("; "),e("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// path to your '*.svg' file.")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" Vue({\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("el")]),t._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'#app'")]),t._v(",\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("template")]),t._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'<a-icon :component=\"MessageSvg\" />'")]),t._v(",\n data() {\n "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("return")]),t._v(" {\n MessageSvg,\n };\n },\n});\n")])]),t._v(" "),e("p",[e("code",{pre:!0},[t._v("Icon")]),t._v(" 中的 "),e("code",{pre:!0},[t._v("component")]),t._v(" 组件的接受的属性如下：")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("字段")]),t._v(" "),e("th",[t._v("说明")]),t._v(" "),e("th",[t._v("类型")]),t._v(" "),e("th",[t._v("只读值")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("width")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("svg")]),t._v(" 元素宽度")]),t._v(" "),e("td",[t._v("string | number")]),t._v(" "),e("td",[t._v("'1em'")])]),t._v(" "),e("tr",[e("td",[t._v("height")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("svg")]),t._v(" 元素高度")]),t._v(" "),e("td",[t._v("string | number")]),t._v(" "),e("td",[t._v("'1em'")])]),t._v(" "),e("tr",[e("td",[t._v("fill")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("svg")]),t._v(" 元素填充的颜色")]),t._v(" "),e("td",[t._v("string")]),t._v(" "),e("td",[t._v("'currentColor'")])]),t._v(" "),e("tr",[e("td",[t._v("class")]),t._v(" "),e("td",[t._v("计算后的 "),e("code",{pre:!0},[t._v("svg")]),t._v(" 类名")]),t._v(" "),e("td",[t._v("string")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("style")]),t._v(" "),e("td",[t._v("计算后的 "),e("code",{pre:!0},[t._v("svg")]),t._v(" 元素样式")]),t._v(" "),e("td",[t._v("CSSProperties")]),t._v(" "),e("td",[t._v("-")])])])])])}],!1,null,null,null);V.options.__file="components/icon/index.zh-CN.md";var E=V.exports,B=function(){var t=this.$createElement;this._self._c;return this._m(0)};B._withStripped=!0;var H=Object(i.a)({},B,[function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[e("h2",{attrs:{id:"API"}},[t._v("API "),e("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Property")]),t._v(" "),e("th",[t._v("Description")]),t._v(" "),e("th",[t._v("Type")]),t._v(" "),e("th",[t._v("Default")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("type")]),t._v(" "),e("td",[t._v("Type of the ant design icon")]),t._v(" "),e("td",[t._v("string")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("style")]),t._v(" "),e("td",[t._v("Style properties of icon, like "),e("code",{pre:!0},[t._v("fontSize")]),t._v(" and "),e("code",{pre:!0},[t._v("color")])]),t._v(" "),e("td",[t._v("CSSProperties")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("theme")]),t._v(" "),e("td",[t._v("Theme of the ant design icon")]),t._v(" "),e("td",[t._v("'filled' | 'outlined' | 'twoTone'")]),t._v(" "),e("td",[t._v("'outlined'")])]),t._v(" "),e("tr",[e("td",[t._v("spin")]),t._v(" "),e("td",[t._v("Rotate icon with animation")]),t._v(" "),e("td",[t._v("boolean")]),t._v(" "),e("td",[t._v("false")])]),t._v(" "),e("tr",[e("td",[t._v("rotate")]),t._v(" "),e("td",[t._v("Rotate degrees (added in 1.4.0, not working in IE9)")]),t._v(" "),e("td",[t._v("number")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("component")]),t._v(" "),e("td",[t._v("The component used for the root node. This will override the "),e("strong",[e("code",{pre:!0},[t._v("type")])]),t._v(" property.")]),t._v(" "),e("td",[t._v("ComponentType<CustomIconComponentProps>")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("twoToneColor")]),t._v(" "),e("td",[t._v("Only support the two-tone icon. Specific the primary color.")]),t._v(" "),e("td",[t._v("string (hex color)")]),t._v(" "),e("td",[t._v("-")])])])]),t._v(" "),e("h3",{attrs:{id:"SVG-icons"}},[t._v("SVG icons "),e("a",{staticClass:"anchor",attrs:{href:"#SVG-icons"}},[t._v("#")])]),t._v(" "),e("p",[t._v("We introduced SVG icons in "),e("code",{pre:!0},[t._v("1.2.0")]),t._v(" version replacing font icons which brings benefits below:")]),t._v(" "),e("ul",[e("li",[t._v("Complete offline usage of icon, no dependency of CDN font icon file and no more empty square during downloading than no need to deploy icon font files locally either.")]),t._v(" "),e("li",[t._v("Much more display accuracy in lower-level screens.")]),t._v(" "),e("li",[t._v("Support multiple colors for icon.")]),t._v(" "),e("li",[t._v("No need to change built-in icons with overriding styles by providing more props in component.")])]),t._v(" "),e("p",[t._v("More discussion of SVG icon reference to "),e("a",{attrs:{href:"https://github.com/ant-design/ant-design/issues/10353"}},[t._v("#10353")]),t._v(".")]),t._v(" "),e("blockquote",[e("p",[t._v("⚠️ About the extra bundle size brought by all SVG icons we imported in 1.2.0, we will provide new API to allow developers importing icons as your need, you can trace "),e("a",{attrs:{href:"https://github.com/ant-design/ant-design/issues/12011"}},[t._v("#12011")]),t._v(" for further progress.")])]),t._v(" "),e("p",[t._v("The properties "),e("code",{pre:!0},[t._v("theme")]),t._v(", "),e("code",{pre:!0},[t._v("component")]),t._v(" and "),e("code",{pre:!0},[t._v("twoToneColor")]),t._v(" are added in "),e("code",{pre:!0},[t._v("1.2.0")]),t._v(". The best practice is to pass the property "),e("code",{pre:!0},[t._v("theme")]),t._v(" to every "),e("code",{pre:!0},[t._v("<Icon />")]),t._v(" components.")]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-html"}},[e("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("a-icon")]),t._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"star"')]),t._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("theme")]),t._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"filled"')]),t._v(" />")]),t._v("\n")])]),t._v(" "),e("p",[t._v("All the icons will render to "),e("code",{pre:!0},[t._v("<svg>")]),t._v(". You can still set "),e("code",{pre:!0},[t._v("style")]),t._v(" and "),e("code",{pre:!0},[t._v("class")]),t._v(" for size and color of icons.")]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-html"}},[e("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),e("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("a-icon")]),t._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("type")]),t._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v('"message"')]),t._v(" "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v(":style")]),t._v("="),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("\"{ fontSize: '16px', color: '#08c' }\"")]),t._v(" />")]),t._v("\n")])]),t._v(" "),e("h3",{attrs:{id:"Set-TwoTone-Color"}},[t._v("Set TwoTone Color "),e("a",{staticClass:"anchor",attrs:{href:"#Set-TwoTone-Color"}},[t._v("#")])]),t._v(" "),e("p",[t._v("When using the two-tone icons, you can use the static methods "),e("code",{pre:!0},[t._v("Icon.getTwoToneColor()")]),t._v(" and "),e("code",{pre:!0},[t._v("Icon.setTwoToneColor(colorString)")]),t._v(" to spicify the primary color.")]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("import")]),t._v(" { Icon } "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'ant-design-vue'")]),t._v(";\n\nIcon.setTwoToneColor("),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'#eb2f96'")]),t._v(");\nIcon.getTwoToneColor(); "),e("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// #eb2f96")]),t._v("\n")])]),t._v(" "),e("h3",{attrs:{id:"Custom-Font-Icon"}},[t._v("Custom Font Icon "),e("a",{staticClass:"anchor",attrs:{href:"#Custom-Font-Icon"}},[t._v("#")])]),t._v(" "),e("p",[t._v("We added a "),e("code",{pre:!0},[t._v("createFromIconfontCN")]),t._v(" function to help developer using their own icons deployed at "),e("a",{attrs:{href:"http://iconfont.cn/"}},[t._v("iconfont.cn")]),t._v(" in a convenient way.")]),t._v(" "),e("blockquote",[e("p",[t._v("This method is specified for "),e("a",{attrs:{href:"http://iconfont.cn/"}},[t._v("iconfont.cn")]),t._v(".")])]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-js"}},[e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("const")]),t._v(" MyIcon = Icon.createFromIconfontCN({\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("scriptUrl")]),t._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'")]),t._v(", "),e("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// generated by iconfont.cn")]),t._v("\n});\n\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" Vue({\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("el")]),t._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'#app'")]),t._v(",\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("template")]),t._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'<my-icon type=\"icon-example\" />'")]),t._v(",\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("components")]),t._v(": {\n "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'my-icon'")]),t._v(": MyIcon,\n },\n});\n")])]),t._v(" "),e("p",[t._v("It create a component that uses SVG sprites in essence.")]),t._v(" "),e("p",[t._v("The following options are available:")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Property")]),t._v(" "),e("th",[t._v("Description")]),t._v(" "),e("th",[t._v("Type")]),t._v(" "),e("th",[t._v("Default")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("scriptUrl")]),t._v(" "),e("td",[t._v("The URL generated by "),e("a",{attrs:{href:"http://iconfont.cn/"}},[t._v("iconfont.cn")]),t._v(" project.")]),t._v(" "),e("td",[t._v("string")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("extraCommonProps")]),t._v(" "),e("td",[t._v("Define extra properties to the component")]),t._v(" "),e("td",[e("code",{pre:!0},[t._v("{ class, attrs, props, on, style }")])]),t._v(" "),e("td",[t._v("{}")])])])]),t._v(" "),e("p",[t._v("The property "),e("code",{pre:!0},[t._v("scriptUrl")]),t._v(" should be set to import the SVG sprite symbols.")]),t._v(" "),e("p",[t._v("See "),e("a",{attrs:{href:"http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code"}},[t._v("iconfont.cn documents")]),t._v(" to learn about how to generate "),e("code",{pre:!0},[t._v("scriptUrl")]),t._v(".")]),t._v(" "),e("h3",{attrs:{id:"Custom-SVG-Icon"}},[t._v("Custom SVG Icon "),e("a",{staticClass:"anchor",attrs:{href:"#Custom-SVG-Icon"}},[t._v("#")])]),t._v(" "),e("p",[t._v("You can import SVG icon as an vue component by using "),e("code",{pre:!0},[t._v("vue cli 3")]),t._v(" and "),e("a",{attrs:{href:"https://www.npmjs.com/package/vue-svg-loader"}},[e("code",{pre:!0},[t._v("vue-svg-loader")])]),t._v(". "),e("code",{pre:!0},[t._v("vue-svg-loader")]),t._v("'s "),e("code",{pre:!0},[t._v("options")]),t._v(" "),e("a",{attrs:{href:"https://github.com/visualfanatic/vue-svg-loader"}},[t._v("reference")]),t._v(".")]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-js"}},[e("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// vue.config.js")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"hljs-built_in"}},[t._v("module")]),t._v(".exports = {\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("chainWebpack")]),t._v(": "),e("span",{pre:!0,attrs:{class:"hljs-function"}},[e("span",{pre:!0,attrs:{class:"hljs-params"}},[t._v("config")]),t._v(" =>")]),t._v(" {\n "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("const")]),t._v(" svgRule = config.module.rule("),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'svg'")]),t._v(");\n\n svgRule.uses.clear();\n\n svgRule.use("),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'vue-svg-loader'")]),t._v(").loader("),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'vue-svg-loader'")]),t._v(");\n },\n};\n")])]),t._v(" "),e("pre",{pre:!0},[e("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("import")]),t._v(" { Icon } "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'antd'")]),t._v(";\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("import")]),t._v(" MessageSvg "),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'path/to/message.svg'")]),t._v("; "),e("span",{pre:!0,attrs:{class:"hljs-comment"}},[t._v("// path to your '*.svg' file.")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"hljs-keyword"}},[t._v("new")]),t._v(" Vue({\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("el")]),t._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'#app'")]),t._v(",\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("template")]),t._v(": "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'<a-icon :component=\"MessageSvg\" />'")]),t._v(",\n "),e("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("components")]),t._v(": {\n "),e("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'my-icon'")]),t._v(": MyIcon,\n },\n});\n")])]),t._v(" "),e("p",[t._v("The following properties are available for the component:")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Property")]),t._v(" "),e("th",[t._v("Description")]),t._v(" "),e("th",[t._v("Type")]),t._v(" "),e("th",[t._v("Default")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("width")]),t._v(" "),e("td",[t._v("The width of the "),e("code",{pre:!0},[t._v("svg")]),t._v(" element")]),t._v(" "),e("td",[t._v("string | number")]),t._v(" "),e("td",[t._v("'1em'")])]),t._v(" "),e("tr",[e("td",[t._v("height")]),t._v(" "),e("td",[t._v("The height of the "),e("code",{pre:!0},[t._v("svg")]),t._v(" element")]),t._v(" "),e("td",[t._v("string | number")]),t._v(" "),e("td",[t._v("'1em'")])]),t._v(" "),e("tr",[e("td",[t._v("fill")]),t._v(" "),e("td",[t._v("Define the color used to paint the "),e("code",{pre:!0},[t._v("svg")]),t._v(" element")]),t._v(" "),e("td",[t._v("string")]),t._v(" "),e("td",[t._v("'currentColor'")])]),t._v(" "),e("tr",[e("td",[t._v("class")]),t._v(" "),e("td",[t._v("The computed class name of the "),e("code",{pre:!0},[t._v("svg")]),t._v(" element")]),t._v(" "),e("td",[t._v("string")]),t._v(" "),e("td",[t._v("-")])]),t._v(" "),e("tr",[e("td",[t._v("style")]),t._v(" "),e("td",[t._v("The computed style of the "),e("code",{pre:!0},[t._v("svg")]),t._v(" element")]),t._v(" "),e("td",[t._v("CSSProperties")]),t._v(" "),e("td",[t._v("-")])])])])])}],!1,null,null,null);H.options.__file="components/icon/index.en-US.md";var D=H.exports,G="# 图标 Icon\n 语义化的矢量图形。\n## 设计师专属\n安装 [Kitchen Sketch 插件 <20>](https://kitchen.alipay.com)，就可以一键拖拽使用 Ant Design 和 Iconfont 的海量图标，还可以关联自有项目。\n## 图标列表\n> 点击图标即可复制代码。\n新版图标可能略有缺失，我们还在持续补充中。\n ",N="# Icon\n Semantic vector graphics.\n## List of icons\n> Click the icon and copy the code.\nWe are still adding two-tone icons right now.\n ",U={category:"Components",type:"General",zhType:"通用",title:"Icon",subtitle:"图标",render:function(){var t=arguments[0];return t("div",[t("md",{class:"api-container",attrs:{cn:G,us:N}}),t(m,{class:"markdown"}),t(j),t(x),t(z),t(F),t("api",[t(E,{slot:"cn"}),t(D)])])}},$=Object(i.a)(U,void 0,void 0,!1,null,null,null);$.options.__file="components/icon/demo/index.vue";s.default=$.exports}}]); |