SVG Sprite

一、Sprite技术

Sprite技术，类似于CSS中的Sprite技术。图标图形整合在一起，实际呈现的时候准确显示特定图标。

二、SVG Sprite与symbol元素

SVG Sprite最佳实践是使用symbol元素。symbol元素是什么呢，可以翻译成元件
对于一个集合了两个SVG图标的SVG元素的代码结构会是这样：

三、SVG中的use元素

use元素是SVG中非常强大，非常重要的一个元素，尤其在Web开发中
两点：

1. 可重复调用；
2. 跨SVG调用；

1. 可重复调用

2. 跨SVG调用

SVG中的use元素可以调用其他SVG文件的元素，只要在一个文档中。

symbol + use => SVG Sprite

. 四 react loadSprite 例子

// inspried by https://github.com/kisenka/svg-sprite-loader/blob/master/runtime/browser-sprite.js
// Much simplified, do make sure run this after document ready
const svgSprite = contents => `
  
`;

// both minified by https://github.com/svg/svgo
const icons = {
  check:
    '',
};


const renderSvgSprite = () => {
  const symbols = Object.keys(icons)
    .map((iconName) => {
      const svgContent = icons[iconName].split('svg')[1];
      console.log('svgContent', svgContent);
      return ``;
    })
    .join('');
  return svgSprite(symbols);
};

const loadSprite = () => {
  /* istanbul ignore if */
  if (!document) {
    return;
  }
  const existing = document.getElementById('__ANTD_MOBILE_SVG_SPRITE_NODE__');
  const mountNode = document.body;

  if (!existing) {
    mountNode.insertAdjacentHTML('afterbegin', renderSvgSprite());
  }
};

export default loadSprite;