Using Font Awesome Free/Pro 6.5 in Shoelace 2.0

[chdenat]

Finally, I did it...

After a first try with Blob (#1853), I dived into the code to find out why it wasn't working. I couldn't figure out why the blob wasn't working, but I did figure out how to do it, this time with encoded URIs, as it is the case with the default icons.

Shoelace and Font Awesome are installed as modules (it should work with Font Awesome kit too) via npm like tools (npm, bun, ...). When installed by npm, Font Awesome manages only SVG.

I tested with the "pro" and "brand" (ie free) icons in HTML or JSX and it's OK.

import {faCircleInfo}               from '@fortawesome/pro-regular-svg-icons'
import {faGithub}                   from '@fortawesome/free-brands-svg-icons'

import {SlIcon}                     from '@shoelace-style/shoelace/dist/react'

import {FA2SL}                      from '../FA2SL'

FA2SL.useFontAwesomeInShoelace('fa')  // This should be done once in your app.

return (
       <>
            <sl-icon library="fa" name={FA2SL.set(faCircleInfo)}></sl-icon>
            <SlIconButton library="fa" name={FA2SL.set(faGithub)} target={'_blank'} href={'<any URL>'}/>
       </>
   )

A gist is available here to get the required JS Class : https://gist.github.com/chdenat/8a149909eb8281db716731f3949c1a7b