Vuetifyの v-icon
component により、メインストリーム マテリアルデザインアイコン を使用することは、次のように非常に簡単です。
<v-icon>home</v-icon>
アニメーションマテリアルアイコン がサポートされており、Vuetifyでも同様の方法で使用できるかどうかを考えます。可能であれば、CSSコードなどの行を追加する必要はありません。
examples では、Font Awesomeでのfa-spin
の使用に気づきました。それでも範囲外です。私はGoogleのマテリアルアイコンライブラリに縛られています。
EDIT:私が必要とする特定の種類の動作は、transitionsセクションのビデオの例にあります:- https://material.io/design/iconography/animated-icons.html# [クリックすると、play
ボタンがpause
になり、アニメーションがスムーズになります]をご覧ください。
短い答えはノーです。 v-icon
要素は現在、Webフォントからアイコンをレンダリングします。フォントはこの方法ではアニメーション化できません。シンプルなフェード、スピン、スケール、フリップのアニメーションを適用して、2つのアイコン間のシンプルなトランジションを実現できますが、 マテリアルガイドライン でリンクした複雑なトランジションには、さらに多くの作業が必要です。
公式アイコンセット および コミュニティ主導アイコンセット から利用できるインラインSVGアイコンを使用し、CSSアニメーション、SMIL、またはJavaScriptを使用してそれらの間でアニメーション化することをお勧めします。