Nexmoe 主题是一个用 MDUI 框架做的主题，用的图标理所当然是自带的 Material 图标。

『人类总是喜新厌旧的』
—— 某著名心理学家如是说

著名心理学家是谁不重要，有没有说过这句话更不重要。重要的是 Material 的一些图标看久了真的有一点点不好看。所以最近用空闲时间做了一些带小动画的 SVG 图标，想着逐步替换掉现在的静态图标。

没看清楚？没关系，Gif 动画跟代码都已经放在了 Github 里面，直接 Ctrl + C ，Ctrl + V 就好了。

如果想要把这些 SVG 放到您的网站里面，建议把 SVG 的 width 跟 height 的大小设置成大于 30 ，不然边框会有点看不清。当然你也可以把 stroke-width 改得大一点。

有些帅气的同学可能会问：那想自己做一个会动的图标呢？

先在 Figma 里面画一个图标，导出为 SVG。然后给要加动画的 SVG 元素添加一个 &ltanimate&gt 就好了。

<animate attributeName="/*要改变的样式*/" begin="/*开始时间*/" dur="/*持续时间*/" values="/*开始的值*/ ; /*结束的值*/" calcMode="spline" keySplines="/*bezier控制点*/"/>

SVG 的元素，有的元素可能是 <path> ，你可以把 <animate> 放到 <path> 里面，你就可以做出动画了知道吧。 <circle> 也可以，你只要把 <animate> 框住就好了，更简单。(...)没有别的事情需要你担心的，就你不需要做心算，不需要做算数题什么的，也不需要充钱，你直接框住就可以了，没有那么多别的事情需要你担心的。
—— 由 B 站 Apex 区圣经 改编

当然，如果你实在是不想要自己画图标的话，可以在 这里 找到想要的图标。

非常简单是吧，跟 CSS 的动画原理别无二致。如果我们想添加 Transform 动画就需要用这个

<animateTransform attributeName="/*Transform 样式*/" type="/*Transform 内容（translate之类的东西）*/" begin="/*开始时间*/" dur="/*持续时间*/" values="/*开始的值*/ ; /*结束的值*/" calcMode="spline" keySplines="/*bezier控制点*/"/>

我们很容易就做出一个有描边动画的圆圈：

<svg width="50" height="50" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50.5" cy="50.5" r="31" stroke-width="5" fill="transparent" stroke-dasharray="195" stroke-linecap="round">
        <animate attributeName="stroke" begin="0s" values="transparent; #9A9EA1" dur=".5s" fill="freeze" calcMode="spline" keySplines="0.42, 0, 0.56, 1"/>
        <animate attributeName="stroke-dashoffset" begin="0s" values="195; 0" dur="1s" fill="freeze" calcMode="spline" keySplines="0.42, 0, 0.56, 1"/>
    </circle>
</svg>

需要注意的一点是： SVG 的 transform-origin: center 在苹果系统中会有点问题。（ It has no effect on transformations applied using the transform SVG attribute），目前好像没有什么好用的解决办法。

目前可以在 顶部弹下来的 SnackBar 、评论人机验证成功的时候、评论检测到广告词的时候（在评论框写下 『包单』 二字，再点击提交按钮即可触发）看到替换后的效果。人机验证为了正常显示动画 SVG 又做了一点点逻辑修改，这次肯定没有写出 BUG ！（大声 BB