演示环境

Node.js：3.3.4
Sass：1.63.6
element-plus：2.3.7

效果预览

ps：前段时间在做大屏系统的时候，客户要求把加载图标做成他们的logo、而且要有动画，看起来高大上；我脑子里有两种方案：自定义Loading组件（推荐）、魔改Elenet Plus，但是我比较懒，所以选择了后者，哈哈哈哈！然后就有了这篇文章，或许对你们有帮助、讲不好哪天也能用上。

开始

关于自定义加载图标 饿了么官方文档是这样说到：

所以，我们要用自己图标就要准备一个SVG文件、图片文件、GIF文件，并且提前制作好

ps：Element Plus的加载自带一个旋转动画，所以使用自己的GIF加载图标时需要关闭动画（下面会介绍方法）

加载图标制作

因为我的PS宕机了，就随便找了个：SVG在线编辑器-矢量图制作

1、定义画布

ps：需要根据实际情况来设置画布大小，这里只是演示

2、编辑内容

3、下载文件

ps：导出的SVG不是用PATH绘制的文字，所以我们选择导出PNG后用工具转换为SVG

下载完成：

4、将PNG文件转换为SVG文件

使用网上的在线工具将PNG文件转换为SVG文件：

直接导出SVG的内容：

导出PNG，再转换成SVG后的内容（纯PATH绘制的、方便我们应用动画）：

加载图标动画测试

ps：在运用到项目前，我们需要写一个测试页面来测试SVG的内容是否正常、还有动画效果预览

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>SVG-描边动效测试</title>
  <style>
    body {
      background: #f1f1f1;
    }

    path {
      /* 描边线颜色 */
      stroke: #d80d0d;
      /* 去掉背景色 */
      fill: none;
      /* 描边路径长度，一般用js获取 */
      /* 如果用css来定义，建议要大于或等于最长PATH的长度 */
      stroke-dasharray: 500;
      stroke-dashoffset: 500;
      /* 描边动画 */
      animation: dash 3s linear infinite;
    }

    /* 动画定义 */
    @keyframes dash {
      to {
        stroke-dashoffset: 0;
      }
    }
  </style>
</head>

<body>
  <!-- 标题 -->
  <h2>SVG-描边动效测试</h2>

  <hr>

  <!-- SVG - 自定义加载图标 -->
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="40px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
      <path style="opacity:0.499" fill="#000000"
        d="M 9.5,10.5 C 11.288,10.2148 12.9547,10.5481 14.5,11.5C 13.5721,12.7678 13.4054,14.1011 14,15.5C 16.7656,12.0194 20.2656,10.5194 24.5,11C 21.6247,14.0441 18.6247,16.8774 15.5,19.5C 16.7885,22.5802 18.4552,25.4136 20.5,28C 19.0696,29.4404 17.403,29.7737 15.5,29C 13.6227,26.7487 12.1227,24.2487 11,21.5C 10.2652,23.8713 9.43185,26.2046 8.5,28.5C 7.31116,29.4287 5.97782,29.762 4.5,29.5C 5.96094,23.1164 7.6276,16.7831 9.5,10.5 Z" />
    </g>
    <g>
      <path style="opacity:0.542" fill="#000000"
        d="M 46.5,10.5 C 48.1667,10.5 49.8333,10.5 51.5,10.5C 51.2123,16.2289 51.5456,21.8955 52.5,27.5C 48.8799,30.4949 47.2133,29.4949 47.5,24.5C 45.1432,24.3367 42.8098,24.5034 40.5,25C 39.3204,26.8961 37.8204,28.3961 36,29.5C 34.9412,29.3699 34.1079,28.8699 33.5,28C 37.9643,22.2262 42.2977,16.3929 46.5,10.5 Z M 46.5,16.5 C 47.4511,17.9187 47.7845,19.5853 47.5,21.5C 46.1266,21.6567 44.7932,21.49 43.5,21C 44.3862,19.3853 45.3862,17.8853 46.5,16.5 Z" />
    </g>
    <g>
      <path style="opacity:0.557" fill="#000000"
        d="M 73.5,10.5 C 77.9971,9.94451 82.1638,10.6112 86,12.5C 85.9851,16.5594 84.1518,19.7261 80.5,22C 82.4545,24.1684 83.1212,26.5017 82.5,29C 81.5,29.6667 80.5,29.6667 79.5,29C 77.8767,26.9205 76.3767,24.7538 75,22.5C 73.8362,24.6488 72.6695,26.8154 71.5,29C 69.9262,29.6987 68.5929,29.3654 67.5,28C 69.7983,22.2718 71.7983,16.4385 73.5,10.5 Z M 77.5,13.5 C 78.9778,13.238 80.3112,13.5713 81.5,14.5C 80.4118,16.9648 78.5785,18.6314 76,19.5C 75.9637,17.4278 76.4637,15.4278 77.5,13.5 Z" />
    </g>
    <g>
      <path style="opacity:0.594" fill="#000000" d="M 105.5,10.5 C 107.199,10.3398 108.866,10.5065 110.5,11C 108.332,16.0032 106.666,21.1698 105.5,26.5C 108.572,26.1826 111.572,26.5159 114.5,27.5C 110.518,28.2979 106.518,28.9646 102.5,29.5C 101.263,29.4435 100.263,28.9435 99.5,28C 101.802,22.2601 103.802,16.4267 105.5,10.5 Z" />
    </g>
  </svg>
</body>

</html>