Improve v-icon performance

[azrikahar]

Description

Currently this method is being called everytime a <v-icon> component is mounted:

directus/app/src/components/v-icon/v-icon.vue

Line 66 in 47db8e5

library.add(fab);

link to library.add(...iconDefinitions) in Font Awesome's docs

This in turn causes some performance hit as <v-icon> is being used throughout the app. However the most noticable impact is the <select-icon> interface, where now that same method is being ran for every icon in the whole dropdown list, which was why the dropdown takes a while to appear.

Changes

• Moved the library.add(fab) call into the <social-icon> so that it will only be called when using social icons.

• Turned socialIcons and components into a separate imported file (I assume this way they will only be declared once? Not 100% sure about this) which felt like it helped as well, but not sure if it's placebo.

• Tweaked filteredIcons computed property in <select-icon> a little bit.

Before

(gray circle to indicate mouse click to see how long does it take to appear/disappear)

PowerToys_Djg2uWDLfF.mp4

After

There's still a tad delay when it's dissappearing due to Vue unmounting the icons in the dropdown/v-menu (still room for improvement here), but it is appearing near instantly now.

PowerToys_gHsKnvupCY.mp4

Type of Change

• Bugfix
• Improvement
• New Feature
• Refactor / codestyle updates
• Other, please describe:

Requirements Checklist

• New / updated tests are included
• All tests are passing locally
• Performed a self-review of the submitted code

If adding a new feature:

• Documentation was added/updated. PR:

[br41nslug]

LGTM! Im seeing a noticeable performance improvement compared to main.