How to use FontAwesome icons as component within a const using Tailwind in Vue?

Question

I've been using Heroicons but due to it's lack of icons, I decided to switch to FontAwesome. I set it up and am able to use it like so <font-awesome-icon icon="fa-brands fa-stack-overflow" />.

However with Heroicons and HeadlessUI tabs I had a setup like this;

<template>
  <div>
    <TabList class="-mb-px flex space-x-8">
      <Tab v-for="tab in type" :key="tab.name" v-slot="{ selected }" class="outline-none">
        <button
          :class="[
            selected
              ? 'border-violet-500 text-violet-600'
              : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
            'group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium',
          ]"
          :aria-current="selected ? 'page' : undefined"
        >
          <component
            :is="tab.icon"
            :class="[
              selected
                ? 'text-violet-500'
                : 'text-gray-400 group-hover:text-gray-500',
              '-ml-0.5 mr-2 h-5 w-5',
            ]"
          />
          <span>{{ tab.name }}</span>
        </button>
      </Tab>
    </TabList>
  </div>
</template>

<script setup>
  import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
  import { BellIcon, BoltIcon } from '@heroicons/vue/24/outline'

  const type = [
    { name: 'Notifications', icon: BellIcon },
    { name: 'Boost', icon: BoltIcon },
  ]

  const selectedTab = ref(0)
  function tabsEvent(index) {
    selectedTab.value = index
  }
</script>

Which would resulted in a list of icons in my tabs.

How can I use FontAwesome the same way or at least in a way that would be a replacement for the way I've been using it with Heroicons?

I believe I need to do something like this but I couldn't quite wrap my head around it;

<template>
  <!-- rest of the code related to tabs -->
  ...
  <!-- iconType is like far, fas, fab etc. -->
  <font-awesome-icon :icon="tab.iconType + tab.icon" />
  ...
  <!-- rest of the code related to tabs -->
</template>

<script>
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
  import { faBell, faBolt } from '@fortawesome/free-regular-svg-icons'

  export default {
    name: 'tabIcons',

    data() {
      return {
        myBellIcon: faBell,
        myBoltIcon: faBolt,
      }
    },

    components: {
      FontAwesomeIcon,
    },
  }

  const type = [
    { name: 'Notifications', icon: myBellIcon, iconType: far },
    { name: 'Boost', icon: myBoltIcon, iconType: far },
  ]
</script>

I'm quite new to this Vue and stuff and going over my head so pardon my mistakes.

Thanks!

Here is an answer for Nuxt3 but similar is feasible for Vue3: https://stackoverflow.com/a/72055404/8816585 — kissu, Sep 17 '22 at 00:40
did you do the [library](https://fontawesome.com/docs/web/use-with/vue/add-icons) setup — Kaneki21, Sep 17 '22 at 05:36
@Kaneki21 Yes, I did the library way and also the component way. I'm just not sure how to use them in my example. — Marry Jane, Sep 17 '22 at 22:39
initially try the static `` icons...see if it works, if it doesn't then probably some setup issue might be there — Kaneki21, Sep 18 '22 at 04:15
@Kaneki21 as I said in the question, that already works. My question is entirely different. — Marry Jane, Sep 18 '22 at 04:23

score 1 · Answer 1 · answered Sep 18 '22 at 04:29

For the dynamic icons the string is not getting created properly, the space should work

<font-awesome-icon :icon="tab.iconType +' '+ tab.icon" />

which should give

<font-awesome-icon icon="far fa-bolt" />

const type = [
  { name: 'Notifications', icon: "fa-bell", iconType: far },
  { name: 'Boost', icon: "fa-bolt", iconType: far },
]

score -1 · Answer 2 · answered Sep 17 '22 at 09:31

-1

Install: npm i @fortawesome/fontawesome-free

In main.js:

import '@fortawesome/fontawesome-free/js/all'

In your component:

<i class="fas fa-heart"></i>

or replace it with dynamic contents.

answered Sep 17 '22 at 09:31

user16806454

391
3
8

How to use FontAwesome icons as component within a const using Tailwind in Vue?

2 Answers2