Astro component for Font Awesome icons

FontAwesomeIcon.astro

---
import '@fortawesome/fontawesome-svg-core/styles.css'
import {
  icon,
  type IconParams,
  type IconDefinition,
} from '@fortawesome/fontawesome-svg-core'

import {
  faChevronRight,
  faChevronLeft,
  faPaperPlane,
  faEnvelope,
  faPhone,
  faHomeHeart,
} from '@awesome.me/kit-cc80464f40/icons/classic/regular'

// Commonly used icons can be indexed here by their names
const iconLibraryMap: Record<string, IconDefinition> = {}

function addIcon(...iconDefs: IconDefinition[]) {
  iconDefs.forEach((iconDef) => {
    iconLibraryMap[iconDef.iconName] = iconDef
  })
}

addIcon(
  faChevronRight,
  faChevronLeft,
  faPaperPlane,
  faEnvelope,
  faPhone,
  faHomeHeart,
)

export interface Props extends IconParams {
  icon: string | IconDefinition
  container?: 'squircle'
}

const { icon: iconProp, container, ...props } = Astro.props

let iconDefinition: IconDefinition

if (typeof iconProp === 'string') {
  iconDefinition = iconLibraryMap[iconProp]
} else {
  iconDefinition = iconProp
}

const iconResult = icon(iconDefinition, props)
const iconName = iconResult.iconName
const [height, width, _len, unicode, pathData] = iconResult.icon

const squircle = {
  viewBox: '0 0 512 512',
  path: 'M256 0C61.4483 0 0 66.528 0 256C0 445.472 61.4324 512 256 512C450.568 512 512 445.472 512 256C512 66.528 450.584 0 256 0Z',
}
---

{
  container ? (
    <svg class="size-20" viewBox={`0 0 ${height} ${width}`}>
      <path d={squircle.path} fill="red" />
      <path
        fill="currentColor"
        d={pathData.toString()}
        style="transform:scale(0.6) translateX(180px) translateY(160px)"
      />
    </svg>
  ) : (
    <Fragment set:html={icon(iconDefinition, props).html} />
  )
}