@uiw/doc 5.0.0-bate-0 → 5.0.0-bate-3

package/web/static/js/8822.fe5dc0e1.chunk.js

@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8822],{8822:function(e,n,t){t.r(n),n.default={components:{18:function(){function e(n){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(n)}var n,o=(n=t(8133))&&n.__esModule?n:{default:n},r=t(968);function i(e,n){if(t=e,!(null!=(o=n)&&"undefined"!==typeof Symbol&&o[Symbol.hasInstance]?o[Symbol.hasInstance](t):t instanceof o))throw new TypeError("Cannot call a class as a function");var t,o}function a(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function l(e,n){return l=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,n){return e.__proto__=n,e},l(e,n)}function c(e){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var t,o=d(e);if(n){var r=d(this).constructor;t=Reflect.construct(o,arguments,r)}else t=o.apply(this,arguments);return u(this,t)}}function u(n,t){if(t&&("object"===e(t)||"function"===typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(n)}function d(e){return d=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},d(e)}var s=["adobe","alipay","aliwangwang","android-o","android","apple","appstore-o","appstore","area-chart","down","left","right","up","arrow-down","arrow-left","arrow-right","arrow-up","arrows-alt","asterisk","backward","baidu","bar-chart","barcode","bell","camera-o","caret-down","caret-left","caret-right","caret-up","check-square-o","check-square","check","chrome","circle-check-o","circle-check","circle-close-o","circle-close","close-square-o","close-square","close","cloud-download-o","cloud-download","cloud-upload-o","cloud-upload","coffee","component","copy","copyright","css3","cut","d-arrow-left","d-arrow-right","d-caret","dashboard","date","delete","dingding","dislike-o","document","dot-chart","circle-o","down-circle-o","down-circle","down-square-o","down-square","square-o","download","edit","enter","environment-o","environment","eye-o","eye","facebook","file-add","file-excel","file-jpg","file-pdf","file-text","file-unknown","filter","firefox","folder-add","folder-open","folder","forward","foursquare","frown-o","frown","github-o","github","global","heart-off","heart-on","home","html5","ie","inbox","information-o","information","laptop","left-circle-o","left-circle","left-square-o","left-square","like-o","link","linkedin","linux","loading","lock","login","logout","man","map","meh-o","meh","menu-fold","menu-unfold","menu","mail","mail-o","message","minus-circle-o","minus-circle","minus-square-o","minus-square","minus","mobile","more","notification","opera","paper-clip","pause-circle-o","pause-circle","pause","pay-circle-o","pay","picasa","picture","pie-chart","pinterest","play-circle-o","play-circle","plus-circle-o","plus-circle","plus-square-o","plus-square","plus","poweroff","printer","qq","qrcode","question-circle-o","question-circle","reddit","reload","right-circle-o","right-circle","right-square-o","right-square","rollback","safari","safety","save","search","setting-o","setting","share","shopping-cart","shrink","smile-o","smile","star-off","star-on","swap-left","swap-right","swap","table","tag-o","tag","tags-o","tags","taobao","time-o","time","twitter","uiw","unlock","up-circle-o","up-circle","up-square-o","up-square","upload","user-add","user-delete","user","usergroup-add","usergroup-delete","verification","verticle-left","verticle-right","video-camera","warning-o","warning","weibo","weixin","wifi","windows","woman","zoom-in","zoom-out","stop-o","stop"],p={fontSize:26,minWidth:120,background:"#eaeaea",marginBottom:10,marginRight:10,padding:"20px 0",display:"flex",flexDirection:"column",alignItems:"center",textAlign:"center",justifyContent:"center",fill:"#525252"};return function(e){!function(e,n){if("function"!==typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),n&&l(e,n)}(f,e);var n,t,u,d=c(f);function f(e){var n;return i(this,f),(n=d.call(this,e)).state={len:0,result:[]},n}return n=f,(t=[{key:"onChange",value:function(e){var n=e.target.value,t=n?s.filter((function(e){return e.indexOf(n)>-1})):[],o=t.length,r=t.splice(0,15);this.setState({len:o,result:r})}},{key:"render",value:function(){var e=this.state,n=e.len,t=e.result;return o.default.createElement("div",null,o.default.createElement(r.Input,{preIcon:o.default.createElement(r.Icon,{type:"search"}),placeholder:"\u8bf7\u8f93\u5165\u56fe\u6807\u540d\u79f0",type:"text",style:{maxWidth:200},onChange:this.onChange.bind(this)}),o.default.createElement("div",{style:{padding:"10px 0"}},"\u641c\u7d22\u5230 ",this.state.len," \u4e2a\u7ed3\u679c",n>0&&o.default.createElement("span",null,"\uff0c\u4e0b\u9762\u5c55\u793a ",n>15?"15":n," \u4e2a\u56fe\u6807\uff0c\u53ef\u4ee5\u70b9\u51fb\u590d\u5236\u56fe\u6807\u4ee3\u7801: ")),o.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:-10,marginRight:-10}},t.map((function(e,n){var t='<Icon type="'.concat(e,'" />');return o.default.createElement(r.CopyToClipboard,{key:n,style:p,text:t,onClick:function(){r.Notify.success({title:"\u4f60\u5df2\u590d\u5236\u5185\u5bb9\uff01",description:o.default.createElement("span",null,"\u5df2\u590d\u5236 ",o.default.createElement("b",{style:{color:"red"}},t)," \u53ef\u4ee5\u53bb\u7c98\u8d34\u4e86\uff01")})}},o.default.createElement("div",{key:n},o.default.createElement(r.Icon,{type:e}),o.default.createElement("div",{style:{color:"#525252",fontSize:12,paddingTop:8}},e)))}))))}}])&&a(n.prototype,t),u&&a(n,u),Object.defineProperty(n,"prototype",{writable:!1}),f}(o.default.Component)}(),121:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(968);return function(){return n.default.createElement("div",{style:{fontSize:18,lineHeight:"12px"}},n.default.createElement(o.Icon,{type:"heart-on"}),n.default.createElement(o.Icon,{type:"pie-chart"}),n.default.createElement(o.Icon,{type:"tag"}))}}(),140:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(968);return function(){return n.default.createElement("div",{style:{fontSize:"28px"}},n.default.createElement(o.Icon,{type:"heart-on"}),n.default.createElement(o.Icon,{type:"pie-chart"}),n.default.createElement(o.Icon,{type:"tag"}))}}(),161:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(968);return function(){return n.default.createElement("div",{style:{fontSize:"28px",color:"green"}},n.default.createElement(o.Icon,{type:"apple",color:"red"}),n.default.createElement(o.Icon,{type:"pie-chart",style:{fill:"currentColor"}}),n.default.createElement(o.Icon,{type:"frown",style:{fill:"blue"}}),n.default.createElement(o.Icon,{type:"uiw",style:{stroke:"red",fill:"#ffef00"}}))}}(),178:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(968);return function(){return n.default.createElement("div",null,n.default.createElement("h3",{style:{margin:0}},"Exit ",n.default.createElement(o.Icon,{verticalAlign:"baseline",type:"baidu"})),n.default.createElement("span",null,"uiw"),n.default.createElement(o.Icon,{type:"uiw",verticalAlign:"baseline",style:{fill:"#009688",fontSize:21}}))}}(),201:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(968);return function(){return n.default.createElement("div",null,n.default.createElement(o.Icon,{type:"circle-close",verticalAlign:"baseline"}),"  \u56fe\u6807\u540d\u79f0\uff1acircle-close\uff0c[circle\u5708]-[\u5173\u95edclose]",n.default.createElement("br",null),n.default.createElement(o.Icon,{type:"circle-close-o",verticalAlign:"baseline"})," \u56fe\u6807\u540d\u79f0\uff1acircle-close-o\uff0c[circle\u5708]-[\u5173\u95edclose]-[o\u63cf\u7ebf]")}}(),219:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(968);return function(){return n.default.createElement("div",{style:{fontSize:21,color:"green"}},n.default.createElement(o.Icon,{type:"loading",spin:!0,color:"red"}),n.default.createElement(o.Icon,{type:"reload",spin:!0}),n.default.createElement(o.Icon,{type:"picasa",spin:!0,style:{fill:"blue"}}),n.default.createElement(o.Icon,{type:"smile-o",spin:!0,style:{fill:"blue"}}))}}(),236:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(968);var r=n.default.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},n.default.createElement("path",{d:"M19 0H7c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h5.59l3.71 3.71c.17.18.42.29.7.29.55 0 1-.45 1-1v-3h1c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zM7 13c-1.1 0-2-.9-2-2V4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h1v3a1.003 1.003 0 0 0 1.71.71L7.41 16H13c.55 0 1-.45 1-1v-.17L12.17 13H7z",fillRule:"evenodd"})),i=n.default.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},n.default.createElement("path",{d:"M19 8h-1.26c-.19-.73-.48-1.42-.85-2.06l.94-.94a.996.996 0 0 0 0-1.41l-1.41-1.41a.996.996 0 0 0-1.41 0l-.94.94c-.65-.38-1.34-.67-2.07-.86V1c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1v1.26c-.76.2-1.47.5-2.13.89L5 2.28a.972.972 0 0 0-1.36 0L2.28 3.64c-.37.38-.37.98 0 1.36l.87.87c-.39.66-.69 1.37-.89 2.13H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h1.26c.19.73.48 1.42.85 2.06l-.94.94a.996.996 0 0 0 0 1.41l1.41 1.41c.39.39 1.02.39 1.41 0l.94-.94c.64.38 1.33.66 2.06.85V19c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1.26c.76-.2 1.47-.5 2.13-.89l.88.87c.37.37.98.37 1.36 0l1.36-1.36c.37-.38.37-.98 0-1.36l-.87-.87c.4-.65.7-1.37.89-2.13H19c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-9 7c-2.76 0-5-2.24-5-5s2.24-5 5-5v10z",fillRule:"evenodd"})),a={marginRight:10};return function(){return n.default.createElement("div",{style:{fontSize:21,color:"green"}},n.default.createElement(o.Icon,{style:a,type:r,color:"red"}),n.default.createElement(o.Icon,{style:a,type:i,spin:!0}))}}(),307:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(968);var r=["circle-o","down-square-o","down-square","up-square-o","up-square","left-square-o","left-square","right-square-o","right-square"],i={fontSize:18,minWidth:120,background:"#eaeaea",marginBottom:10,marginRight:10,padding:"20px 0",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",fill:"#525252"};return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:-10,marginRight:-10}},r.map((function(e,t){return n.default.createElement("div",{key:t,style:i},n.default.createElement(o.Icon,{type:e}),n.default.createElement("div",{style:{color:"#525252",fontSize:12,paddingTop:8}},e))})))}}(),336:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(968);var r=["square-o","down-circle-o","down-circle","up-circle-o","up-circle","left-circle-o","left-circle","right-circle-o","right-circle","play-circle-o","play-circle"],i={fontSize:18,minWidth:120,background:"#eaeaea",marginBottom:10,marginRight:10,padding:"20px 0",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",fill:"#525252"};return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:-10,marginRight:-10}},r.map((function(e,t){return n.default.createElement("div",{key:t,style:i},n.default.createElement(o.Icon,{type:e}),n.default.createElement("div",{style:{color:"#525252",fontSize:12,paddingTop:8}},e))})))}}(),364:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(968);var r=["down","up","left","right","caret-down","caret-up","caret-left","caret-right","arrow-down","arrow-up","arrow-left","arrow-right","shrink","arrows-alt","d-arrow-left","d-arrow-right","enter","rollback","d-caret","backward","forward","logout","login","swap-left","swap-right","swap","verticle-left","verticle-right","menu","menu-fold","menu-unfold"],i={fontSize:18,minWidth:120,background:"#eaeaea",marginBottom:10,marginRight:10,padding:"20px 0",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",fill:"#525252"};return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:-10,marginRight:-10}},r.map((function(e,t){return n.default.createElement("div",{key:t,style:i},n.default.createElement(o.Icon,{type:e}),n.default.createElement("div",{style:{color:"#525252",fontSize:12,paddingTop:8}},e))})))}}(),396:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(968);var r=["smile-o","smile","frown-o","frown","meh-o","meh","pause-circle-o","pause","pause-circle","information-o","information","warning-o","warning","question-circle-o","question-circle","stop-o","stop"],i={fontSize:18,minWidth:120,background:"#eaeaea",marginBottom:10,marginRight:10,padding:"20px 0",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",fill:"#525252"};return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:-10,marginRight:-10}},r.map((function(e,t){return n.default.createElement("div",{key:t,style:i},n.default.createElement(o.Icon,{type:e}),n.default.createElement("div",{style:{color:"#525252",fontSize:12,paddingTop:8}},e))})))}}(),427:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(968);var r=["plus","plus-circle-o","plus-circle","plus-square","plus-square-o","minus","minus-circle-o","minus-circle","minus-square","minus-square-o","close","circle-close-o","circle-close","close-square","close-square-o","asterisk","check","circle-check-o","circle-check","check-square","check-square-o","copyright"],i={fontSize:18,minWidth:120,background:"#eaeaea",marginBottom:10,marginRight:10,padding:"20px 0",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",fill:"#525252"};return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:-10,marginRight:-10}},r.map((function(e,t){return n.default.createElement("div",{key:t,style:i},n.default.createElement(o.Icon,{type:e}),n.default.createElement("div",{style:{color:"#525252",fontSize:12,paddingTop:8}},e))})))}}(),459:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(968);var r=["file-text","file-jpg","file-unknown","file-add","file-excel","file-pdf","folder-add","folder-open","paper-clip"],i={fontSize:18,minWidth:120,background:"#eaeaea",marginBottom:10,marginRight:10,padding:"20px 0",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",fill:"#525252"};return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:-10,marginRight:-10}},r.map((function(e,t){return n.default.createElement("div",{key:t,style:i},n.default.createElement(o.Icon,{type:e}),n.default.createElement("div",{style:{color:"#525252",fontSize:12,paddingTop:8}},e))})))}}(),489:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(968);var r=["heart-off","heart-on","star-on","star-off","lock","unlock","dashboard","area-chart","bar-chart","dot-chart","pie-chart","dislike-o","like-o","loading","reload","appstore","appstore-o","tag","tag-o","tags","tags-o","setting","setting-o","map","table","qrcode","barcode","printer","cloud-upload","cloud-upload-o","cloud-download","cloud-download-o","download","message","mail","mail-o","user","user-add","user-delete","usergroup-add","usergroup-delete","zoom-in","zoom-out","time","time-o","bell","camera-o","coffee","document","delete","date","edit","eye-o","environment-o","filter","global","inbox","home","laptop","link","copy","more","shopping-cart","search","save","safety","poweroff","picasa","notification","pay-circle-o","pay","picture","woman","man","verification","wifi","video-camera","mobile"],i={fontSize:18,minWidth:120,background:"#eaeaea",marginBottom:10,marginRight:10,padding:"20px 0",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",fill:"#525252"};return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:-10,marginRight:-10}},r.map((function(e,t){return n.default.createElement("div",{key:t,style:i},n.default.createElement(o.Icon,{type:e}),n.default.createElement("div",{style:{color:"#525252",fontSize:12,paddingTop:8}},e))})))}}(),525:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(968);var r=["uiw","windows","linux","apple","facebook","twitter","adobe","baidu","alipay","android-o","android","reddit","github","github-o","aliwangwang","dingding","foursquare","linkedin","pinterest","qq","weibo","taobao","weixin","css3","html5"],i={fontSize:18,minWidth:120,background:"#eaeaea",marginBottom:10,marginRight:10,padding:"20px 0",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",fill:"#525252"};return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:-10,marginRight:-10}},r.map((function(e,t){return n.default.createElement("div",{key:t,style:i},n.default.createElement(o.Icon,{type:e}),n.default.createElement("div",{style:{color:"#525252",fontSize:12,paddingTop:8}},e))})))}}(),553:function(){var e,n=(e=t(8133))&&e.__esModule?e:{default:e},o=t(968);var r=["chrome","safari","firefox","opera","ie"],i={fontSize:18,minWidth:120,background:"#eaeaea",marginBottom:10,marginRight:10,padding:"20px 0",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",fill:"#525252"};return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:-10,marginRight:-10}},r.map((function(e,t){return n.default.createElement("div",{key:t,style:i},n.default.createElement(o.Icon,{type:e}),n.default.createElement("div",{style:{color:"#525252",fontSize:12,paddingTop:8}},e))})))}}()},data:{18:{name:18,meta:{background:"#fff",noCode:"true",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\n\nfunction _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\n\nfunction _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nvar icons = ["adobe", "alipay", "aliwangwang", "android-o", "android", "apple", "appstore-o", "appstore", "area-chart", "down", "left", "right", "up", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "arrows-alt", "asterisk", "backward", "baidu", "bar-chart", "barcode", "bell", "camera-o", "caret-down", "caret-left", "caret-right", "caret-up", "check-square-o", "check-square", "check", "chrome", "circle-check-o", "circle-check", "circle-close-o", "circle-close", "close-square-o", "close-square", "close", "cloud-download-o", "cloud-download", "cloud-upload-o", "cloud-upload", "coffee", "component", "copy", "copyright", "css3", "cut", "d-arrow-left", "d-arrow-right", "d-caret", "dashboard", "date", "delete", "dingding", "dislike-o", "document", "dot-chart", "circle-o", "down-circle-o", "down-circle", "down-square-o", "down-square", "square-o", "download", "edit", "enter", "environment-o", "environment", "eye-o", "eye", "facebook", "file-add", "file-excel", "file-jpg", "file-pdf", "file-text", "file-unknown", "filter", "firefox", "folder-add", "folder-open", "folder", "forward", "foursquare", "frown-o", "frown", "github-o", "github", "global", "heart-off", "heart-on", "home", "html5", "ie", "inbox", "information-o", "information", "laptop", "left-circle-o", "left-circle", "left-square-o", "left-square", "like-o", "link", "linkedin", "linux", "loading", "lock", "login", "logout", "man", "map", "meh-o", "meh", "menu-fold", "menu-unfold", "menu", "mail", "mail-o", "message", "minus-circle-o", "minus-circle", "minus-square-o", "minus-square", "minus", "mobile", "more", "notification", "opera", "paper-clip", "pause-circle-o", "pause-circle", "pause", "pay-circle-o", "pay", "picasa", "picture", "pie-chart", "pinterest", "play-circle-o", "play-circle", "plus-circle-o", "plus-circle", "plus-square-o", "plus-square", "plus", "poweroff", "printer", "qq", "qrcode", "question-circle-o", "question-circle", "reddit", "reload", "right-circle-o", "right-circle", "right-square-o", "right-square", "rollback", "safari", "safety", "save", "search", "setting-o", "setting", "share", "shopping-cart", "shrink", "smile-o", "smile", "star-off", "star-on", "swap-left", "swap-right", "swap", "table", "tag-o", "tag", "tags-o", "tags", "taobao", "time-o", "time", "twitter", "uiw", "unlock", "up-circle-o", "up-circle", "up-square-o", "up-square", "upload", "user-add", "user-delete", "user", "usergroup-add", "usergroup-delete", "verification", "verticle-left", "verticle-right", "video-camera", "warning-o", "warning", "weibo", "weixin", "wifi", "windows", "woman", "zoom-in", "zoom-out", \'stop-o\', \'stop\'];\nvar itemStyl = {\n  fontSize: 26,\n  minWidth: 120,\n  background: \'#eaeaea\',\n  marginBottom: 10,\n  marginRight: 10,\n  padding: \'20px 0\',\n  display: \'flex\',\n  flexDirection: \'column\',\n  alignItems: \'center\',\n  textAlign: \'center\',\n  justifyContent: \'center\',\n  fill: \'#525252\'\n};\n\nvar Demo = /*#__PURE__*/function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  var _super = _createSuper(Demo);\n\n  function Demo(props) {\n    var _this;\n\n    _classCallCheck(this, Demo);\n\n    _this = _super.call(this, props);\n    _this.state = {\n      len: 0,\n      result: []\n    };\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: "onChange",\n    value: function onChange(env) {\n      var value = env.target.value;\n      var data = value ? icons.filter(function (item) {\n        return item.indexOf(value) > -1;\n      }) : [];\n      var len = data.length;\n      var result = data.splice(0, 15);\n      this.setState({\n        len: len,\n        result: result\n      });\n    }\n  }, {\n    key: "render",\n    value: function render() {\n      var _this$state = this.state,\n          len = _this$state.len,\n          result = _this$state.result;\n      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Input, {\n        preIcon: /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n          type: "search"\n        }),\n        placeholder: "\\u8BF7\\u8F93\\u5165\\u56FE\\u6807\\u540D\\u79F0",\n        type: "text",\n        style: {\n          maxWidth: 200\n        },\n        onChange: this.onChange.bind(this)\n      }), /*#__PURE__*/_react["default"].createElement("div", {\n        style: {\n          padding: \'10px 0\'\n        }\n      }, "\\u641C\\u7D22\\u5230 ", this.state.len, " \\u4E2A\\u7ED3\\u679C", len > 0 && /*#__PURE__*/_react["default"].createElement("span", null, "\\uFF0C\\u4E0B\\u9762\\u5C55\\u793A ", len > 15 ? \'15\' : len, " \\u4E2A\\u56FE\\u6807\\uFF0C\\u53EF\\u4EE5\\u70B9\\u51FB\\u590D\\u5236\\u56FE\\u6807\\u4EE3\\u7801: ")), /*#__PURE__*/_react["default"].createElement("div", {\n        style: {\n          display: \'flex\',\n          flexWrap: \'wrap\',\n          marginBottom: -10,\n          marginRight: -10\n        }\n      }, result.map(function (type, idx) {\n        var iconTxt = "<Icon type=\\"".concat(type, "\\" />");\n        return /*#__PURE__*/_react["default"].createElement(_uiw.CopyToClipboard, {\n          key: idx,\n          style: itemStyl,\n          text: iconTxt,\n          onClick: function onClick() {\n            _uiw.Notify.success({\n              title: \'\u4f60\u5df2\u590d\u5236\u5185\u5bb9\uff01\',\n              description: /*#__PURE__*/_react["default"].createElement("span", null, "\\u5DF2\\u590D\\u5236 ", /*#__PURE__*/_react["default"].createElement("b", {\n                style: {\n                  color: \'red\'\n                }\n              }, iconTxt), " \\u53EF\\u4EE5\\u53BB\\u7C98\\u8D34\\u4E86\\uFF01")\n            });\n          }\n        }, /*#__PURE__*/_react["default"].createElement("div", {\n          key: idx\n        }, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n          type: type\n        }), /*#__PURE__*/_react["default"].createElement("div", {\n          style: {\n            color: \'#525252\',\n            fontSize: 12,\n            paddingTop: 8\n          }\n        }, type)));\n      })));\n    }\n  }]);\n\n  return Demo;\n}(_react["default"].Component);\n\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { Input, CopyToClipboard, Icon, Notify } from \'uiw\';\n\nconst icons = ["adobe", "alipay", "aliwangwang", "android-o", "android", "apple", "appstore-o", "appstore", "area-chart", "down", "left", "right", "up", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "arrows-alt", "asterisk", "backward", "baidu", "bar-chart", "barcode", "bell", "camera-o", "caret-down", "caret-left", "caret-right", "caret-up", "check-square-o", "check-square", "check", "chrome", "circle-check-o", "circle-check", "circle-close-o", "circle-close", "close-square-o", "close-square", "close", "cloud-download-o", "cloud-download", "cloud-upload-o", "cloud-upload", "coffee", "component", "copy", "copyright", "css3", "cut", "d-arrow-left", "d-arrow-right", "d-caret", "dashboard", "date", "delete", "dingding", "dislike-o", "document", "dot-chart", "circle-o", "down-circle-o", "down-circle", "down-square-o", "down-square", "square-o", "download", "edit", "enter", "environment-o", "environment", "eye-o", "eye", "facebook", "file-add", "file-excel", "file-jpg", "file-pdf", "file-text", "file-unknown", "filter", "firefox", "folder-add", "folder-open", "folder", "forward", "foursquare", "frown-o", "frown", "github-o", "github", "global", "heart-off", "heart-on", "home", "html5", "ie", "inbox", "information-o", "information", "laptop", "left-circle-o", "left-circle", "left-square-o", "left-square", "like-o", "link", "linkedin", "linux", "loading", "lock", "login", "logout", "man", "map", "meh-o", "meh", "menu-fold", "menu-unfold", "menu", "mail", "mail-o", "message", "minus-circle-o", "minus-circle", "minus-square-o", "minus-square", "minus", "mobile", "more", "notification", "opera", "paper-clip", "pause-circle-o", "pause-circle", "pause", "pay-circle-o", "pay", "picasa", "picture", "pie-chart", "pinterest", "play-circle-o", "play-circle", "plus-circle-o", "plus-circle", "plus-square-o", "plus-square", "plus", "poweroff", "printer", "qq", "qrcode", "question-circle-o", "question-circle", "reddit", "reload", "right-circle-o", "right-circle", "right-square-o", "right-square", "rollback", "safari", "safety", "save", "search", "setting-o", "setting", "share", "shopping-cart", "shrink", "smile-o", "smile", "star-off", "star-on", "swap-left", "swap-right", "swap", "table", "tag-o", "tag", "tags-o", "tags", "taobao", "time-o", "time", "twitter", "uiw", "unlock", "up-circle-o", "up-circle", "up-square-o", "up-square", "upload", "user-add", "user-delete", "user", "usergroup-add", "usergroup-delete", "verification", "verticle-left", "verticle-right", "video-camera", "warning-o", "warning", "weibo", "weixin", "wifi", "windows", "woman", "zoom-in", "zoom-out", \'stop-o\', \'stop\'];\nconst itemStyl = {\n  fontSize: 26, minWidth: 120, background: \'#eaeaea\', marginBottom: 10, marginRight: 10, padding: \'20px 0\',\n  display: \'flex\', flexDirection: \'column\', alignItems: \'center\', textAlign: \'center\', justifyContent: \'center\', fill: \'#525252\',\n}\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      len: 0,\n      result: [],\n    }\n  }\n  onChange(env) {\n    const value = env.target.value;\n    const data = value ? icons.filter((item) => item.indexOf(value) > -1) : [];\n    const len = data.length;\n    const result = data.splice(0, 15);\n    this.setState({ len, result });\n  }\n  render() {\n    const { len, result } = this.state;\n    return (\n      <div>\n        <Input preIcon={<Icon type="search" />} placeholder="\u8bf7\u8f93\u5165\u56fe\u6807\u540d\u79f0" type="text" style={{ maxWidth: 200 }} onChange={this.onChange.bind(this)} />\n        <div style={{ padding: \'10px 0\' }}>\n          \u641c\u7d22\u5230 {this.state.len} \u4e2a\u7ed3\u679c{len > 0 && <span>\uff0c\u4e0b\u9762\u5c55\u793a {len > 15 ? \'15\' : len} \u4e2a\u56fe\u6807\uff0c\u53ef\u4ee5\u70b9\u51fb\u590d\u5236\u56fe\u6807\u4ee3\u7801: </span>}\n        </div>\n        <div style={{ display: \'flex\', flexWrap: \'wrap\', marginBottom: -10, marginRight: -10 }}>\n          {result.map((type, idx) => {\n            const iconTxt = `<Icon type="${type}" />`;\n            return (\n              <CopyToClipboard\n                key={idx}\n                style={itemStyl}\n                text={iconTxt}\n                onClick={() => {\n                  Notify.success({\n                    title: \'\u4f60\u5df2\u590d\u5236\u5185\u5bb9\uff01\',\n                    description: (\n                      <span>\n                        \u5df2\u590d\u5236 <b style={{ color: \'red\' }}>{iconTxt}</b> \u53ef\u4ee5\u53bb\u7c98\u8d34\u4e86\uff01\n                      </span>\n                    ),\n                  });\n                }}\n              >\n                <div key={idx}>\n                  <Icon type={type} />\n                  <div style={{ color: \'#525252\', fontSize: 12, paddingTop: 8 }}>{type}</div>\n                </div>\n              </CopyToClipboard>\n            )\n          })}\n        </div>\n      </div>\n    );\n  }\n}\nexport default Demo'},121:{name:121,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      fontSize: 18,\n      lineHeight: \'12px\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "heart-on"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "pie-chart"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "tag"\n  }));\n};\n\nreturn Demo;',language:"jsx",value:'import React from "react"\nimport { Icon } from \'uiw\';\n\nconst Demo =()=>(\n  <div style={{ fontSize: 18, lineHeight: \'12px\' }}>\n    <Icon type="heart-on" />\n    <Icon type="pie-chart" />\n    <Icon type="tag" />\n  </div>\n);\nexport default Demo\n'},140:{name:140,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      fontSize: \'28px\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "heart-on"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "pie-chart"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "tag"\n  }));\n};\n\nreturn Demo;',language:"jsx",value:'import React from "react"\nimport { Icon } from \'uiw\';\n\nconst Demo = () => (\n  <div style={{ fontSize: \'28px\' }}>\n    <Icon type="heart-on" />\n    <Icon type="pie-chart" />\n    <Icon type="tag" />\n  </div>\n);\nexport default Demo'},161:{name:161,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      fontSize: \'28px\',\n      color: \'green\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "apple",\n    color: "red"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "pie-chart",\n    style: {\n      fill: \'currentColor\'\n    }\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "frown",\n    style: {\n      fill: \'blue\'\n    }\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "uiw",\n    style: {\n      stroke: \'red\',\n      fill: \'#ffef00\'\n    }\n  }));\n};\n\nreturn Demo;',language:"jsx",value:"import React from \"react\"\nimport { Icon } from 'uiw';\n\nconst Demo = () => (\n  <div style={{ fontSize: '28px',color: 'green' }}>\n    <Icon type=\"apple\" color=\"red\" />\n    <Icon type=\"pie-chart\" style={{fill: 'currentColor'}} />\n    <Icon type=\"frown\" style={{fill: 'blue'}} />\n    <Icon type=\"uiw\" style={{stroke: 'red',fill: '#ffef00'}} />\n  </div>\n);\nexport default Demo"},178:{name:178,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h3", {\n    style: {\n      margin: 0\n    }\n  }, "Exit ", /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    verticalAlign: "baseline",\n    type: "baidu"\n  })), /*#__PURE__*/_react["default"].createElement("span", null, "uiw"), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "uiw",\n    verticalAlign: "baseline",\n    style: {\n      fill: \'#009688\',\n      fontSize: 21\n    }\n  }));\n};\n\nreturn Demo;',language:"jsx",value:'import React from "react"\nimport { Icon } from \'uiw\';\n\nconst Demo = () => (\n  <div>\n    <h3 style={{ margin: 0 }}>Exit <Icon verticalAlign="baseline" type="baidu" /></h3>\n    <span>uiw</span><Icon type="uiw" verticalAlign="baseline" style={{ fill: \'#009688\', fontSize: 21 }} />\n  </div>\n);\nexport default Demo'},201:{name:201,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "circle-close",\n    verticalAlign: "baseline"\n  }), "  \\u56FE\\u6807\\u540D\\u79F0\\uFF1Acircle-close\\uFF0C[circle\\u5708]-[\\u5173\\u95EDclose]", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "circle-close-o",\n    verticalAlign: "baseline"\n  }), " \\u56FE\\u6807\\u540D\\u79F0\\uFF1Acircle-close-o\\uFF0C[circle\\u5708]-[\\u5173\\u95EDclose]-[o\\u63CF\\u7EBF]");\n};\n\nreturn Demo;',language:"jsx",value:'import React from "react"\nimport { Icon } from \'uiw\';\n\nconst Demo = () => (\n  <div>\n    <Icon type="circle-close" verticalAlign="baseline" />  \u56fe\u6807\u540d\u79f0\uff1acircle-close\uff0c[circle\u5708]-[\u5173\u95edclose]\n    <br/>\n    <Icon type="circle-close-o" verticalAlign="baseline" /> \u56fe\u6807\u540d\u79f0\uff1acircle-close-o\uff0c[circle\u5708]-[\u5173\u95edclose]-[o\u63cf\u7ebf]\n  </div>\n);\nexport default Demo'},219:{name:219,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      fontSize: 21,\n      color: \'green\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "loading",\n    spin: true,\n    color: "red"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "reload",\n    spin: true\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "picasa",\n    spin: true,\n    style: {\n      fill: \'blue\'\n    }\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: "smile-o",\n    spin: true,\n    style: {\n      fill: \'blue\'\n    }\n  }));\n};\n\nreturn Demo;',language:"jsx",value:'import React from "react"\nimport { Icon } from \'uiw\';\n\nconst Demo = () => (\n  <div style={{ fontSize: 21, color: \'green\' }}>\n    <Icon type="loading" spin={true} color="red" />\n    <Icon type="reload" spin={true} />\n    <Icon type="picasa" spin={true} style={{fill: \'blue\'}} />\n    <Icon type="smile-o" spin={true} style={{fill: \'blue\'}} />\n  </div>\n);\nexport default Demo'},236:{name:236,meta:{background:"#fff",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar chat = /*#__PURE__*/_react["default"].createElement("svg", {\n  width: "20",\n  height: "20",\n  viewBox: "0 0 20 20"\n}, /*#__PURE__*/_react["default"].createElement("path", {\n  d: "M19 0H7c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h5.59l3.71 3.71c.17.18.42.29.7.29.55 0 1-.45 1-1v-3h1c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zM7 13c-1.1 0-2-.9-2-2V4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h1v3a1.003 1.003 0 0 0 1.71.71L7.41 16H13c.55 0 1-.45 1-1v-.17L12.17 13H7z",\n  fillRule: "evenodd"\n}));\n\nvar contrast = /*#__PURE__*/_react["default"].createElement("svg", {\n  width: "20",\n  height: "20",\n  viewBox: "0 0 20 20"\n}, /*#__PURE__*/_react["default"].createElement("path", {\n  d: "M19 8h-1.26c-.19-.73-.48-1.42-.85-2.06l.94-.94a.996.996 0 0 0 0-1.41l-1.41-1.41a.996.996 0 0 0-1.41 0l-.94.94c-.65-.38-1.34-.67-2.07-.86V1c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1v1.26c-.76.2-1.47.5-2.13.89L5 2.28a.972.972 0 0 0-1.36 0L2.28 3.64c-.37.38-.37.98 0 1.36l.87.87c-.39.66-.69 1.37-.89 2.13H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h1.26c.19.73.48 1.42.85 2.06l-.94.94a.996.996 0 0 0 0 1.41l1.41 1.41c.39.39 1.02.39 1.41 0l.94-.94c.64.38 1.33.66 2.06.85V19c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1.26c.76-.2 1.47-.5 2.13-.89l.88.87c.37.37.98.37 1.36 0l1.36-1.36c.37-.38.37-.98 0-1.36l-.87-.87c.4-.65.7-1.37.89-2.13H19c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-9 7c-2.76 0-5-2.24-5-5s2.24-5 5-5v10z",\n  fillRule: "evenodd"\n}));\n\nvar styl = {\n  marginRight: 10\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      fontSize: 21,\n      color: \'green\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    style: styl,\n    type: chat,\n    color: "red"\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    style: styl,\n    type: contrast,\n    spin: true\n  }));\n};\n\nreturn Demo;',language:"jsx",value:'import React from "react"\nimport { Icon } from \'uiw\';\n\nconst chat = (\n  <svg width="20" height="20" viewBox="0 0 20 20">\n    <path d="M19 0H7c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h5.59l3.71 3.71c.17.18.42.29.7.29.55 0 1-.45 1-1v-3h1c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zM7 13c-1.1 0-2-.9-2-2V4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h1v3a1.003 1.003 0 0 0 1.71.71L7.41 16H13c.55 0 1-.45 1-1v-.17L12.17 13H7z" fillRule="evenodd" />\n  </svg>\n)\nconst contrast = (\n  <svg width="20" height="20" viewBox="0 0 20 20">\n    <path d="M19 8h-1.26c-.19-.73-.48-1.42-.85-2.06l.94-.94a.996.996 0 0 0 0-1.41l-1.41-1.41a.996.996 0 0 0-1.41 0l-.94.94c-.65-.38-1.34-.67-2.07-.86V1c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1v1.26c-.76.2-1.47.5-2.13.89L5 2.28a.972.972 0 0 0-1.36 0L2.28 3.64c-.37.38-.37.98 0 1.36l.87.87c-.39.66-.69 1.37-.89 2.13H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h1.26c.19.73.48 1.42.85 2.06l-.94.94a.996.996 0 0 0 0 1.41l1.41 1.41c.39.39 1.02.39 1.41 0l.94-.94c.64.38 1.33.66 2.06.85V19c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1.26c.76-.2 1.47-.5 2.13-.89l.88.87c.37.37.98.37 1.36 0l1.36-1.36c.37-.38.37-.98 0-1.36l-.87-.87c.4-.65.7-1.37.89-2.13H19c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-9 7c-2.76 0-5-2.24-5-5s2.24-5 5-5v10z" fillRule="evenodd" />\n  </svg>\n)\nconst styl = { marginRight: 10 };\n\nconst Demo = () => (\n  <div style={{ fontSize: 21, color: \'green\' }}>\n    <Icon style={styl} type={chat} color="red" />\n    <Icon style={styl} type={contrast} spin={true} />\n  </div>\n);\nexport default Demo'},307:{name:307,meta:{background:"#fff",noCode:"true",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _uiw = require(\"uiw\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar iconList = ['circle-o', 'down-square-o', 'down-square', 'up-square-o', 'up-square', 'left-square-o', 'left-square', 'right-square-o', 'right-square'];\nvar itemStyl = {\n  fontSize: 18,\n  minWidth: 120,\n  background: '#eaeaea',\n  marginBottom: 10,\n  marginRight: 10,\n  padding: '20px 0',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fill: '#525252'\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n    style: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      marginBottom: -10,\n      marginRight: -10\n    }\n  }, iconList.map(function (type, idx) {\n    return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      key: idx,\n      style: itemStyl\n    }, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Icon, {\n      type: type\n    }), /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      style: {\n        color: '#525252',\n        fontSize: 12,\n        paddingTop: 8\n      }\n    }, type));\n  }));\n};\n\nreturn Demo;",language:"js",value:"import React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'circle-o', 'down-square-o','down-square','up-square-o', 'up-square','left-square-o','left-square', 'right-square-o', 'right-square',\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo"},336:{name:336,meta:{background:"#fff",noCode:"true",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _uiw = require(\"uiw\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar iconList = ['square-o', 'down-circle-o', 'down-circle', 'up-circle-o', 'up-circle', 'left-circle-o', 'left-circle', 'right-circle-o', 'right-circle', 'play-circle-o', 'play-circle'];\nvar itemStyl = {\n  fontSize: 18,\n  minWidth: 120,\n  background: '#eaeaea',\n  marginBottom: 10,\n  marginRight: 10,\n  padding: '20px 0',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fill: '#525252'\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n    style: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      marginBottom: -10,\n      marginRight: -10\n    }\n  }, iconList.map(function (type, idx) {\n    return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      key: idx,\n      style: itemStyl\n    }, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Icon, {\n      type: type\n    }), /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      style: {\n        color: '#525252',\n        fontSize: 12,\n        paddingTop: 8\n      }\n    }, type));\n  }));\n};\n\nreturn Demo;",language:"js",value:"import React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'square-o', 'down-circle-o', 'down-circle','up-circle-o','up-circle','left-circle-o', 'left-circle','right-circle-o', 'right-circle','play-circle-o',  'play-circle',\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo"},364:{name:364,meta:{background:"#fff",noCode:"true",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _uiw = require(\"uiw\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar iconList = ['down', 'up', 'left', 'right', 'caret-down', 'caret-up', 'caret-left', 'caret-right', 'arrow-down', 'arrow-up', 'arrow-left', 'arrow-right', 'shrink', 'arrows-alt', 'd-arrow-left', 'd-arrow-right', 'enter', 'rollback', 'd-caret', 'backward', 'forward', 'logout', 'login', 'swap-left', 'swap-right', 'swap', 'verticle-left', 'verticle-right', 'menu', 'menu-fold', 'menu-unfold'];\nvar itemStyl = {\n  fontSize: 18,\n  minWidth: 120,\n  background: '#eaeaea',\n  marginBottom: 10,\n  marginRight: 10,\n  padding: '20px 0',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fill: '#525252'\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n    style: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      marginBottom: -10,\n      marginRight: -10\n    }\n  }, iconList.map(function (type, idx) {\n    return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      key: idx,\n      style: itemStyl\n    }, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Icon, {\n      type: type\n    }), /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      style: {\n        color: '#525252',\n        fontSize: 12,\n        paddingTop: 8\n      }\n    }, type));\n  }));\n};\n\nreturn Demo;",language:"js",value:"import React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'down', 'up', 'left', 'right', 'caret-down', 'caret-up', 'caret-left', 'caret-right', 'arrow-down', 'arrow-up', 'arrow-left', 'arrow-right',\n  'shrink','arrows-alt','d-arrow-left','d-arrow-right','enter',\n  'rollback', 'd-caret','backward','forward',  'logout', 'login', 'swap-left', 'swap-right', 'swap',\n  'verticle-left', 'verticle-right', 'menu','menu-fold', 'menu-unfold',\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo"},396:{name:396,meta:{background:"#fff",noCode:"true",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _uiw = require(\"uiw\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar iconList = ['smile-o', 'smile', 'frown-o', 'frown', 'meh-o', 'meh', 'pause-circle-o', 'pause', 'pause-circle', 'information-o', 'information', 'warning-o', 'warning', 'question-circle-o', 'question-circle', 'stop-o', 'stop'];\nvar itemStyl = {\n  fontSize: 18,\n  minWidth: 120,\n  background: '#eaeaea',\n  marginBottom: 10,\n  marginRight: 10,\n  padding: '20px 0',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fill: '#525252'\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n    style: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      marginBottom: -10,\n      marginRight: -10\n    }\n  }, iconList.map(function (type, idx) {\n    return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      key: idx,\n      style: itemStyl\n    }, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Icon, {\n      type: type\n    }), /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      style: {\n        color: '#525252',\n        fontSize: 12,\n        paddingTop: 8\n      }\n    }, type));\n  }));\n};\n\nreturn Demo;",language:"js",value:"import React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'smile-o', 'smile','frown-o', 'frown', 'meh-o', 'meh',\n  'pause-circle-o', 'pause', 'pause-circle', 'information-o', 'information', 'warning-o', 'warning',\n  'question-circle-o', 'question-circle', 'stop-o', 'stop',\n];\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo"},427:{name:427,meta:{background:"#fff",noCode:"true",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _uiw = require(\"uiw\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar iconList = ['plus', 'plus-circle-o', 'plus-circle', 'plus-square', 'plus-square-o', 'minus', 'minus-circle-o', 'minus-circle', 'minus-square', 'minus-square-o', 'close', 'circle-close-o', 'circle-close', 'close-square', 'close-square-o', 'asterisk', 'check', 'circle-check-o', 'circle-check', 'check-square', 'check-square-o', 'copyright'];\nvar itemStyl = {\n  fontSize: 18,\n  minWidth: 120,\n  background: '#eaeaea',\n  marginBottom: 10,\n  marginRight: 10,\n  padding: '20px 0',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fill: '#525252'\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n    style: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      marginBottom: -10,\n      marginRight: -10\n    }\n  }, iconList.map(function (type, idx) {\n    return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      key: idx,\n      style: itemStyl\n    }, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Icon, {\n      type: type\n    }), /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      style: {\n        color: '#525252',\n        fontSize: 12,\n        paddingTop: 8\n      }\n    }, type));\n  }));\n};\n\nreturn Demo;",language:"js",value:"import React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n 'plus', 'plus-circle-o','plus-circle', 'plus-square', 'plus-square-o',\n 'minus', 'minus-circle-o', 'minus-circle', 'minus-square', 'minus-square-o',\n 'close','circle-close-o', 'circle-close','close-square', 'close-square-o', 'asterisk',\n  'check', 'circle-check-o', 'circle-check','check-square','check-square-o', 'copyright',\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo"},459:{name:459,meta:{background:"#fff",noCode:"true",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _uiw = require(\"uiw\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar iconList = ['file-text', 'file-jpg', 'file-unknown', 'file-add', 'file-excel', 'file-pdf', 'folder-add', 'folder-open', 'paper-clip'];\nvar itemStyl = {\n  fontSize: 18,\n  minWidth: 120,\n  background: '#eaeaea',\n  marginBottom: 10,\n  marginRight: 10,\n  padding: '20px 0',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fill: '#525252'\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n    style: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      marginBottom: -10,\n      marginRight: -10\n    }\n  }, iconList.map(function (type, idx) {\n    return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      key: idx,\n      style: itemStyl\n    }, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Icon, {\n      type: type\n    }), /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      style: {\n        color: '#525252',\n        fontSize: 12,\n        paddingTop: 8\n      }\n    }, type));\n  }));\n};\n\nreturn Demo;",language:"js",value:"import React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'file-text', 'file-jpg', 'file-unknown', 'file-add', 'file-excel', 'file-pdf',\n  'folder-add', 'folder-open', 'paper-clip',\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo"},489:{name:489,meta:{background:"#fff",noCode:"true",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _uiw = require(\"uiw\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar iconList = ['heart-off', 'heart-on', 'star-on', 'star-off', 'lock', 'unlock', 'dashboard', 'area-chart', 'bar-chart', 'dot-chart', 'pie-chart', 'dislike-o', 'like-o', 'loading', 'reload', 'appstore', 'appstore-o', 'tag', 'tag-o', 'tags', 'tags-o', 'setting', 'setting-o', 'map', 'table', 'qrcode', 'barcode', 'printer', 'cloud-upload', 'cloud-upload-o', 'cloud-download', 'cloud-download-o', 'download', 'message', 'mail', 'mail-o', 'user', 'user-add', 'user-delete', 'usergroup-add', 'usergroup-delete', 'zoom-in', 'zoom-out', 'time', 'time-o', 'bell', 'camera-o', 'coffee', 'document', 'delete', 'date', 'edit', 'eye-o', 'environment-o', 'filter', 'global', 'inbox', 'home', 'laptop', 'link', 'copy', 'more', 'shopping-cart', 'search', 'save', 'safety', 'poweroff', 'picasa', 'notification', 'pay-circle-o', 'pay', 'picture', 'woman', 'man', 'verification', 'wifi', 'video-camera', 'mobile'];\nvar itemStyl = {\n  fontSize: 18,\n  minWidth: 120,\n  background: '#eaeaea',\n  marginBottom: 10,\n  marginRight: 10,\n  padding: '20px 0',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fill: '#525252'\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n    style: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      marginBottom: -10,\n      marginRight: -10\n    }\n  }, iconList.map(function (type, idx) {\n    return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      key: idx,\n      style: itemStyl\n    }, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Icon, {\n      type: type\n    }), /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      style: {\n        color: '#525252',\n        fontSize: 12,\n        paddingTop: 8\n      }\n    }, type));\n  }));\n};\n\nreturn Demo;",language:"js",value:"import React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'heart-off', 'heart-on', 'star-on', 'star-off','lock', 'unlock','dashboard',\n  'area-chart', 'bar-chart', 'dot-chart','pie-chart',\n  'dislike-o', 'like-o','loading', 'reload','appstore', 'appstore-o',\n  'tag', 'tag-o','tags','tags-o', 'setting','setting-o','map','table','qrcode','barcode','printer',\n  'cloud-upload','cloud-upload-o', 'cloud-download','cloud-download-o', 'download','message', 'mail', 'mail-o',\n  'user', 'user-add', 'user-delete', 'usergroup-add', 'usergroup-delete', 'zoom-in', 'zoom-out','time', 'time-o',\n  'bell', 'camera-o', 'coffee', 'document', 'delete', 'date', 'edit',  'eye-o', 'environment-o', 'filter', 'global', 'inbox', 'home', 'laptop', 'link', 'copy', 'more', 'shopping-cart', 'search', 'save', 'safety', 'poweroff', 'picasa', 'notification',\n  'pay-circle-o', 'pay', 'picture', 'woman', 'man', 'verification', 'wifi', 'video-camera', 'mobile'\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo"},525:{name:525,meta:{background:"#fff",noCode:"true",codeSandbox:"true",codePen:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _uiw = require(\"uiw\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nvar iconList = ['uiw', 'windows', 'linux', 'apple', 'facebook', 'twitter', 'adobe', 'baidu', 'alipay', 'android-o', 'android', 'reddit', 'github', 'github-o', 'aliwangwang', 'dingding', 'foursquare', 'linkedin', 'pinterest', 'qq', 'weibo', 'taobao', 'weixin', 'css3', 'html5'];\nvar itemStyl = {\n  fontSize: 18,\n  minWidth: 120,\n  background: '#eaeaea',\n  marginBottom: 10,\n  marginRight: 10,\n  padding: '20px 0',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fill: '#525252'\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n    style: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      marginBottom: -10,\n      marginRight: -10\n    }\n  }, iconList.map(function (type, idx) {\n    return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      key: idx,\n      style: itemStyl\n    }, /*#__PURE__*/_react[\"default\"].createElement(_uiw.Icon, {\n      type: type\n    }), /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      style: {\n        color: '#525252',\n        fontSize: 12,\n        paddingTop: 8\n      }\n    }, type));\n  }));\n};\n\nreturn Demo;",language:"js",value:"import React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = ['uiw', 'windows', 'linux', 'apple', 'facebook', 'twitter', 'adobe', 'baidu', 'alipay', 'android-o', 'android','reddit', 'github', 'github-o', 'aliwangwang',   'dingding', 'foursquare', 'linkedin', 'pinterest', 'qq',  'weibo', 'taobao', 'weixin', 'css3', 'html5'];\n\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo"},553:{name:553,meta:{background:"#fff",noCode:"true",codeSandbox:"true",codePen:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\n\nvar _uiw = require("uiw");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nvar iconList = ["chrome", "safari", "firefox", "opera", "ie"];\nvar itemStyl = {\n  fontSize: 18,\n  minWidth: 120,\n  background: \'#eaeaea\',\n  marginBottom: 10,\n  marginRight: 10,\n  padding: \'20px 0\',\n  display: \'flex\',\n  flexDirection: \'column\',\n  alignItems: \'center\',\n  justifyContent: \'center\',\n  fill: \'#525252\'\n};\n\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      display: \'flex\',\n      flexWrap: \'wrap\',\n      marginBottom: -10,\n      marginRight: -10\n    }\n  }, iconList.map(function (type, idx) {\n    return /*#__PURE__*/_react["default"].createElement("div", {\n      key: idx,\n      style: itemStyl\n    }, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n      type: type\n    }), /*#__PURE__*/_react["default"].createElement("div", {\n      style: {\n        color: \'#525252\',\n        fontSize: 12,\n        paddingTop: 8\n      }\n    }, type));\n  }));\n};\n\nreturn Demo;',language:"js",value:"import React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [ \"chrome\", \"safari\", \"firefox\", \"opera\", \"ie\", ];\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo"}},source:"Icon \u56fe\u6807\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-icon/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-icon.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-icon)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-icon.svg?label=@uiw/react-icon)](https://npmjs.com/@uiw/react-icon)\n\n\u8bed\u4e49\u5316\u7684\u77e2\u91cf\u56fe\u5f62\uff0c\u5185\u7f6e\u7684\u56fe\u6807\u5c5e\u4e8eUI\u6846\u67b6\u5e38\u7528\u56fe\u5f62\u5b57\u4f53\u3002icon\u5b57\u4f53\u4ee5\u53ca\u6837\u5f0f\uff0c\u88ab\u62bd\u79bb\u5230\u4e00\u4e2a\u65b0\u7684\u4ed3\u5e93 [uiw icon](https://uiwjs.github.io/icons/) \uff0c`uiw`\u53bb\u4f9d\u8d56 [uiw-iconfont](https://github.com/uiwjs/icons)\uff0c\u8fd9\u4e2a\u4ed3\u5e93\u4e3b\u8981\u662f\u7ef4\u62a4\u4e00\u5957svg\u56fe\u7247\uff0c\u5e76\u5c06svg\u56fe\u7247\u8f6c\u6362\u4e3a `*.symbol.svg` `*.ttf` `*.woff` `*.woff2` `*.eot` `svgPaths.json` \u7b49\u5b57\u4f53\u53ca\u76f8\u5173\u6587\u4ef6\u5e76\u53d1\u5e03\u5230 [npm](https://www.npmjs.com/package/uiw-iconfont) \u4e0a\u53bb\u3002\n\n```jsx\nimport { Icon } from 'uiw';\n// or\nimport Icon from '@uiw/react-icon';\n```\n\n### \u641c\u7d22\u56fe\u6807\n\n```jsx mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true\nimport React from 'react';\nimport { Input, CopyToClipboard, Icon, Notify } from 'uiw';\n\nconst icons = [\"adobe\", \"alipay\", \"aliwangwang\", \"android-o\", \"android\", \"apple\", \"appstore-o\", \"appstore\", \"area-chart\", \"down\", \"left\", \"right\", \"up\", \"arrow-down\", \"arrow-left\", \"arrow-right\", \"arrow-up\", \"arrows-alt\", \"asterisk\", \"backward\", \"baidu\", \"bar-chart\", \"barcode\", \"bell\", \"camera-o\", \"caret-down\", \"caret-left\", \"caret-right\", \"caret-up\", \"check-square-o\", \"check-square\", \"check\", \"chrome\", \"circle-check-o\", \"circle-check\", \"circle-close-o\", \"circle-close\", \"close-square-o\", \"close-square\", \"close\", \"cloud-download-o\", \"cloud-download\", \"cloud-upload-o\", \"cloud-upload\", \"coffee\", \"component\", \"copy\", \"copyright\", \"css3\", \"cut\", \"d-arrow-left\", \"d-arrow-right\", \"d-caret\", \"dashboard\", \"date\", \"delete\", \"dingding\", \"dislike-o\", \"document\", \"dot-chart\", \"circle-o\", \"down-circle-o\", \"down-circle\", \"down-square-o\", \"down-square\", \"square-o\", \"download\", \"edit\", \"enter\", \"environment-o\", \"environment\", \"eye-o\", \"eye\", \"facebook\", \"file-add\", \"file-excel\", \"file-jpg\", \"file-pdf\", \"file-text\", \"file-unknown\", \"filter\", \"firefox\", \"folder-add\", \"folder-open\", \"folder\", \"forward\", \"foursquare\", \"frown-o\", \"frown\", \"github-o\", \"github\", \"global\", \"heart-off\", \"heart-on\", \"home\", \"html5\", \"ie\", \"inbox\", \"information-o\", \"information\", \"laptop\", \"left-circle-o\", \"left-circle\", \"left-square-o\", \"left-square\", \"like-o\", \"link\", \"linkedin\", \"linux\", \"loading\", \"lock\", \"login\", \"logout\", \"man\", \"map\", \"meh-o\", \"meh\", \"menu-fold\", \"menu-unfold\", \"menu\", \"mail\", \"mail-o\", \"message\", \"minus-circle-o\", \"minus-circle\", \"minus-square-o\", \"minus-square\", \"minus\", \"mobile\", \"more\", \"notification\", \"opera\", \"paper-clip\", \"pause-circle-o\", \"pause-circle\", \"pause\", \"pay-circle-o\", \"pay\", \"picasa\", \"picture\", \"pie-chart\", \"pinterest\", \"play-circle-o\", \"play-circle\", \"plus-circle-o\", \"plus-circle\", \"plus-square-o\", \"plus-square\", \"plus\", \"poweroff\", \"printer\", \"qq\", \"qrcode\", \"question-circle-o\", \"question-circle\", \"reddit\", \"reload\", \"right-circle-o\", \"right-circle\", \"right-square-o\", \"right-square\", \"rollback\", \"safari\", \"safety\", \"save\", \"search\", \"setting-o\", \"setting\", \"share\", \"shopping-cart\", \"shrink\", \"smile-o\", \"smile\", \"star-off\", \"star-on\", \"swap-left\", \"swap-right\", \"swap\", \"table\", \"tag-o\", \"tag\", \"tags-o\", \"tags\", \"taobao\", \"time-o\", \"time\", \"twitter\", \"uiw\", \"unlock\", \"up-circle-o\", \"up-circle\", \"up-square-o\", \"up-square\", \"upload\", \"user-add\", \"user-delete\", \"user\", \"usergroup-add\", \"usergroup-delete\", \"verification\", \"verticle-left\", \"verticle-right\", \"video-camera\", \"warning-o\", \"warning\", \"weibo\", \"weixin\", \"wifi\", \"windows\", \"woman\", \"zoom-in\", \"zoom-out\", 'stop-o', 'stop'];\nconst itemStyl = {\n  fontSize: 26, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', justifyContent: 'center', fill: '#525252',\n}\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      len: 0,\n      result: [],\n    }\n  }\n  onChange(env) {\n    const value = env.target.value;\n    const data = value ? icons.filter((item) => item.indexOf(value) > -1) : [];\n    const len = data.length;\n    const result = data.splice(0, 15);\n    this.setState({ len, result });\n  }\n  render() {\n    const { len, result } = this.state;\n    return (\n      <div>\n        <Input preIcon={<Icon type=\"search\" />} placeholder=\"\u8bf7\u8f93\u5165\u56fe\u6807\u540d\u79f0\" type=\"text\" style={{ maxWidth: 200 }} onChange={this.onChange.bind(this)} />\n        <div style={{ padding: '10px 0' }}>\n          \u641c\u7d22\u5230 {this.state.len} \u4e2a\u7ed3\u679c{len > 0 && <span>\uff0c\u4e0b\u9762\u5c55\u793a {len > 15 ? '15' : len} \u4e2a\u56fe\u6807\uff0c\u53ef\u4ee5\u70b9\u51fb\u590d\u5236\u56fe\u6807\u4ee3\u7801: </span>}\n        </div>\n        <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n          {result.map((type, idx) => {\n            const iconTxt = `<Icon type=\"${type}\" />`;\n            return (\n              <CopyToClipboard\n                key={idx}\n                style={itemStyl}\n                text={iconTxt}\n                onClick={() => {\n                  Notify.success({\n                    title: '\u4f60\u5df2\u590d\u5236\u5185\u5bb9\uff01',\n                    description: (\n                      <span>\n                        \u5df2\u590d\u5236 <b style={{ color: 'red' }}>{iconTxt}</b> \u53ef\u4ee5\u53bb\u7c98\u8d34\u4e86\uff01\n                      </span>\n                    ),\n                  });\n                }}\n              >\n                <div key={idx}>\n                  <Icon type={type} />\n                  <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n                </div>\n              </CopyToClipboard>\n            )\n          })}\n        </div>\n      </div>\n    );\n  }\n}\nexport default Demo\n```\n\n## \u5982\u4f55\u4f7f\u7528\n\n\u4f7f\u7528`<Icon />`\u7ec4\u4ef6\uff0c\u6307\u5b9a\u56fe\u6807\u5bf9\u5e94\u7684`type`\u5c5e\u6027\uff0c\u793a\u4f8b\u4ee3\u7801\uff1a\n\n```jsx\nimport { Icon } from 'uiw';\n```\n\n```jsx\n<Icon type=\"minus\" />\n```\n\n\u6e32\u67d3\u4e3a\n\n```jsx\n<span class=\"w-icon w-icon-middle\">\n  <svg viewBox=\"0 0 24 24\">\n    <path d=\"M16.038 3.176c2.313-.551 4.58.248 5.648 1.603.985 1.25 1.433 2.55 1.287 4.468-.105 1.383-.55 2.408-1.428 3.536-.162.208-.34.421-.563.68-.13.153-.628.72-.602.692-.88 1.008-3.471 3.535-7.814 7.62a.83.83 0 0 1-1.139-.003c-3.728-3.55-6.141-5.888-7.248-7.022-2.043-2.094-2.82-3.31-3.102-5.276-.295-2.055.27-3.742 1.538-5.053 1.19-1.229 3.319-1.684 5.42-1.25 1.231.254 2.542 1.072 3.961 2.436 1.21-1.261 2.56-2.077 4.042-2.43z\" fill-rule=\"evenodd\">\n    </path>\n  </svg>\n</span>\n```\n\n\u793a\u4f8b\u5982\u4e0b:\n\n```jsx\nconst Demo = () => (\n  <div>\n    <Icon type=\"arrow-down\" />\n    <Icon type=\"minus\" />\n    <Icon type=\"plus\" />\n    <Icon type=\"check\" />\n    <Icon type=\"close\" />\n  </div>\n)\n```\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst Demo =()=>(\n  <div style={{ fontSize: 18, lineHeight: '12px' }}>\n    <Icon type=\"heart-on\" />\n    <Icon type=\"pie-chart\" />\n    <Icon type=\"tag\" />\n  </div>\n);\nexport default Demo\n\n```\n\n### \u56fe\u6807\u5c3a\u5bf8\n\n\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u56fe\u6807\u975e\u5e38\u5c0f\uff0c\u5b83\u4eec\u7ee7\u627f\u4e86\u7236\u7ea7\u7684\u5b57\u4f53\u5927\u5c0f\u3002 \u5982\u679c\u6ca1\u6709\u8bbe\u7f6e\u5b57\u4f53\u5927\u5c0f\uff0c\u53ef\u4ee5\u901a\u8fc7 `size` \u6765\u8bbe\u7f6e\u5c3a\u5bf8\u3002\u901a\u5e38\u60c5\u51b5 `size` \u4f1a\u5f88\u7d2f\u8d58\u6ca1\u6709\u4ec0\u4e48\u7528\u3002\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst Demo = () => (\n  <div style={{ fontSize: '28px' }}>\n    <Icon type=\"heart-on\" />\n    <Icon type=\"pie-chart\" />\n    <Icon type=\"tag\" />\n  </div>\n);\nexport default Demo\n```\n\n### \u56fe\u6807\u989c\u8272\n\n\u9ed8\u8ba4\u7eaf\u9ed1\u8272\u56fe\u6807\uff0c\u5f53\u524d\u56fe\u6807\u662f svg \u683c\u5f0f\u5c55\u793a\uff0c\u5728\u4e3aSVG\u8bbe\u7f6e\u6837\u5f0f\u65f6\uff0c\u8bf7\u4f7f\u7528 `fill` \u6216 `stroke` \u5c5e\u6027\u800c\u4e0d\u662f `color`\u3002 \u8fd9\u4e9b\u53ef\u4ee5\u76f4\u63a5\u5728 `Icon` \u4e0a\u8bbe\u7f6e\u4e3a `style` \u6216\u901a\u8fc7 `CSS` \u8bbe\u7f6e\u3002\n\n> \u4e00\u4e2a\u6709\u7528\u7684\u6280\u5de7\u662f\u5c06 `fill` \u8bbe\u7f6e\u4e3a `currentColor`\uff0c\u4ee5\u4fbf\u4ece\u56fe\u6807\u5bb9\u5668\u7684\u6587\u672c\u989c\u8272\u7ee7\u627f\u586b\u5145\u989c\u8272\u3002\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst Demo = () => (\n  <div style={{ fontSize: '28px',color: 'green' }}>\n    <Icon type=\"apple\" color=\"red\" />\n    <Icon type=\"pie-chart\" style={{fill: 'currentColor'}} />\n    <Icon type=\"frown\" style={{fill: 'blue'}} />\n    <Icon type=\"uiw\" style={{stroke: 'red',fill: '#ffef00'}} />\n  </div>\n);\nexport default Demo\n```\n\n### \u4e0e\u6587\u672c\u5bf9\u9f50\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <h3 style={{ margin: 0 }}>Exit <Icon verticalAlign=\"baseline\" type=\"baidu\" /></h3>\n    <span>uiw</span><Icon type=\"uiw\" verticalAlign=\"baseline\" style={{ fill: '#009688', fontSize: 21 }} />\n  </div>\n);\nexport default Demo\n```\n\n### \u56fe\u6807\u7684\u547d\u540d\u89c4\u8303\n\n\u6211\u4eec\u4e3a\u6bcf\u4e2a\u56fe\u6807\u8d4b\u4e88\u4e86\u8bed\u4e49\u5316\u7684\u547d\u540d\uff0c\u547d\u540d\u89c4\u5219\u5982\u4e0b:\n\n> \\[\u5f62\u72b6?\\]-\\[\u56fe\u6807\u540d\\]-\\[\u63cf\u7ebf?\\]-\\[\u65b9\u5411?\\]\n> \u65b9\u5411\uff1a`down`\u3001`up`\u3001`left`\u3001`right`\n> \u63cf\u7ebf\uff1a`-o` \u56fe\u6807\u6dfb\u52a0\u8fb9\u6846\u63cf\u7ebf\n> \u9ed8\u8ba4\uff1a`w-icon-` \u9ed8\u8ba4\u5f15\u7528\u7684\u5b57\u4f53\u6587\u4ef6\u4f5c\u7528\u57df\n> \u81ea\u5b9a\u5b9a\u4e49\uff1a`w-icon-uiw-` \u81ea\u5b9a\u5b9a\u4e49\u4f5c\u7528\u57df\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst Demo = () => (\n  <div>\n    <Icon type=\"circle-close\" verticalAlign=\"baseline\" />  \u56fe\u6807\u540d\u79f0\uff1acircle-close\uff0c[circle\u5708]-[\u5173\u95edclose]\n    <br/>\n    <Icon type=\"circle-close-o\" verticalAlign=\"baseline\" /> \u56fe\u6807\u540d\u79f0\uff1acircle-close-o\uff0c[circle\u5708]-[\u5173\u95edclose]-[o\u63cf\u7ebf]\n  </div>\n);\nexport default Demo\n```\n\n### \u56fe\u6807\u65cb\u8f6c\u5b9e\u4f8b\n\n\u901a\u8fc7\u8bbe\u7f6e\u53c2\u6570 `spin={true}` \u6765\u8bbe\u7f6e\u56fe\u6807\u65cb\u8f6c\u3002\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst Demo = () => (\n  <div style={{ fontSize: 21, color: 'green' }}>\n    <Icon type=\"loading\" spin={true} color=\"red\" />\n    <Icon type=\"reload\" spin={true} />\n    <Icon type=\"picasa\" spin={true} style={{fill: 'blue'}} />\n    <Icon type=\"smile-o\" spin={true} style={{fill: 'blue'}} />\n  </div>\n);\nexport default Demo\n```\n\n### \u81ea\u5b9a\u4e49\u56fe\u6807\n\n```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst chat = (\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n    <path d=\"M19 0H7c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h5.59l3.71 3.71c.17.18.42.29.7.29.55 0 1-.45 1-1v-3h1c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zM7 13c-1.1 0-2-.9-2-2V4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h1v3a1.003 1.003 0 0 0 1.71.71L7.41 16H13c.55 0 1-.45 1-1v-.17L12.17 13H7z\" fillRule=\"evenodd\" />\n  </svg>\n)\nconst contrast = (\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n    <path d=\"M19 8h-1.26c-.19-.73-.48-1.42-.85-2.06l.94-.94a.996.996 0 0 0 0-1.41l-1.41-1.41a.996.996 0 0 0-1.41 0l-.94.94c-.65-.38-1.34-.67-2.07-.86V1c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1v1.26c-.76.2-1.47.5-2.13.89L5 2.28a.972.972 0 0 0-1.36 0L2.28 3.64c-.37.38-.37.98 0 1.36l.87.87c-.39.66-.69 1.37-.89 2.13H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h1.26c.19.73.48 1.42.85 2.06l-.94.94a.996.996 0 0 0 0 1.41l1.41 1.41c.39.39 1.02.39 1.41 0l.94-.94c.64.38 1.33.66 2.06.85V19c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1.26c.76-.2 1.47-.5 2.13-.89l.88.87c.37.37.98.37 1.36 0l1.36-1.36c.37-.38.37-.98 0-1.36l-.87-.87c.4-.65.7-1.37.89-2.13H19c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-9 7c-2.76 0-5-2.24-5-5s2.24-5 5-5v10z\" fillRule=\"evenodd\" />\n  </svg>\n)\nconst styl = { marginRight: 10 };\n\nconst Demo = () => (\n  <div style={{ fontSize: 21, color: 'green' }}>\n    <Icon style={styl} type={chat} color=\"red\" />\n    <Icon style={styl} type={contrast} spin={true} />\n  </div>\n);\nexport default Demo\n```\n\n## \u5b57\u4f53\u56fe\u6807\n\n\u901a\u8fc7\u5f15\u5165 [uiw-iconfont](https://github.com/uiwjs/icons) \u5b57\u4f53\u6837\u5f0f\uff0c\u5728 [uiw-iconfont\u5b98\u7f51](https://uiwjs.github.io/icons) \u627e\u5230\u5bf9\u5e94\u7684\u56fe\u6807\u540d\u79f0\uff0c\u5c31\u53ef\u4ee5\u4f7f\u7528\u4e86\uff0c`uiw` \u5df2\u7ecf\u4f9d\u8d56 `uiw-iconfont` \u4f60\u65e0\u9700\u5b89\u88c5\u5373\u53ef\u4f7f\u7528\uff0c\u66f4\u591a\u4f7f\u7528\u65b9\u6cd5[\u67e5\u770b\u5b98\u65b9\u6587\u6863](https://github.com/uiwjs/icons)\u3002\n\n```bash\n# \u5982\u679c\u4f60\u6ca1\u6709\u5b89\u88c5\uff0c\u53ef\u5355\u72ec\u4f7f\u7528\uff0c\u5b89\u88c5\nnpm i uiw-iconfont --save\n```\n\n\u5f15\u5165\u5b57\u4f53\u6837\u5f0f\n\n```jsx\nimport 'uiw-iconfont/fonts/w-icon.css';\n```\n\n\u5728 HTML \u4e2d\u4f7f\u7528\uff1a\n\n```html\n<i className=\"w-icon-apple\"></i>\n```\n\n\u5728 React \u4e2d\u4f7f\u7528\uff1a\n\n```jsx\nconst Demo = () => (\n  <div style={{ color: 'green' }}>\n    <i className=\"w-icon-apple\" />\n    <i className=\"w-icon-appstore\" />\n  </div>\n)\n```\n\n## API\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| type | \u56fe\u6807\u7684\u540d\u79f0 | String/ReactNode | - |\n| spin | \u662f\u5426\u6709\u65cb\u8f6c\u52a8\u753b |  Boolean | `false` |\n| verticalAlign | \u5782\u76f4\u5bf9\u9f50\u65b9\u5f0f | Enum {baseline, middle} | `baseline` |\n| style | \u8bbe\u7f6e\u56fe\u6807\u7684\u6837\u5f0f\uff0c\u4f8b\u5982 `fill` \u548c `stroke` | Object | - |\n\n\n## \u6240\u6709\u56fe\u6807\n\n### \u65b9\u5411\u6027\u56fe\u6807\n\n```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'circle-o', 'down-square-o','down-square','up-square-o', 'up-square','left-square-o','left-square', 'right-square-o', 'right-square',\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo\n```\n\n\u5706\u5708\u65b9\u5411\u6027\u56fe\u6807\n\n```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'square-o', 'down-circle-o', 'down-circle','up-circle-o','up-circle','left-circle-o', 'left-circle','right-circle-o', 'right-circle','play-circle-o',  'play-circle',\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo\n```\n\n\u5176\u5b83\u65b9\u5411\u6027\u56fe\u6807\n\n```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'down', 'up', 'left', 'right', 'caret-down', 'caret-up', 'caret-left', 'caret-right', 'arrow-down', 'arrow-up', 'arrow-left', 'arrow-right',\n  'shrink','arrows-alt','d-arrow-left','d-arrow-right','enter',\n  'rollback', 'd-caret','backward','forward',  'logout', 'login', 'swap-left', 'swap-right', 'swap',\n  'verticle-left', 'verticle-right', 'menu','menu-fold', 'menu-unfold',\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo\n```\n\n### \u63d0\u793a\u5efa\u8bae\u6027\u56fe\u6807\n\n```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'smile-o', 'smile','frown-o', 'frown', 'meh-o', 'meh',\n  'pause-circle-o', 'pause', 'pause-circle', 'information-o', 'information', 'warning-o', 'warning',\n  'question-circle-o', 'question-circle', 'stop-o', 'stop',\n];\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo\n```\n\n## \u7b26\u53f7\n\n```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n 'plus', 'plus-circle-o','plus-circle', 'plus-square', 'plus-square-o',\n 'minus', 'minus-circle-o', 'minus-circle', 'minus-square', 'minus-square-o',\n 'close','circle-close-o', 'circle-close','close-square', 'close-square-o', 'asterisk',\n  'check', 'circle-check-o', 'circle-check','check-square','check-square-o', 'copyright',\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo\n```\n\n### \u6587\u4ef6\n\n```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'file-text', 'file-jpg', 'file-unknown', 'file-add', 'file-excel', 'file-pdf',\n  'folder-add', 'folder-open', 'paper-clip',\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo\n```\n\n### \u5176\u5b83\n\n```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [\n  'heart-off', 'heart-on', 'star-on', 'star-off','lock', 'unlock','dashboard',\n  'area-chart', 'bar-chart', 'dot-chart','pie-chart',\n  'dislike-o', 'like-o','loading', 'reload','appstore', 'appstore-o',\n  'tag', 'tag-o','tags','tags-o', 'setting','setting-o','map','table','qrcode','barcode','printer',\n  'cloud-upload','cloud-upload-o', 'cloud-download','cloud-download-o', 'download','message', 'mail', 'mail-o',\n  'user', 'user-add', 'user-delete', 'usergroup-add', 'usergroup-delete', 'zoom-in', 'zoom-out','time', 'time-o',\n  'bell', 'camera-o', 'coffee', 'document', 'delete', 'date', 'edit',  'eye-o', 'environment-o', 'filter', 'global', 'inbox', 'home', 'laptop', 'link', 'copy', 'more', 'shopping-cart', 'search', 'save', 'safety', 'poweroff', 'picasa', 'notification',\n  'pay-circle-o', 'pay', 'picture', 'woman', 'man', 'verification', 'wifi', 'video-camera', 'mobile'\n]\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo\n```\n\n### \u54c1\u724c\u6807\u8bc6\n\n```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = ['uiw', 'windows', 'linux', 'apple', 'facebook', 'twitter', 'adobe', 'baidu', 'alipay', 'android-o', 'android','reddit', 'github', 'github-o', 'aliwangwang',   'dingding', 'foursquare', 'linkedin', 'pinterest', 'qq',  'weibo', 'taobao', 'weixin', 'css3', 'html5'];\n\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo\n```\n\n### \u6d4f\u89c8\u5668\u56fe\u6807\n\n```js mdx:preview&background=#fff&noCode=true&codeSandbox=true&codePen=true\nimport React from \"react\"\nimport { Icon } from 'uiw';\n\nconst iconList = [ \"chrome\", \"safari\", \"firefox\", \"opera\", \"ie\", ];\nconst itemStyl = {\n  fontSize: 18, minWidth: 120, background: '#eaeaea', marginBottom: 10, marginRight: 10, padding: '20px 0',\n  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fill: '#525252',\n}\n\nconst Demo = () => (\n  <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: -10, marginRight: -10 }}>\n    {iconList.map((type, idx) => {\n      return (\n        <div key={idx} style={itemStyl}>\n          <Icon type={type} />\n          <div style={{ color: '#525252', fontSize: 12, paddingTop: 8 }}>{type}</div>\n        </div>\n      )\n    })}\n  </div>\n);\nexport default Demo\n```\n"}}}]);
+//# sourceMappingURL=8822.fe5dc0e1.chunk.js.map