{"remainingRequest":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\vue-loader\\lib\\loaders\\templateLoader.js??vue-loader-options!D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\xq-web-bpm\\src\\views\\demo\\Iconfont.vue?vue&type=template&id=67c234ed&scoped=true&","dependencies":[{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\src\\views\\demo\\Iconfont.vue","mtime":1675071992788},{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\vue-loader\\lib\\loaders\\templateLoader.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('el-scrollbar',{staticStyle:{\"height\":\"600px\"}},[_c('div',{staticClass:\"tab-container\"},[_c('div',{staticClass:\"content font-class\"},[_c('ul',{staticClass:\"icon_lists dib-box\"},_vm._l((_vm.iconfont.glyphs),function(item,idx){return _c('li',{key:idx,staticClass:\"dib\"},[_c('span',{staticClass:\"icon iconfont\",class:_vm.iconfont.css_prefix_text + item.font_class}),_c('div',{staticClass:\"name\"},[_vm._v(_vm._s(item.name))]),_c('div',{staticClass:\"code-name\"},[_vm._v(\"#\"+_vm._s(_vm.iconfont.css_prefix_text + item.font_class))])])}),0),_c('div',{staticClass:\"article markdown\"},[_c('h2',{attrs:{\"id\":\"font-class-\"}},[_vm._v(\"font-class 引用\")]),_c('hr'),_c('p',[_vm._v(\"font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。\")]),_c('p',[_vm._v(\"与 Unicode 使用方式相比，具有如下特点：\")]),_c('ul',[_c('li',[_vm._v(\"兼容性良好，支持 IE8+，及所有现代浏览器。\")]),_c('li',[_vm._v(\"相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。\")]),_c('li',[_vm._v(\"因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。\")]),_c('li',[_vm._v(\"不过因为本质上还是使用的字体，所以多色图标还是不支持的。\")])]),_c('p',[_vm._v(\"使用步骤如下：\")]),_c('h3',{attrs:{\"id\":\"-fontclass-\"}},[_vm._v(\"第一步：引入项目下面生成的 fontclass 代码：\")]),_c('pre',[_c('code',{staticClass:\"language-html\"},[_vm._v(\"<link rel=\\\"stylesheet\\\" href=\\\"./iconfont.css\\\">\")])]),_c('h3',{attrs:{\"id\":\"-\"}},[_vm._v(\"第二步：挑选相应图标并获取类名，应用于页面：\")]),_c('pre',[_c('code',{staticClass:\"language-html\"},[_vm._v(\"<span class=\\\"iconfont icon-xxx\\\"></span>\")])]),_c('blockquote',[_c('p',[_vm._v(\"\\n            \\\"\\n            iconfont\\\" 是你项目下的 font-family。可以通过编辑项目查看，默认是 \\\"iconfont\\\"。\\n          \")])]),_c('code',[_vm._v(\"\\n          iconfont.css\\n          添加\\n          [class^=\\\"icon-\\\"], [class*=\\\" icon-\\\"] {\\n          font-family: \\\"iconfont\\\" !important;\\n          speak: none;\\n          font-style: normal;\\n          font-weight: normal;\\n          font-variant: normal;\\n          text-transform: none;\\n          line-height: 1;\\n          vertical-align: baseline;\\n          display: inline-block;\\n          /* Better Font Rendering =========== */\\n          -webkit-font-smoothing: antialiased;\\n          -moz-osx-font-smoothing: grayscale;\\n          }\\n          .el-menu-item [class^=\\\"icon-\\\"] {\\n          margin-right: 5px;\\n          width: 24px;\\n          text-align: center;\\n          font-size: 18px;\\n          vertical-align: middle;\\n          }\\n        \")]),_c('h2',{attrs:{\"id\":\"font-class-\"}},[_vm._v(\"字体图标旋转\")]),_c('hr'),_c('p',[_vm._v(\"在字体图标上添加icon-spin可以让字体图标一直旋转\")]),_c('i',{staticClass:\"icon-sync icon-spin\",staticStyle:{\"font-size\":\"24px\",\"font-weight\":\"bold\",\"margin-right\":\"20px\"}}),_c('i',{staticClass:\"icon-reload icon-spin\",staticStyle:{\"font-size\":\"24px\",\"font-weight\":\"bold\",\"margin-right\":\"20px\"}}),_c('hr')])])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }"]}