text: "undefined"==typeof window||window.ICON_FONT_STYLE?"undefined"!=typeof window&&window.ICON_FONT_STYLE&&window.ICON_FONT_STYLE.update&&window.ICON_FONT_STYLE.update({fontName:"vusion-icon-font",styleContent:'@font-face {\n\tfont-family: "vusion-icon-font";\n\tsrc:url("/public/vusion-icon-font.ttf?3d02953e747bbfe9edc13761bb7ff1de") format("truetype"),\n\turl("/public/vusion-icon-font.eot?3d02953e747bbfe9edc13761bb7ff1de#iefix") format("embedded-opentype"),\n\turl("/public/vusion-icon-font.woff?3d02953e747bbfe9edc13761bb7ff1de") format("woff"),\n\turl("/public/vusion-icon-font.svg?3d02953e747bbfe9edc13761bb7ff1de#vusion-icon-font") format("svg");\n}'}):window.ICON_FONT_STYLE={fontName:"vusion-icon-font",styleContent:'@font-face {\n\tfont-family: "vusion-icon-font";\n\tsrc:url("/public/vusion-icon-font.ttf?3d02953e747bbfe9edc13761bb7ff1de") format("truetype"),\n\turl("/public/vusion-icon-font.eot?3d02953e747bbfe9edc13761bb7ff1de#iefix") format("embedded-opentype"),\n\turl("/public/vusion-icon-font.woff?3d02953e747bbfe9edc13761bb7ff1de") format("woff"),\n\turl("/public/vusion-icon-font.svg?3d02953e747bbfe9edc13761bb7ff1de#vusion-icon-font") format("svg");\n}'},webpackJsonp([54],{416:function(s,t,i){function a(s){return(s||window.ICON_FONT_STYLE).styleContent||""}function n(s){var t=document.createElement("style"),i=document.getElementsByTagName("head")[0];t.innerHTML=a(s),t.id=h,t.type="text/css",i?i.appendChild(t):window.addEventListener("load",function(){i.appendChild(t)})}var h="ICON-FONT-FILE-STYLE";s.exports=function(){window.HAS_CREATE_FONT_STYLE||(n(),window.HAS_CREATE_FONT_STYLE=!0)}},452:function(s,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a={render:function(){var s=this.$createElement,t=this._self._c||s;return t("u-article",[t("h1",[this._v("资源")]),t("p",[this._v("由于位图图片在 Retina 屏下需要设定 @2x 图，因此我们推荐优先使用 svg 图片。")]),t("p",[this._v("特别是单色图标可以将 svg 转成 icon-font，多色图标可以将 svg 合并成 svg-sprite，实在不行了再将 png 或 jpg 等位图格式合并成 css-sprite。")]),t("h4",[this._v("icon-font")]),t("p",[this._v("icon-font 可以使用 CSS 很方便地设置颜色与大小。")]),t("p",[this._v("在 Vusion 中，我们研发了一个 "),t("u-link",{attrs:{href:"https://github.com/vusion/icon-font-loader/blob/master/README.zh-CN.md"}},[this._v("icon-font-loader")]),this._v("，它提供一个自定义属性"),t("code",{pre:!0},[this._v("icon-font")]),this._v("，使用时很方便：")],1),t("blockquote",[t("p",[this._v("注意：要放在"),t("code",{pre:!0},[this._v(":after")]),this._v("中使用。")])]),t("pre",{pre:!0,attrs:{class:"hljs lang-css"}},[t("code",{attrs:{"v-pre":""}},[t("span",{attrs:{class:"hljs-selector-class"}},[this._v(".select")]),t("span",{attrs:{class:"hljs-selector-pseudo"}},[this._v(":after")]),this._v(" {\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("icon-font")]),this._v(": "),t("span",{attrs:{class:"hljs-built_in"}},[this._v("url")]),this._v("("),t("span",{attrs:{class:"hljs-string"}},[this._v("'./icons/arrow-down.svg'")]),this._v(");\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("color")]),this._v(": "),t("span",{attrs:{class:"hljs-number"}},[this._v("#666")]),this._v(";\n}\n")])]),t("p",[this._v("它会转为")]),t("pre",{pre:!0,attrs:{class:"hljs lang-css"}},[t("code",{attrs:{"v-pre":""}},[t("span",{attrs:{class:"hljs-selector-class"}},[this._v(".select")]),t("span",{attrs:{class:"hljs-selector-pseudo"}},[this._v(":after")]),this._v(" {\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("font-family")]),this._v(": "),t("span",{attrs:{class:"hljs-string"}},[this._v("'vusion-icon-font'")]),this._v(";\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("font-style")]),this._v(": normal;\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("font-weight")]),this._v(": "),t("span",{attrs:{class:"hljs-number"}},[this._v("400")]),this._v(";\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("font-variant")]),this._v(": normal;\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("text-decoration")]),this._v(": inherit;\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("text-rendering")]),this._v(": optimizeLegibility;\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("text-transform")]),this._v(": none;\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("-moz-osx-font-smoothing")]),this._v(": grayscale;\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("-webkit-font-smoothing")]),this._v(": antialiased;\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("font-smoothing")]),this._v(": antialiased;\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("content")]),this._v(": "),t("span",{attrs:{class:"hljs-string"}},[this._v("'\\f106'")]),this._v(";\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("color")]),this._v(": "),t("span",{attrs:{class:"hljs-number"}},[this._v("#666")]),this._v(";\n}\n")])]),t("p",[this._v("同时生成(eot,svg,ttf,woff)等字体和一个全局的@font-face文件。")]),t("p",[this._v("为什么不在HTML或JS中引入图标？类似：")]),t("pre",{pre:!0,attrs:{class:"hljs lang-xhtml"}},[t("code",{attrs:{"v-pre":""}},[t("span",{attrs:{class:"hljs-tag"}},[this._v("<"),t("span",{attrs:{class:"hljs-name"}},[this._v("div")]),this._v(" "),t("span",{attrs:{class:"hljs-attr"}},[this._v("class")]),this._v("="),t("span",{attrs:{class:"hljs-string"}},[this._v('"require(\'./inner.svg)"')]),this._v(">")]),this._v("\n")])]),t("p",[this._v("主要有以下几点原因：")]),t("ul",[t("li",[this._v("其实大部分图标还需设置CSS属性")]),t("li",[this._v("图片资源的引入本质是一种样式修改")]),t("li",[this._v("CSS具有复写的特性")])]),t("h4",[this._v("svg-sprite")]),t("p",[this._v("svg-sprite 拥有 css-sprite不具备的调整大小特性。")]),t("p",[this._v("我们研发了一个"),t("u-link",{attrs:{href:"https://github.com/vusion/svg-classic-sprite-loader"}},[this._v("svg-classic-sprite-loader")]),this._v("。使用起来也很方便：")],1),t("blockquote",[t("p",[this._v("[svg-sprite-loader]")])]),t("pre",{pre:!0,attrs:{class:"hljs lang-css"}},[t("code",{attrs:{"v-pre":""}},[t("span",{attrs:{class:"hljs-selector-class"}},[this._v(".root")]),this._v(" {\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("background")]),this._v(": "),t("span",{attrs:{class:"hljs-built_in"}},[this._v("url")]),this._v("("),t("span",{attrs:{class:"hljs-string"}},[this._v("'./icons/refresh.svg?sprite'")]),this._v(");\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("width")]),this._v(": "),t("span",{attrs:{class:"hljs-number"}},[this._v("200px")]),this._v(";\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("height")]),this._v(": "),t("span",{attrs:{class:"hljs-number"}},[this._v("120px")]),this._v(";\n}\n")])]),t("p",[this._v("它会转为")]),t("pre",{pre:!0,attrs:{class:"hljs lang-css"}},[t("code",{attrs:{"v-pre":""}},[t("span",{attrs:{class:"hljs-selector-class"}},[this._v(".root")]),this._v(" {\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("background")]),this._v(": "),t("span",{attrs:{class:"hljs-built_in"}},[this._v("url")]),this._v("("),t("span",{attrs:{class:"hljs-string"}},[this._v("'/public/sprite.1c9f4bcca4a42798.svg'")]),this._v(");\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("width")]),this._v(": "),t("span",{attrs:{class:"hljs-number"}},[this._v("200px")]),this._v(";\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("height")]),this._v(": "),t("span",{attrs:{class:"hljs-number"}},[this._v("120px")]),this._v(";\n}\n")])]),t("h4",[this._v("css-sprite")]),t("p",[this._v("我们又研发了一个"),t("u-link",{attrs:{href:"https://github.com/vusion/svg-classic-sprite-loader"}},[this._v("svg-classic-sprite-loader")]),this._v("。使用起来也很方便：")],1),t("pre",{pre:!0,attrs:{class:"hljs lang-css"}},[t("code",{attrs:{"v-pre":""}},[t("span",{attrs:{class:"hljs-selector-class"}},[this._v(".root")]),this._v(" {\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("background")]),this._v(": "),t("span",{attrs:{class:"hljs-built_in"}},[this._v("url")]),this._v("("),t("span",{attrs:{class:"hljs-string"}},[this._v("'./icons/detail.png?sprite'")]),this._v(");\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("width")]),this._v(": "),t("span",{attrs:{class:"hljs-number"}},[this._v("200px")]),this._v(";\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("height")]),this._v(": "),t("span",{attrs:{class:"hljs-number"}},[this._v("120px")]),this._v(";\n}\n")])]),t("p",[this._v("它会转为")]),t("pre",{pre:!0,attrs:{class:"hljs lang-css"}},[t("code",{attrs:{"v-pre":""}},[t("span",{attrs:{class:"hljs-selector-class"}},[this._v(".root")]),this._v(" {\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("background")]),this._v(": "),t("span",{attrs:{class:"hljs-built_in"}},[this._v("url")]),this._v("("),t("span",{attrs:{class:"hljs-string"}},[this._v("'/public/sprite.1c9f4bcca4a42798.png'")]),this._v(");\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("width")]),this._v(": "),t("span",{attrs:{class:"hljs-number"}},[this._v("200px")]),this._v(";\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("height")]),this._v(": "),t("span",{attrs:{class:"hljs-number"}},[this._v("120px")]),this._v(";\n}\n")])]),t("p",[this._v("雪碧图可以分组，比如：")]),t("pre",{pre:!0,attrs:{class:"hljs lang-css"}},[t("code",{attrs:{"v-pre":""}},[t("span",{attrs:{class:"hljs-selector-class"}},[this._v(".root")]),this._v(" {\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("background")]),this._v(": "),t("span",{attrs:{class:"hljs-built_in"}},[this._v("url")]),this._v("("),t("span",{attrs:{class:"hljs-string"}},[this._v("'./icons/detail.png?sprite=group1'")]),this._v(");\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("width")]),this._v(": "),t("span",{attrs:{class:"hljs-number"}},[this._v("200px")]),this._v(";\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("height")]),this._v(": "),t("span",{attrs:{class:"hljs-number"}},[this._v("120px")]),this._v(";\n}\n")])]),t("p",[this._v("它会转为")]),t("pre",{pre:!0,attrs:{class:"hljs lang-css"}},[t("code",{attrs:{"v-pre":""}},[t("span",{attrs:{class:"hljs-selector-class"}},[this._v(".root")]),this._v(" {\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("background")]),this._v(": "),t("span",{attrs:{class:"hljs-built_in"}},[this._v("url")]),this._v("("),t("span",{attrs:{class:"hljs-string"}},[this._v("'/public/group1.1c9f4bcca4a42798.png'")]),this._v(");\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("width")]),this._v(": "),t("span",{attrs:{class:"hljs-number"}},[this._v("200px")]),this._v(";\n    "),t("span",{attrs:{class:"hljs-attribute"}},[this._v("height")]),this._v(": "),t("span",{attrs:{class:"hljs-number"}},[this._v("120px")]),this._v(";\n}\n")])]),t("h4",[this._v("其他资源")]),t("p",[this._v("其他资源会统一走 "),t("u-link",{attrs:{href:"https://github.com/webpack-contrib/file-loader"}},[this._v("file-loader")]),this._v("，目前已配置了"),t("code",{pre:!0},[this._v("png|jpg|gif|svg|eot|ttf|woff|woff2")]),this._v("这些格式 "),t("u-link",{attrs:{href:"https://github.com/vusion/vusion-cli/blob/develop/webpack/base.js#L88"}},[this._v("<code>")]),this._v("。")],1),t("h3",[this._v("下一步")]),t("p",[this._v("下一节"),t("u-link",{attrs:{href:"/guides/test"}},[this._v("测试")]),this._v("。")],1)])},staticRenderFns:[]},n=i(1)(null,a,!1,null,null,null);t.default=n.exports}});