react中优雅使用svg矢量图

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文件
...
//下面使用
 <svg><use xlink:href="#bank"></use></svg>
复制代码

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

let require = requireContext => requireContext.keys().map(requireContext)
let svgs = require.context('./', false, /\.svg$/)
require(svgs)
复制代码

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