兩個重要的 tag
<symbol><use><!-- myicons.svg -->
<!-- 必要的 attr? -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- 每个 symbol 元素都有 id、 viewBox 属性 -->
<symbol viewBox="0 0 24 24" id="heart">
<!-- 可以给每个图标添加一个 <title> 标签，提升它的可访问性 -->
<title>Heart</title>
<path fill="#E86C60" d="..."></path>
<path fill="#E86C60" d="..."></path>
</symbol>
<symbol viewBox="0 0 32 32" id="arrow">
<title>Arrow</title>
<path fill="#0f0f0f" d="..."></path>
</symbol>
</svg>
<!-- html 使用 -->
<svg>
<use xlink:href="img/myicons.svg#heart"/>
</svg>
<use> 引用IE 中不行通过 引用外部 SVG 文件，Edge 可以。
定義在 body 中可省略 "xmlns" "xmlns:xlink" 屬性，但記得 "style="display: none"，否則 <svg> 會佔有空間
<svg style="display: none;"> <!-- this is our svg sprite -->
<symbol viewBox="0 0 24 24" id="heart">
<path fill="#E86C60" d="..."></path>
</symbol>
<symbol viewBox="0 0 32 32" id="arrow"> <!-- ... --> </symbol>
</svg>
<svg> <use xlink:href="#heart"/></svg>
注意 use xlink:href 属性对应 symbol id（不能引用外部资源）。
缺点是 SVG sprite 不能缓存
"svgxuse" polyfill 會遍历文档中的 <use> 元素，
如果它引用的是「浏览器无法加载的外部 SVG 文件」，
它就在外部 SVG 中抓取，并预置到文档中的<body> 中
下载这个 polyfill，在文档中引入即可
给 SVG <use> 元素添加样式需要一点技巧，因為它有自己獨特的 DOM 结构（也就是 shadow DOM），CSS 选择器并不能获取。
若 SVG 没有行內樣式，它们会继承父级元素，这样你可以直接使用 CSS 选择器修改 SVG 属性。
<!-- html -->
<svg class="icon myClass">
<use xlink:href="img/myicons.svg#heart"></use>
<svg>
// css
.myClass {
fill: red;
}
https://www.w3cplus.com/svg/how-to-create-an-icon-system-using-svg-symbols.html