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
}

Check this stackoverflow.com/a/50522854/1292050

Syed
– Syed

2020-09-11 10:29:32 +00:00
Commented Sep 11, 2020 at 10:29 — Syed
– Syed, Commented Sep 11, 2020 at 10:29
that didn't helped at all

Non404
– Non404

2020-09-23 08:15:02 +00:00
Commented Sep 23, 2020 at 8:15 — Non404
– Non404, Commented Sep 23, 2020 at 8:15

Non404 · Accepted Answer · 2020-09-23 08:13:40Z

2

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
  }

answered Sep 23, 2020 at 8:13

Non404

1,3033 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue 3 - dynamically bind font awesome icons

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related