Include Font Awesome in Framer as a Code Component

FontAwesomeFont.tsx

import * as React from "react"
import { Frame, addPropertyControls, ControlType } from "framer"
import { motion } from "framer-motion"

async function importScripts() {
    let script = document.createElement("script")
    script.id = "font-awesome-fonts-script"
    // create a fontawesome kit: https://fontawesome.com/start
    script.src = "https://kit.fontawesome.com/KIT_ID_HERE.js" 
    script.crossOrigin = "anonymous"
    // @ts-ignore
    document.body.appendChild(script)
}

if (!document.getElementById("font-awesome-fonts-script")) {
    importScripts()
    console.log("Font Awesome loaded")
} else {
    console.log("Font Awesome already loaded")
}

export function FontAwesomeIcon(props) {
    const { style, onTap, fontSize, color, variant, icon, ...rest } = props

    let customClass = `${variant} fa-${icon}`
    return (
        <motion.div style={{ ...style, ...containerStyle }}>
            <motion.div style={squareStyle} onTap={onTap}>
                <i
                    style={{
                        fontSize: fontSize,
                        flexBasis: "0 0 auto",
                        flexGrow: 0,
                        flexShrink: 0,
                        color: color,
                        verticalAlign: "-.125em",
                    }}
                    className={customClass}
                    {...rest}
                ></i>
            </motion.div>
        </motion.div>
    )
}

FontAwesomeIcon.defaultProps = {
    fontSize: 24,
    color: "#3899FF",
    variant: "fal",
    icon: "square",
}

addPropertyControls(FontAwesomeIcon, {
    onTap: {
        type: ControlType.EventHandler,
    },
    fontSize: {
        type: ControlType.Number,
        title: "Size",
    },
    color: {
        type: ControlType.Color,
        title: "Color",
    },
    variant: {
        type: ControlType.Enum,
        title: "Variant",
        options: ["fal", "fas"],
        optionTitles: ["Light", "Solid"],
    },
    icon: {
        type: ControlType.String,
        title: "Icon",
    },
})

const containerStyle = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden",
    height: 40,
    width: 40,
}

const squareStyle = {
    width: "max-content" as const,
    whiteSpace: "pre-wrap" as const,
    flexShrink: 0,
}