SVGR 教程

HTML5 herman 1676浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

上一篇我们简单的介绍了 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                禁用 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
            }
          },
        ]
      }
    ]
  }
}

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

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » SVGR 教程