Auto imports

[Evan Boehs]

Right now I have something like

{
        links: [
            ["https://github.com/boehs","github-square fab"],
            ["https://linkedin.com/?","linkedin fab"],
            ["https://500px.com/?","camera fas"]
        ],
}

as a config file, and this works fine because I load the FA font. it is mostly obvious to me how to use the component, except I am unsure of the best method to import what I need (defined in the cfg) automatically from the fa svg package.

In this example I could easily go into where it's needed Footer.svelte and import { camera } ... import { github, linkedin }, but as it's a config file it's unpredictable and the user might need the reddit icon, for instance.

How would I do this?

[Cweili]

Maybe you can try import all icons like this, then replace strings to icons.

import * as FaSolidIcons from '@fortawesome/free-solid-svg-icons'
import * as FaBrandIcons from '@fortawesome/free-brands-svg-icons'

[Evan Boehs]

Maybe you can try import all icons like this, then replace strings to icons.

import * as FaSolidIcons from '@fortawesome/free-solid-svg-icons'
import * as FaBrandIcons from '@fortawesome/free-brands-svg-icons'

Would this cause the browser to load all the icons?

[Cweili]

Maybe you can try import all icons like this, then replace strings to icons.

import * as FaSolidIcons from '@fortawesome/free-solid-svg-icons'
import * as FaBrandIcons from '@fortawesome/free-brands-svg-icons'

Would this cause the browser to load all the icons?

Yes...

Or try other babel/webpack/rollup plugin to compile required icons on building assets.

[Cweili]

This issue is closed due to not being active. Please feel free to open it again (for the author) or create a new one and reference this (for others) if you have further questions.