Applying spin and sizing

[benr77]

Previously I used Vuetify and inserted an icon like

<v-icon>loading mdi-spin mdi-36px</v-icon

Now I'm using this library and doing

import { mdiLoading } from '@mdi/js';

The icon itself is working just fine.

Is it possible to attach the spin and size modifications when using the icons in this way?

Thank you

[Templarian]

https://dev.materialdesignicons.com/getting-started/vuejs

Documented above. You want to use the component documented above. It's made by one of our core members, so it might move into @mdi/* when I get a second.

[benr77]

Thank you for your response. For future reference, I actually went a different direction - the package you referred me to does not seem to support spin and sizing any more than Vuetify's <v-icon> does, and seems to duplicate the Vuetify functionality. I admit I spent only a very short time assessing this so could easily be wrong.

Instead, I just went for some raw CSS based on https://stackoverflow.com/a/42745673/3877234

.icon-spinner {
    animation: spin-animation 1.5s infinite;
    display: inline-block;
}

@keyframes spin-animation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

Followed by the component

<v-icon class="icon-spinner" x-large>{{ iconLoading }}</v-icon>

This solution is pretty lightweight, configurable, and should work with any icon pack.