Vue 3 - dynamically bind font awesome icons

Question

I have a v-for loop, everything else seems to be working, but for some reason the icon doesn't show up.

How can I bind it correctly?

Note: I also return the icon and import it, and am already using font awesome in my project, so I know it's working. The problem is how I am binding it.

Imports:

import { ref } from '@vue/composition-api'
import {faCircle} from '@fortawesome/free-solid-svg-icons'

v-for loop:

<div
    class="m-auto w-full flex flex-col justify-center items-center"
>
    <div>
        <fa :icon="item.icon" class="text-5xl text-gray-400" />
        // the icon isn't showing but when I write {{item.icon}} I can see the text 'faCircle'
    </div>
    <div class="py-4 text-2xl font-semibold block">
        {{ item.title }}
    </div>
    <div class="px-10">
        <span class="text-base">
            {{ item.text }}
        </span>
    </div>
</div>

Script:

export default {
  setup() {
    const items = ref([
      {
        title: 'bla',
        text: 'bla',
        icon: 'faCircle'
      },
      {
        title: 'bla',
        text: 'bla',
        icon: 'faCircle'
      },
      {
        title: 'bla',
        text: 'bla',
        icon: 'faCircle'
      }
    ])

I returned the items:

return {
  faCircle,
  items
}

Non404 Non404 · Accepted Answer · 2020-09-23T08:13:40

So I know what the Problem was. I wrote it as a String

Script

   export default {
      setup() {
        const items = ref([
          {
            title: 'bla',
            text: 'bla',
            icon: 'faCircle'
          },
          {
            title: 'bla',
            text: 'bla',
            icon: 'faCircle'
          },
          {
            title: 'bla',
            text: 'bla',
            icon: 'faCircle'
          }
        ])

ICON should be written WITHOUT Strings because we are importing it inside an expression

 {
    title: 'bla',
    text: 'bla',
    icon: faCircle
  }

Vue 3 - dynamically bind font awesome icons

1 Answers