react中优雅使用svg矢量图

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

一、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的标准中去了，历时这么久终于到了该翻身的时候了。

二、通常页面中如何使用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是否能够做为模块引入呢。答案下面揭晓。

三、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",
    ]
复制代码

便可实现。文笔粗浅，若有不懂，欢迎留言！！！