Question about Vuetify's custom icon alias implementation

[cojohnson1999]

Hi there,

The project I've been using Vuetify on (loving the library so far 😄) has been taking advantage of Vuetify's support for custom icon aliases for a while with MDI as shown in the docs. While providing icons this way and using them throughout our application with the "$icon" syntax has worked well, I feel that it's a bit lacking when you need to rename/refactor an icon. If you want to do so, you need to rename the alias, then manually go and search for then rename every usage of it throughout the application. We also don't get any Intellisense for the icon aliases either, since all of the icon aliases are provided by Vuetify through strings.

So... with that in mind, I thought about providing our icon aliases in a TS object to improve on some of those negatives. That object looks like the following:

import {
  mdiAccountCircle,
  mdiAccountGroup,
  mdiAlert,
  ...
} from '@mdi/js';

const Icons = {
  accountCircle: mdiAccountCircle,
  accountGroup: mdiAccountGroup,
  alert: mdiAlert,
  ...
};

export default Icons;

And then use that object in our components like this:

<template>
  <v-icon :icon="Icons.icon" />
</template>

The TS Icons object gives us better reusability and makes refactoring a lot easier, but I'm not sure if it has any performance ramifications compared to aliasing them through Vuetify, since I don't know if Vuetify does anything special with icon aliases besides registering them as "$customIcon" strings for use in components.

All that to say, does Vuetify provide icon aliases with treeshaking or any other performance improvements? Obviously needing to compute all of our icons when doing icon="$icon" vs. :icon="Icons.icon" is a bit of a performance hit, but I don't know if Vuetify's backend implementation would have any other improvements aside from that.

I'd appreciate any insight into this, even though I know it's a weird and kinda pedantic topic. Thanks!!!

[cojohnson1999]

I decided that this was an unnecessary duplication of functionality that Vuetify already handles. No reason to have an object for this, since icons aren't likely to change.

If any discussion is still warranted on this, feel free to comment on it. Closing this discussion.