react中优雅使用svg矢量图

16,056 阅读4分钟

icon图标可以有很多形式.比如说CSS Sprite、引用字体图标、纯css(简单的icon)等等。 优缺点这里不在赘述,自行google之。下面就进入正题说说今天的主角svg。

1、svg的发展历史

  • 2001年9月4日,发布SVG 1.0
  • 2003年1月4日,发布SVG 1.1
  • 2003年1月14日,推出SVG移动子版本:SVG Tiny和SVG Basic
  • 2008年12月22日,發布SVG Tiny 1.2
  • 2011年8月16日,發布SVG 1.1(第2版),成为W3C目前推荐的标准
  • W3C目前仍正在研究制定SVG 2

他在2001年就已经被加入到W3C的标准中去了,历时这么久终于到了该翻身的时候了。

2、一般页面中如何使用svg

SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真。SVG 文件可以直接插入网页,成为 DOM 的一部分,然后用 JavaScript 和 CSS 进行操作。

  • 下面是 SVG 代码直接插入网页的例子。
<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" style="fill:blue;stroke-width:2;stroke:rgb(0,0,0)"/>
</svg>

效果如下:

可以看到svg的简单实用,和展示效果。那么react中如何使用svg呢。重复使用的svg是否可以作为模块引入呢。答案下面揭晓。

3、react中如何使用svg

其实也可以像上面那样去使用svg,但是问题来啦。重复的svg要代码拷贝粘贴?后期维护和修改就有无尽的麻烦。于是就想到了组件化。如何组件话呢。svg结合use标签就登上了舞台。不直接在主页面中编写绘制svg图标的代码,而是把这一大段的代码放到另外的文件中,然后使用 use引用这段绘制图标的代码即可(好像github就是这样做的)。

先啰嗦一下,实现的原理吧。 看代码

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0" id="__SVG_SPRITE_NODE__">
    <symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon" viewBox="0 0 1024 1024" id="bank">
    <defs><style type="text/css"></style></defs>
    <rect width="100%" height="100%" style="fill:rgb(153, 238, 172);stroke-width:2;stroke:rgb(0,0,0)"></rect>    
    </symbol>
</svg>

如何使用

    <svg><use xlink:href="#bank"></use></svg>

symbol中的id和use中的href要对应才行

这样就能显示上面的svg

所以总结一下:

  1. react 项目中单独存放svg文件
  2. 可以提前加载,也可以按需加载
  3. 使用的使用和上面一样

虽然说可以使用但是如果直接引用可能打包报错或者不显示,常见原因:

  1. webpack配置文件处理图片或者字体的loader中含有svg的处理。
  2. svg使用姿势不正确 处理方法:我认为svg-sprite-loader比较好用,当然处理svg的loader还有react-svg,react-svg-loader。如需了解google一下就知道

webpack.config.js

{
      test: /\.(eot|woff2?|ttf|svg)$/,
      exclude: path.resolve(__dirname, '../src/static/icons'), //不处理指定svg的文件
      use: [
        {
          loader: "url-loader",
          options: {
            name: "[name]-[hash:5].min.[ext]",
            limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
            outputPath: "font",
            publicPath:'font'
          }
        }
      ]
}

{
      test: /\.svg$/,
      loader: 'svg-sprite-loader',
      include: path.resolve(__dirname, '../src/static/icons'), // //只处理指定svg的文件
      // options: {
      //   symbolId: '[name]'
      // }
}

前方高能

上面配置以后直接可以在组件中

import '../../static/icons/bank'; //引入对应的bank.svg文件
...
//下面使用  需要把xlink:href 替换xlinkHref
 <svg><use xlinkHref="#bank"></use></svg>

如果icon很多每次都需要import ,对于一个懒人来说有点烦躁,不过下面的方式可以帮你一次全部引入 在对应的icons文件下建index.js

let requireAll = requireContext => requireContext.keys().map(requireContext)
let svgs = require.context('./', false, /\.svg$/)
requireAll(svgs)

直接引入index.js之后所有组件都能开心的使用所有svg。当然默认id是文件名。

注意:

如果你不想一次性全部引入所有svg,懒加载同样可行

npm install @babel/plugin-syntax-dynamic-import --save-dev
...
//在.babelrc中plugins加上
"plugins": [
        "@babel/plugin-syntax-dynamic-import",
    ]

即可实现。文笔粗浅,如有不懂,欢迎留言!!!