使用图标

<use> 元素通常用于与 <symbol> 元素协作的可重复使用的图标。看起来像这样：

<svg>
    <symbol viewBox="0 0 16 16" id="icon-star">
        <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
    </symbol>
</svg>

而 <use> 元素：

<svg>
    <use xlink:href="#icon-star"/>
</svg>

<use> 元素复制 <symbol> 并显示它。你还可以在 <symbol> 上覆盖各个 <use> 元素上的样式，例如

<style>
    .red {
        fill: red;
    }
</style>

<svg>
    <use class="red" xlink:href="#icon-star"/>
</svg>