NexmoeテーマはMDUIフレームワークで作られたテーマで、使われているアイコンは当然のことながら同梱のMaterialアイコンです。

『人間はいつも新しいものを好み、古いものを飽きる』 —— ある有名な心理学者がそう言ったそうです

有名な心理学者が誰かは重要ではなく、その言葉を本当に発言したかどうかも重要ではありません。重要なのは、Materialアイコンを長く見ているとどうしても審美疲労を感じてしまうことです。そこで最近、空き時間を使って小さなアニメーション付きのSVGアイコンをいくつか作り、現在使っている静的アイコンを段階的に置き換える計画を立てました。

はっきり見えなかった？大丈夫です、GifアニメーションとコードはすでにGithubに置いてあるので、Ctrl + C、Ctrl + VするだけでOKです。

もしこれらのSVGを自分のサイトに配置したい場合は、SVGのwidthとheightを30以上に設定することをおすすめします。そうでないと枠線が少し見づらくなります。もちろんstroke-widthを大きくすることもできます。

かっこいいあなたはこう聞くかもしれません：「じゃあ、自分で動くアイコンを作りたい場合はどうすればいいの？」

まずFigmaでアイコンを描いて、SVGとしてエクスポートします。そして、アニメーションを追加したいSVG要素に&ltanimate&gtを追加するだけです。

もちろん、どうしても自分でアイコンを描きたくない場合は、ここで好きなアイコンを見つけることができます。

とても簡単ですよね。実はCSSアニメーションの原理と似ています。要素にTransformアニメーションを追加したい場合は、以下のコードを使えます：

例えば、簡単にストロークアニメーション付きの円を作ることができます：

[!NOTE] 注意すべき点が1つあります：SVGのtransform-origin: centerはApple系システムで少し問題があります。（It has no effect on transformations applied using the transform SVG attribute）。現在のところ、良い解決策はないようです。

これで、上部に表示されるSnackBar、コメントの認証成功時、コメント欄で不適切な単語を検出した際（コメント欄に『包单』と入力して送信ボタンをクリック）に、置き換えられたアニメーション効果を見ることができます。認証ボットはアニメーションSVGを正しく表示するために、少しだけロジックを修正しました。今度こそバグを書いてないはずです！（大声で言い張る