CODE大全
您的位置 : 首页 > 前端技术 >

SVGR 教程

发布时间:『 2018-01-22

上一篇我们简单的介绍了 SVGR ,本文将深入它的一些 api 设计和分析一下它的实现原理。

React支持SVG开箱即用,使组件代替SVG文件更简单,更轻松,更强大。包含在React组件中,您的SVG在页面内联,您可以使用CSS进行样式化。

有很多类似的项目,但我想要一些更加坚实和可配置的东西。SVGR基于h2x,一个功能强大且可配置的HTML传输器。它使用AST(如Babel),赋予了很多的权力。

SVGR

命令行用法

语法:

svgr [options] <file>

参数说明:

-V, –version                    输出版本号 -d, –out-dir <dirname>          将文件输出到指定目录中 –no-svgo                        禁用svgo –no-prettier                    禁用 Prettier –template <file>                指定要使用的自定义模板 –no-expand-props   &nbshttp://www.bdx-leb.com/f924/8ffe2fcae883.htmlp;            禁用 props expandhttp://www.bdx-leb.com/2029/94c0d9cb5b42.htmling –icon                           使用“1em”的宽度和高度 –replace-attr-value [old=new]   替换属性值 -p, –precision <value>          设置在小数部分的位数(svgo) –no-title                       删除标题标签 (svgo) –tab-width       http://www.bdx-leb.com/93d7/c7b541fd3539.html               通过缩进级别指定的空格数 (prettier) –use-tabs                       用制表符代替空格缩进行 (prettier) –no-semi                        删除分号 (prettier) –single-quote                   使用单引号代替双引号 (prettier) –trailing-comma <none|es5|all>  在多行时尽可能打印尾随逗号 (prettier) –no-bracket-spacing             在大括号之间的空间对象的文字打印 (prettier) –jsx-bracket-same-line           &nhttp://www.bdx-leb.com/379d/8cca8c9f5f8c.htmlbsp; 把一个多行的JSX元>在最后一圈不是独自一人,在下一行 (prettier) -h, –help                       输出帮助信息

下面是一个例子:

svgr --replace-attr-value "#fff=currentColor" icon.svg

转换整个目录

可以处理整个目录,所有SVG文件(匹配.svg或.SVG)都将转换为React组件。

$ svgr -d icons icons

使用stdin

$ svgr < icons/web/wifi-icon.svg

使用stdin / stdout

$ svgr < icons/web/wifi-icon.svg > icons/web/WifiIcon.js

转换图标

要创建图标,两个选项很重要:

–icon标题被删除,SVG继承文字大小 –replace-attr-value "#000000=currentColor":“#000000”替换为“currentColor”,SVG继承文本颜色

例子:

$ svgr --icon --replace-attr-value "#000000=currentColor" my-icon.svg

http://www.bdx-leb.com/e9ef/1682c292a1db.html 使用特定的模板

您可以使用特定的模板,例如模板,请参阅默认模板

$ svgr --template path/to/template.js my-icon.svg

使用Node API

SVGR也可以通过编程方式使用:

import svgr from 'svgr'
const svgCode = `
<?xml version="1.0" encoding="UTF-8"?>
<svg width="88px" height="88px" viewBox=http://www.bdx-leb.com/d6d2/e256505a9af3.html"0 0 88 88" version="1.1" 
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3http://www.bdx-leb.com/726d/2c5b89d786b4.html.org/1999/xlink">
    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
    <title>Dismiss</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Blocks" stroke="none" stroke-width="1" fill="none" 
	fill-rule="evenodd" stroke-linecap="square">
        <g id="Dismiss" stroke="#063855" stroke-widthttp://www.bdx-leb.com/6864/27d2416a3db5.htmlh="2">
            <path d="M51,37 L37,51" id="Shape"></path>
            <path d="M51,51 L37,37" id="Shape"></path>
        </g>
    </g>
</svg>
`
svgr(svgCode, { prettier: false }).then(jsCode => {
  console.log(jsCode)
})

使用Webpack

SVGR有一个Webpack加载器,可以使用以下命令webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['svgr/webpack', 'babel-loader']
      }
    ]
  }
}

也可以指定选项:

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        usehttp://www.bdx-leb.com/2eba/e81c5cdf187d.html: [
          'babel-loader',
          {
            loader: 'svgr/lib/webpack',
            options: {
         http://www.bdx-leb.com/5e79/50fb947be922.html     svgo: false
            }
          },
        ]
      }
    ]
  }
}

限于篇幅,本文就到这里,我们明天继续。


——— 全文完 ———
Powered by 张鑫旭 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 张鑫旭 版权所有