Bug: Individual icons are not available as es module .mjs files

[emattias]

Bug description

We cant know which icons are used at build time and we dont want to load all icons so we want to be able to import individual icons with dynamic import in browsers (to get caching) but only the index.mjs is available as an esm mjs file. Its too large (2mb:ish).

Please make the individual icon definition files (like this one) available as .mjs files also.

Font Awesome version

v6.5.2

Serving

Self-hosted

Implementation

SVG+JS

Browser and Operating System

• All browsers that support dynamic import

Web bug report checklist

• I have included a test case because my odds go way up that the team can fix this when I do
• I have searched for existing issues and to the best of my knowledge this is not a duplicate

[robmadole]

Hi @emattias what do you mean by it's too large? Is a tool refusing to process it?

[tagliala]

I think that this is somehow related to import maps

https://github.com/WICG/import-maps

So no tools, just the "modern" browser feature to dynamically load only what is needed in pure javascript

[emattias]

Hi @emattias what do you mean by it's too large? Is a tool refusing to process it?

No we just dont want to load 2mb to show one icon that is just a few kb :) Its not a technical limit just performance.

[robmadole]

@emattias I see! We'll have to think more about this loading mode. Up until this point we haven't entered the world of import maps and loading ESM modules directly in the browser with <script type="module">.

[emattias]

I got it working using to-esm to convert them and then just doing import('http://foo.com/path/to/file.mjs') in the browser and then adding the icon definition with library.add()