Java基础、中级、高级、架构面试资料
    你的位置：业余草 > HTML5 > SVGR 教程

    SVGR 教程

    HTML5 herman 6007浏览 0评论
    公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
    本博客日IP超过2000，PV 3000 左右，急需赞助商。
    极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
    受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
    所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
    视频教程免费领
    腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

    上一篇我们简单的介绍了 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）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

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

    相关文章推荐