一、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开发中
两点：
- 可重复调用；
- 跨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;
