请选择你的SVG图标

页面内调用方法

<!-- 直接嵌入 SVG -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
   <symbol id="icon-archive" viewBox="0 0 24 24">
        <path d="M2 5c0-.943 0-1.414.293-1.707S3.057 3 4 3h16c.943 0 1.414 0 1.707.293S22 4.057 22 5s0 1.414-.293 1.707S20.943 7 20 7H4c-.943 0-1.414 0-1.707-.293S2 5.943 2 5"></path>
   </symbol>
   <symbol id="icon-avatar" viewBox="0 0 24 24">
      <path d="M 22 12 C 22 17.523 17.523 22 12 22 C 6.477 22 2 17.523 2 12 C 2 6.477 6.477 2 12 2 C 17.523 2 22 6.477 22 12"></path>
  </symbol>
</svg>

<!-- 使用图标 -->
<svg class="icon">
   <use xlink:href="#icon-archive"></use>
</svg>
<svg class="icon">
   <use xlink:href="#icon-avatar"></use>
</svg>

文件引用

<!-- 在其他地方使用图标 -->
<svg class="icon">
    <use xlink:href="tool_lvtao_net_svg_merged.svg#icon-archive"></use>
</svg>
 <svg class="icon">
    <use xlink:href="tool_lvtao_net_svg_merged.svg#icon-avatar"></use>
</svg>

在 CSS 中作为背景图像使用

.icon-archive {
    width: 24px;
    height: 24px;
    background: url('tool_lvtao_net_svg_merged.svg#icon-archive') no-repeat center/contain;
}

.icon-avatar {
    width: 24px;
    height: 24px;
    background: url('tool_lvtao_net_svg_merged.svg#icon-avatar') no-repeat center/contain;
}

<div class="icon-archive"></div>
<div class="icon-avatar"></div>