Font awesome icon disappears in built files

[joesonw]

I am using fontawesome 6, it was imported and used like following

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
      <FontAwesomeIcon icon="fa-regular fa-chevron-down" />

it works fine in dev mode, but once it's built, the icon is gone completely.

I suspect because the icons are loaded asynchonously (there is a loading icon before showing the real icon itself, don't know if this is how fontawesome works nowadays), and iles did not wait it to finish loading before capture the html.

I searched this problem with vite/vuejs a lot, nothing came out helpful. So I presume it might be async loading issue.

[ElMassimo]

Hi!

Try using a hydration directive such as client:load and build the site.

If it works as expected, it means that the component needs JS to work.

I'd suggest using @islands/icons, or a similar alternative that does not rely on JS, allowing the icons to be prerendered at built time.

[joesonw]

it seems like a lot of efforts to use it with fontawesome pro >,<

p.s client:load did not work

[joesonw]

For any other who ran into the same problem and want less hassles (it seems that @islands/icons needs some effort to use with FontAwesome Pro icons)

use the following component instead of import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

<script setup lang="ts">
import { findIconDefinition, parse } from '@fortawesome/fontawesome-svg-core'
const props = defineProps({
  icon: {
    type: String,
    required: true,
  },
})
const lookup = parse.icon(props.icon)
const def = findIconDefinition(lookup)
const classes = [
  'svg-inline--fa',
  `fa-${lookup.iconName}`,
]
</script>

<template>
  <svg
    :class="classes"
    aria-hidden="true"
    focusable="false"
    role="img"
    xmlns="http://www.w3.org/2000/svg"
    :viewBox="`0 0 ${def.icon[0]} ${def.icon[1]}`"
    :data-prefix="lookup.prefix"
    :data-icon="lookup.iconName"
  >
    <path fill="currentColor" :d="def.icon[4]"></path>
  </svg>
</template>

<style lang="scss">
.svg-inline--fa {
  display: var(--fa-display, inline-block);
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
}
svg:not(:root).svg-inline--fa, svg:not(:host).svg-inline--fa {
  overflow: visible;
  box-sizing: content-box;
}
</style>

[ElMassimo]

Thanks for sharing! 😃