SVGR 教程

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

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

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

命令行用法

语法：

svgr [options] <file>

参数说明：

• -V, –version                    输出版本号
• -d, –out-dir <dirname>          将文件输出到指定目录中
• –no-svgo                        禁用svgo
• –no-prettier                    禁用 Prettier
• –template <file>                指定要使用的自定义模板
• –no-expand-props                禁用 props expanding
• –icon                           使用“1em”的宽度和高度
• –replace-attr-value [old=new]   替换属性值
• -p, –precision <value>          设置在小数部分的位数（svgo）
• –no-title                       删除标题标签 (svgo)
• –tab-width                      通过缩进级别指定的空格数 (prettier)
• –use-tabs                       用制表符代替空格缩进行 (prettier)
• –no-semi                        删除分号 (prettier)
• –single-quote                   使用单引号代替双引号 (prettier)
• –trailing-comma <none|es5|all>  在多行时尽可能打印尾随逗号 (prettier)
• –no-bracket-spacing             在大括号之间的空间对象的文字打印 (prettier)
• –jsx-bracket-same-line             把一个多行的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

使用特定的模板

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

$ 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="0 0 88 88" version="1.1" 
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.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-width="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$/,
        use: [
          'babel-loader',
          {
            loader: 'svgr/lib/webpack',
            options: {
              svgo: false
            }
          },
        ]
      }
    ]
  }
}

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

： » SVGR 教程