[Feature Request]: support FontAwesome icons

[BeeMargarida]

It should work already (there was a bug regarding the icon props, it will be fixed on next release)

[notramo]

How to use them? What FontAwesome package to import?

[BeeMargarida]

It's been a while since I used font-awesome, but if you can import the icons as a component, using them would be like the code below. We don't have documentation for IconRenderer yet, but it's basically what's used in some component to render the provided icon.

<script>
    import {CopyIcon}  from "<icons-library>";
    import {Button,  IconRenderer, ThemeIcon} from "@svelteuidev/core";
</script>

<ThemeIcon>
    <CopyIcon />
</ThemeIcon>

<Button>
    <CopyIcon slot="leftIcon" />
    Icon on left
</Button>

<IconRenderer iconSize={48} icon={CopyIcon} />

[notramo]

This needs a library that has a component for every icon, which creates lot of redundant code. Is it possible to import the icon directly from the FontAwesome library @fortawesome/free-solid-svg-icons, and inline the SVG in IconRenderer?

[BeeMargarida]

Hum, with IconRenderer in it's current state I think not, since it does not provide a slot. But for Button and other components that contain a slot for the icon, yes, you can use it like this. So, I think this can be considered a feature request to allow support for slot icons for components using IconRenderer underneath

[notramo]

Using it with slot requires a custom theme implementation, and is not consistent. Best solution would be to import the object from the library, pass it into the icon prop, and IconRenderer would take care of the rest.

[BeeMargarida]

Using it with slot requires a custom theme implementation, and is not consistent. Best solution would be to import the object from the library, pass it into the icon prop, and IconRenderer would take care of the rest.

That's the current behaviour

[notramo]

But the icon prop accepts a component, not a FontAwesome object.

[BeeMargarida]

Oki, after checking this, there is nothing to do here besides adding icon slots to all components that support an icon prop (and there's a possibility that in the future we remove the icon prop and only use slots). We won't make specific logic for FontAwesome logic. If someone wants to use @fortawesome/free-solid-svg-icons, it will have to use a package that deals with this, like svelte-fa, since the fontawesome package does not export total SVGs but a definition of an SVG with other stuff.