下载(download)和正在下载(downloading)的图标

下载

代码

<svg width="1em" height="1em" viewBox="0 0 24 24" focusable="false" data-icon="download" fill="currentColor"
    aria-hidden="true">
    <polyline points="3,15 3,20.5 21,20.5 21,15" fill="none" stroke="currentColor" stroke-width="2"
      stroke-linejoin="round" />

    <g>
      <line x1="12" y1="3" x2="12" y2="14" stroke="currentColor" stroke-width="2" />
      <polygon points="8.5,12 12,16.5 15.5,12" fill="currentColor" />
      <!-- <animateTransform attributeName="transform" type="translate" values="0 0;0 16;0 0" keyTimes="0;0.8;1"
        keySplines="0.42 0 1 1;0 0 0 0" calcMode="spline" dur="3s" repeatCount="indefinite" /> -->
      <!-- <animate attributeName="opacity" values="1;0;1" dur="3s" repeatCount="indefinite" keyTimes="0;0.8;1"
        keySplines="0.42 0 1 1;0 0 0 0" calcMode="spline" /> -->
    </g>
</svg>

正在下载

<svg width="1em" height="1em" viewBox="0 0 24 24">
    <!-- 旋转的进度圆圈 -->
    <circle class="progress-ring" cx="12" cy="10" r="9" fill="none" stroke="currentColor" stroke-width="2"
      stroke-dasharray="9.5, 9.4" stroke-linecap="round">
      <!-- 添加SVG animateTransform动画 -->
      <animateTransform attributeName="transform" type="rotate" from="0 12 10" to="360 12 10" dur="1.5s"
        repeatCount="indefinite" />
    </circle>
    <line x1="4" y1="22" x2="20" y2="22" stroke="currentColor" stroke-width="2" />
    <!-- 下载箭头 -->
    <g>
      <line x1="12" y1="5" x2="12" y2="12" stroke="currentColor" stroke-width="2" />
      <polygon points="8.5,10 12,14.5 15.5,10" fill="currentColor" />
    </g>
</svg>