# Fontawesome in Vue3 with TS
###### tags: `Vue3`

package.json
貼上這些安裝fontawesome包

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-brands-svg-icons": "^5.15.2",
    "@fortawesome/free-regular-svg-icons": "^5.15.2",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@fortawesome/vue-fontawesome": "^3.0.0-1"
}

src/libs/FontAwesomeIcon.vue

<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    :class="$props.class"
    :viewBox="`0 0 ${width} ${height}`"
  >
    <path fill="currentColor" :d="svgPath" />
  </svg>
</template>

<script>
import { defineComponent, computed } from 'vue'
import { findIconDefinition } from '@fortawesome/fontawesome-svg-core'

export default defineComponent({
  name: 'FontAwesomeIcon',

  props: {
    icon: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'fas',
      required: false
    },
    class: String
  },

  setup (props) {
    const definition = computed(() =>
      findIconDefinition({
        prefix: props.type,
        iconName: props.icon
      })
    )
    const width = computed(() => definition.value.icon[0])
    const height = computed(() => definition.value.icon[1])
    const svgPath = computed(() => definition.value.icon[4])

    return { width, height, svgPath }
  }
})
</script>

src/plugins/font-awesome.ts

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import FontAwesomeIcon from '@/libs/FontAwesomeIcon.vue'
library.add(fas, far, fab)
export { FontAwesomeIcon }

main.ts

import { createApp } from 'vue'
import './assets/style.scss'
import { FontAwesomeIcon } from '@/plugins/font-awesome'
import App from './App.vue'
const app = createApp(App)
app.component('fa', FontAwesomeIcon).mount('#app')

上面的檔案都建立好後照以下用法即可使用fontawesome圖案

<fa icon="star-half" type="fas" class="star-icon"></fa>

上面這種用法是最懶惰的方法，把整個fontawesome都包進去了
這樣在打包的時候會超大包
所以可以改成只取要用的icon就好

類似這樣

import { library } from '@fortawesome/fontawesome-svg-core'
import { faPencilAlt, faCode, faMagic, faExchangeAlt, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons'
import { faAddressCard, faEnvelope } from '@fortawesome/free-regular-svg-icons'
import { faGithubAlt, faCodepen, faLinkedinIn } from '@fortawesome/free-brands-svg-icons'
import FontAwesomeIcon from '@/libs/FontAwesomeIcon.vue'
library.add(faAddressCard, faEnvelope, faPencilAlt, faGithubAlt, faCodepen, faLinkedinIn, faPencilAlt, faCode, faMagic, faExchangeAlt, faChevronLeft, faChevronRight)
export { FontAwesomeIcon }