1 line
86 KiB
JavaScript
1 line
86 KiB
JavaScript
|
webpackJsonp([33],{"+MY7":function(s,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=e.info={title:"Icon \u56FE\u6807",preview:"https://didi.github.io/mand-mobile/examples/#/icon"},t=e.body="<p>SVG \u56FE\u6807</p>\n<h3 id=\"\u5F15\u5165\">\u5F15\u5165<a href=\"javascript:jumpAnchor('\u5F15\u5165')\" class=\"mfe-blog-toc-item mfe-blog-toc-item-h3\">#</a></h3><pre><code class=\"lang-javascript\">import { <span class=\"hljs-keyword\">Icon</span> } from <span class=\"hljs-string\">'mand-mobile'</span>\n\nVue.component(<span class=\"hljs-keyword\">Icon</span>.name, <span class=\"hljs-keyword\">Icon</span>)\n</code></pre>\n<h3 id=\"\u4F7F\u7528\u6307\u5357\">\u4F7F\u7528\u6307\u5357<a href=\"javascript:jumpAnchor('\u4F7F\u7528\u6307\u5357')\" class=\"mfe-blog-toc-item mfe-blog-toc-item-h3\">#</a></h3><p>\u7EC4\u4EF6\u5E93\u5185\u7F6E\u56FE\u6807\u53EF\u76F4\u63A5\u4F7F\u7528\uFF0C<code>arrow-up/down/left/right</code>, <code>circle-alert/cross/right</code>\uFF0C<code>hollo-plus</code>\uFF0C<code>cross</code>\uFF0C<code>spinner</code></p>\n<p>\u5176\u4ED6\u81EA\u5B9A\u4E49\u56FE\u6807\u9700\u4F7F\u7528<a href=\"https://github.com/kisenka/svg-sprite-loader\" target=\"_blank\">svg-sprite-loader</a>\uFF0C\bsvg\u6587\u4EF6\u540D\u5373\u56FE\u6807\u540D\u79F0</p>\n<ol>\n<li>\u5B89\u88C5\u4F9D\u8D56</li>\n</ol>\n<pre><code class=\"lang-shell\">npm install svg-sprite-loader --<span class=\"hljs-built_in\">save</span>-<span class=\"hljs-built_in\">dev</span>\n</code></pre>\n<ol start=\"2\">\n<li>webpack\u914D\u7F6E</li>\n</ol>\n<pre><code class=\"lang-javascript\"><span class=\"hljs-keyword\">const</span> path = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'path'</span>)\n\n<span class=\"hljs-built_in\">module</span>.exports = {\n <span class=\"hljs-keyword\">module</span>: {\n loaders: [\n {\n test: <span class=\"hljs-regexp\">/\\.svg$/i</span>,\n loader: <span class=\"hljs-string\">'svg-sprite-loader'</span>,\n include: [\n <span class=\"hljs-comment\">// \u5C06\u67D0\u4E2A\u8DEF\u5F84\u4E0B\u6240\u6709svg\u4EA4\u7ED9 svg-sprite-loader \u63D2\u4EF6\u5904\u7406</span>\n path.resolve(__dirname, <span class=\"hljs-string\">'src/my-project-svg-folder'</span>)\n ],\n }\n ]\n }\n}\n</code></pre>\n<ol start=\"3\">\n<li>\u5F15\u5165\u56FE\u6807</li>\n</ol>\n<pre><code class=\"lang-vue\"><span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">template</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">md-icon</span> <span class=\"hljs-attr\">name</span>=<span class=\"hljs-string\">\"hello\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">md-icon</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">md-icon</span> <span class=\"hljs-attr\">name</span>=<span class=\"hljs-string\">\"world\"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">md-icon</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">template</span>></span>\n\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">script</span>></span><span class=\"javascript\">\n<span class=\"hljs-keyword\">import</span> <span class=\"hljs-string\">'src/my-project-svg-folder/hello.svg'</span>\n<span class=\"hljs-keyword\">import</span> <span class=\"hljs-string\">'src/my-project-svg-folder/world.svg'</span>\n<span class=\"hljs-keyword\">import</span> </span></span><span class=\"hljs-template-variable\">{ Icon }</span><span class=\"xml\"><span class=\"javascript\"> <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'mand-mobile'</span>\n\n<span class=\"hljs-keyword\">export</span> <span class=\"hljs-keyword\">default</span> </span></span><span class=\"hljs-template-variable\">{\n name: 'icon-demo',\n component: {\n [Icon.name]: Icon\n }</span><span class=\"x
|