SVG Sprite

一、Sprite技术

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

二、SVG Sprite与symbol元素

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

<svg>
    <symbol>
        <!-- 第1个图标路径形状之类代码 -->
    </symbol>
    <symbol>
        <!-- 第2个图标路径形状之类代码 -->
    </symbol>
</svg>

三、SVG中的use元素

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

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

1. 可重复调用

<svg>
  <defs>
    <g id="shape">
        <rect x="0" y="0" width="50" height="50" />
        <circle cx="0" cy="0" r="50" />
    </g>
  </defs>

  <use xlink:href="#shape" x="50" y="50" />
  <use xlink:href="#shape" x="200" y="50" />
</svg>

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 => `
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    id="__ANTD_MOBILE_SVG_SPRITE_NODE__"
    style="position:absolute;width:0;height:0"
  >
    <defs>
      ${contents}
    </defs>
  </svg>
`;

// both minified by https://github.com/svg/svgo
const icons = {
  check:
    '<svg viewBox="0 0 44 44"><path fill-rule="evenodd" d="M34.538 8L38 11.518 17.808 32 8 22.033l3.462-3.518 6.346 6.45z"/></svg>',
};


const renderSvgSprite = () => {
  const symbols = Object.keys(icons)
    .map((iconName) => {
      const svgContent = icons[iconName].split('svg')[1];
      console.log('svgContent', svgContent);
      return `<symbol id=${iconName}${svgContent}symbol>`;
    })
    .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;