{"id":2278,"date":"2017-10-31T17:48:24","date_gmt":"2017-10-31T09:48:24","guid":{"rendered":"http:\/\/www.xttblog.com\/?p=2278"},"modified":"2017-10-31T17:48:24","modified_gmt":"2017-10-31T09:48:24","slug":"svgr-%e6%95%99%e7%a8%8b","status":"publish","type":"post","link":"https:\/\/www.xttblog.com\/?p=2278","title":{"rendered":"SVGR \u6559\u7a0b"},"content":{"rendered":"<p>\n\t\u4e0a\u4e00\u7bc7\u6211\u4eec\u7b80\u5355\u7684\u4ecb\u7ecd\u4e86 SVGR \uff0c\u672c\u6587\u5c06\u6df1\u5165\u5b83\u7684\u4e00\u4e9b api \u8bbe\u8ba1\u548c\u5206\u6790\u4e00\u4e0b\u5b83\u7684\u5b9e\u73b0\u539f\u7406\u3002\n<\/p>\n<p>\n\t<font><font>React\u652f\u6301SVG\u5f00\u7bb1\u5373\u7528\uff0c\u4f7f\u7ec4\u4ef6\u4ee3\u66ffSVG\u6587\u4ef6\u66f4\u7b80\u5355\uff0c\u66f4\u8f7b\u677e\uff0c\u66f4\u5f3a\u5927\u3002<\/font><font>\u5305\u542b\u5728React\u7ec4\u4ef6\u4e2d\uff0c\u60a8\u7684SVG\u5728\u9875\u9762\u5185\u8054\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528CSS\u8fdb\u884c\u6837\u5f0f\u5316\u3002<\/font><\/font>\n<\/p>\n<p>\n\t<font><font>\u6709\u5f88\u591a\u7c7b\u4f3c\u7684\u9879\u76ee\uff0c\u4f46\u6211\u60f3\u8981\u4e00\u4e9b\u66f4\u52a0\u575a\u5b9e\u548c\u53ef\u914d\u7f6e\u7684\u4e1c\u897f\u3002<\/font><font>SVGR\u57fa\u4e8e<\/font><\/font><a href=\"https:\/\/github.com\/smooth-code\/h2x\"><font><font>h2x<\/font><\/font><\/a><font><font>\uff0c\u4e00\u4e2a\u529f\u80fd\u5f3a\u5927\u4e14\u53ef\u914d\u7f6e\u7684HTML\u4f20\u8f93\u5668\u3002<\/font><font>\u5b83\u4f7f\u7528AST\uff08\u5982<\/font><\/font><a href=\"https:\/\/github.com\/babel\/babel\/\"><font><font>Babel<\/font><\/font><\/a><font><font>\uff09\uff0c\u8d4b\u4e88\u4e86\u5f88\u591a\u7684\u6743\u529b\u3002<\/font><\/font>\n<\/p>\n<p>\n\t<font><font><img decoding=\"async\" alt=\"SVGR\" src=\"http:\/\/ocuzluml6.bkt.clouddn.com\/svgr-logo.png\" style=\"width: 1000px;height: 1000px\" \/><\/font><\/font>\n<\/p>\n<h2>\n\t<font><font>\u547d\u4ee4\u884c\u7528\u6cd5<\/font><\/font><br \/>\n<\/h2>\n<p>\n\t\u8bed\u6cd5\uff1a\n<\/p>\n<pre class=\"brush:bash;\">\r\nsvgr [options] &lt;file&gt;<\/pre>\n<p>\n\t\u53c2\u6570\u8bf4\u660e\uff1a\n<\/p>\n<ul>\n<li>\n\t\t-V, &#8211;version &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;\u8f93\u51fa\u7248\u672c\u53f7\n\t<\/li>\n<li>\n\t\t-d, &#8211;out-dir &lt;dirname&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;\u5c06\u6587\u4ef6\u8f93\u51fa\u5230\u6307\u5b9a\u76ee\u5f55\u4e2d\n\t<\/li>\n<li>\n\t\t&#8211;no-svgo &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;\u7981\u7528svgo\n\t<\/li>\n<li>\n\t\t&#8211;no-prettier &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;\u7981\u7528 Prettier\n\t<\/li>\n<li>\n\t\t&#8211;template &lt;file&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;\u6307\u5b9a\u8981\u4f7f\u7528\u7684\u81ea\u5b9a\u4e49\u6a21\u677f\n\t<\/li>\n<li>\n\t\t&#8211;no-expand-props &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;\u7981\u7528 props expanding\n\t<\/li>\n<li>\n\t\t&#8211;icon &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \u4f7f\u7528&ldquo;1em&rdquo;\u7684\u5bbd\u5ea6\u548c\u9ad8\u5ea6\n\t<\/li>\n<li>\n\t\t&#8211;replace-attr-value [old=new] &nbsp; \u66ff\u6362\u5c5e\u6027\u503c\n\t<\/li>\n<li>\n\t\t-p, &#8211;precision &lt;value&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;\u8bbe\u7f6e\u5728\u5c0f\u6570\u90e8\u5206\u7684\u4f4d\u6570\uff08svgo\uff09\n\t<\/li>\n<li>\n\t\t&#8211;no-title &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \u5220\u9664\u6807\u9898\u6807\u7b7e (svgo)\n\t<\/li>\n<li>\n\t\t&#8211;tab-width &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;\u901a\u8fc7\u7f29\u8fdb\u7ea7\u522b\u6307\u5b9a\u7684\u7a7a\u683c\u6570 (prettier)\n\t<\/li>\n<li>\n\t\t&#8211;use-tabs &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \u7528\u5236\u8868\u7b26\u4ee3\u66ff\u7a7a\u683c\u7f29\u8fdb\u884c (prettier)\n\t<\/li>\n<li>\n\t\t&#8211;no-semi &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;\u5220\u9664\u5206\u53f7 (prettier)\n\t<\/li>\n<li>\n\t\t&#8211;single-quote &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \u4f7f\u7528\u5355\u5f15\u53f7\u4ee3\u66ff\u53cc\u5f15\u53f7 (prettier)\n\t<\/li>\n<li>\n\t\t&#8211;trailing-comma &lt;none|es5|all&gt; &nbsp;\u5728\u591a\u884c\u65f6\u5c3d\u53ef\u80fd\u6253\u5370\u5c3e\u968f\u9017\u53f7 (prettier)\n\t<\/li>\n<li>\n\t\t&#8211;no-bracket-spacing &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \u5728\u5927\u62ec\u53f7\u4e4b\u95f4\u7684\u7a7a\u95f4\u5bf9\u8c61\u7684\u6587\u5b57\u6253\u5370 (prettier)\n\t<\/li>\n<li>\n\t\t&#8211;jsx-bracket-same-line&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \u628a\u4e00\u4e2a\u591a\u884c\u7684JSX\u5143&gt;\u5728\u6700\u540e\u4e00\u5708\u4e0d\u662f\u72ec\u81ea\u4e00\u4eba\uff0c\u5728\u4e0b\u4e00\u884c (prettier)\n\t<\/li>\n<li>\n\t\t-h, &#8211;help &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \u8f93\u51fa\u5e2e\u52a9\u4fe1\u606f\n\t<\/li>\n<\/ul>\n<p>\n\t\u4e0b\u9762\u662f\u4e00\u4e2a\u4f8b\u5b50\uff1a\n<\/p>\n<pre class=\"brush:bash;\">\r\nsvgr --replace-attr-value &quot;#fff=currentColor&quot; icon.svg<\/pre>\n<h2>\n\t\u8f6c\u6362\u6574\u4e2a\u76ee\u5f55<br \/>\n<\/h2>\n<p>\n\t\u53ef\u4ee5\u5904\u7406\u6574\u4e2a\u76ee\u5f55\uff0c\u6240\u6709SVG\u6587\u4ef6\uff08\u5339\u914d.svg\u6216.SVG\uff09\u90fd\u5c06\u8f6c\u6362\u4e3aReact\u7ec4\u4ef6\u3002\n<\/p>\n<pre class=\"brush:bash;\">\r\n$ svgr -d icons icons<\/pre>\n<p>\n\t\u4f7f\u7528stdin\n<\/p>\n<pre class=\"brush:bash;\">\r\n$ svgr &lt; icons\/web\/wifi-icon.svg<\/pre>\n<p>\n\t\u4f7f\u7528stdin \/ stdout\n<\/p>\n<pre class=\"brush:bash;\">\r\n$ svgr &lt; icons\/web\/wifi-icon.svg &gt; icons\/web\/WifiIcon.js<\/pre>\n<h2>\n\t\u8f6c\u6362\u56fe\u6807<br \/>\n<\/h2>\n<p>\n\t\u8981\u521b\u5efa\u56fe\u6807\uff0c\u4e24\u4e2a\u9009\u9879\u5f88\u91cd\u8981\uff1a\n<\/p>\n<ul>\n<li>\n\t\t&#8211;icon\u6807\u9898\u88ab\u5220\u9664\uff0cSVG\u7ee7\u627f\u6587\u5b57\u5927\u5c0f\n\t<\/li>\n<li>\n\t\t&#8211;replace-attr-value &quot;#000000=currentColor&quot;\uff1a&ldquo;\uff03000000&rdquo;\u66ff\u6362\u4e3a&ldquo;currentColor&rdquo;\uff0cSVG\u7ee7\u627f\u6587\u672c\u989c\u8272\n\t<\/li>\n<\/ul>\n<p>\n\t\u4f8b\u5b50\uff1a\n<\/p>\n<pre class=\"brush:bash;\">\r\n$ svgr --icon --replace-attr-value &quot;#000000=currentColor&quot; my-icon.svg<\/pre>\n<h2>\n\t\u4f7f\u7528\u7279\u5b9a\u7684\u6a21\u677f<br \/>\n<\/h2>\n<p>\n\t<font><font>\u60a8\u53ef\u4ee5\u4f7f\u7528\u7279\u5b9a\u7684\u6a21\u677f\uff0c\u4f8b\u5982\u6a21\u677f\uff0c\u8bf7\u53c2\u9605<\/font><\/font><a href=\"https:\/\/github.com\/smooth-code\/svgr\/blob\/master\/src\/transforms\/wrapIntoComponent.js\"><font><font>\u9ed8\u8ba4<\/font><\/font><\/a><font><font>\u6a21\u677f<\/font><font>\u3002<\/font><\/font>\n<\/p>\n<pre class=\"brush:bash;\">\r\n$ svgr --template path\/to\/template.js my-icon.svg<\/pre>\n<h2>\n\t\u4f7f\u7528Node API<br \/>\n<\/h2>\n<p>\n\tSVGR\u4e5f\u53ef\u4ee5\u901a\u8fc7\u7f16\u7a0b\u65b9\u5f0f\u4f7f\u7528\uff1a\n<\/p>\n<pre class=\"brush:jscript;\">\r\nimport svgr from &#039;svgr&#039;\r\nconst svgCode = `\r\n&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;\r\n&lt;svg width=&quot;88px&quot; height=&quot;88px&quot; viewBox=&quot;0 0 88 88&quot; version=&quot;1.1&quot; \r\nxmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; xmlns:xlink=&quot;http:\/\/www.w3.org\/1999\/xlink&quot;&gt;\r\n    &lt;!-- Generator: Sketch 46.2 (44496) - http:\/\/www.bohemiancoding.com\/sketch --&gt;\r\n    &lt;title&gt;Dismiss&lt;\/title&gt;\r\n    &lt;desc&gt;Created with Sketch.&lt;\/desc&gt;\r\n    &lt;defs&gt;&lt;\/defs&gt;\r\n    &lt;g id=&quot;Blocks&quot; stroke=&quot;none&quot; stroke-width=&quot;1&quot; fill=&quot;none&quot; \r\n\tfill-rule=&quot;evenodd&quot; stroke-linecap=&quot;square&quot;&gt;\r\n        &lt;g id=&quot;Dismiss&quot; stroke=&quot;#063855&quot; stroke-width=&quot;2&quot;&gt;\r\n            &lt;path d=&quot;M51,37 L37,51&quot; id=&quot;Shape&quot;&gt;&lt;\/path&gt;\r\n            &lt;path d=&quot;M51,51 L37,37&quot; id=&quot;Shape&quot;&gt;&lt;\/path&gt;\r\n        &lt;\/g&gt;\r\n    &lt;\/g&gt;\r\n&lt;\/svg&gt;\r\n`\r\nsvgr(svgCode, { prettier: false }).then(jsCode =&gt; {\r\n  console.log(jsCode)\r\n})<\/pre>\n<h2>\n\t\u4f7f\u7528Webpack<br \/>\n<\/h2>\n<p>\n\tSVGR\u6709\u4e00\u4e2aWebpack\u52a0\u8f7d\u5668\uff0c\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4webpack.config.js\uff1a\n<\/p>\n<pre class=\"brush:jscript;\">\r\nmodule.exports = {\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: \/\\.svg$\/,\r\n        use: ['svgr\/webpack', 'babel-loader']\r\n      }\r\n    ]\r\n  }\r\n}<\/pre>\n<p>\n\t\u4e5f\u53ef\u4ee5\u6307\u5b9a\u9009\u9879\uff1a\n<\/p>\n<pre class=\"brush:jscript;\">\r\nmodule.exports = {\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: \/\\.svg$\/,\r\n        use: [\r\n          &#039;babel-loader&#039;,\r\n          {\r\n            loader: &#039;svgr\/lib\/webpack&#039;,\r\n            options: {\r\n              svgo: false\r\n            }\r\n          },\r\n        ]\r\n      }\r\n    ]\r\n  }\r\n}<\/pre>\n<p>\n\t\u9650\u4e8e\u7bc7\u5e45\uff0c\u672c\u6587\u5c31\u5230\u8fd9\u91cc\uff0c\u6211\u4eec\u660e\u5929\u7ee7\u7eed\u3002<\/p>\n<!-- <audio autoplay=\"autoplay\" height=\"100\" width=\"100\" hidden=\"true\"><source src=\"https:\/\/c.coka.la\/orAvPR.mp3\" type=\"audio\/mp3\"\/><\/audio><img decoding=\"async\" src=\"https:\/\/images.weserv.nl\/?url=https:\/\/ws3.sinaimg.cn\/large\/8fa5dcfcgy1g4em3rzar5j20ib089ae0.jpg\" alt=\"\u4e1a\u4f59\u8349\u516c\u4f17\u53f7\"\/> --><p><!-- <img decoding=\"async\" src=\"https:\/\/raw.githubusercontent.com\/xmt1139057136\/xttblog\/master\/8fa5dcfcgy1g4em3rzar5j20ib089ae0.jpg\" alt=\"\u4e1a\u4f59\u8349\u516c\u4f17\u53f7\"\/>--><img decoding=\"async\" src=\"https:\/\/saas.51autoparts.cn\/api\/admin\/sys-file\/oss\/file?fileName=84db51f8561e448f9a4fda2eff0811f9.jpg\" alt=\"\u4e1a\u4f59\u8349\u516c\u4f17\u53f7\"\/><\/p><p>\u6700\u540e\uff0c\u6b22\u8fce\u5173\u6ce8\u6211\u7684\u4e2a\u4eba\u5fae\u4fe1\u516c\u4f17\u53f7\uff1a\u4e1a\u4f59\u8349\uff08yyucao\uff09\uff01<b>\u53ef\u52a0\u4f5c\u8005\u5fae\u4fe1\u53f7\uff1a<font color=\"red\">xttblog2<\/font>\u3002\u5907\u6ce8\uff1a\u201c1\u201d\uff0c\u6dfb\u52a0\u535a\u4e3b\u5fae\u4fe1\u62c9\u4f60\u8fdb\u5fae\u4fe1\u7fa4\u3002\u5907\u6ce8\u9519\u8bef\u4e0d\u4f1a\u540c\u610f\u597d\u53cb\u7533\u8bf7\u3002<\/b>\u518d\u6b21\u611f\u8c22\u60a8\u7684\u5173\u6ce8\uff01\u540e\u7eed\u6709\u7cbe\u5f69\u5185\u5bb9\u4f1a\u7b2c\u4e00\u65f6\u95f4\u53d1\u7ed9\u60a8\uff01\u539f\u521b\u6587\u7ae0\u6295\u7a3f\u8bf7\u53d1\u9001\u81f3532009913@qq.com\u90ae\u7bb1\u3002\u5546\u52a1\u5408\u4f5c\u4e5f\u53ef\u6dfb\u52a0\u4f5c\u8005\u5fae\u4fe1\u8fdb\u884c\u8054\u7cfb\uff01<\/p><p>\u672c\u6587\u539f\u6587\u51fa\u5904\uff1a<a href=\"https:\/\/www.xttblog.com\">\u4e1a\u4f59\u8349<\/a>\uff1a &raquo; <a href=\"https:\/\/www.xttblog.com\/?p=2278\">SVGR \u6559\u7a0b<\/a><\/p><!-- <div class=\"bd-reward-stl\"><button id=\"bdRewardBtn\"><span><\/span><\/button><\/div> -->","protected":false},"excerpt":{"rendered":"<p>\u4e0a\u4e00\u7bc7\u6211\u4eec\u7b80\u5355\u7684\u4ecb\u7ecd\u4e86 SVGR \uff0c\u672c\u6587\u5c06\u6df1\u5165\u5b83\u7684\u4e00\u4e9b api \u8bbe\u8ba1\u548c\u5206\u6790\u4e00\u4e0b\u5b83\u7684\u5b9e\u73b0\u539f\u7406\u3002 React\u652f\u6301S [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[1106,1555,373,1563,1564],"class_list":["post-2278","post","type-post","status-publish","format-standard","hentry","category-html5","tag-javascript","tag-nodejs","tag-react","tag-svgr","tag-webpack"],"_links":{"self":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/2278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2278"}],"version-history":[{"count":1,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/2278\/revisions"}],"predecessor-version":[{"id":2279,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/2278\/revisions\/2279"}],"wp:attachment":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}