import dynamically fontawesome icons in Vue

Question

I have a problem rendering icons dynamically. I use v-for to get all the data from the object array. Also, I have a second array where I save the name of the icons I worked with. However, when the first array is looping, the second array (icons) doesn't move.

I tried to create a method that maps the data from the first and second array to create a new array. But nothing happens.

My code:

Component.vue

<template>
  <div class="items">
    <div class="item" v-for="(param, index) in params" :key="index">
      <font-awesome-icon :icon="['fab', 'temp']" :temp="getIcon" :key="index" class="fab fa" />
      <h3 class="skills-title">{{ param.name }}.</h3>
      <p style="display: none">{{ param.description }}.</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "PxSkillCard",
  data() {
    return {
      params: [],
      icons: ["laravel", "wordpress-simple"],
    };
  },

  methods: {
    getIcon() {
      let temp = this.params.map((aux, index) => {
        return [aux, this.icons[index]];
      });
    },
  },
};
</script>

And I separated the fontawesome file in a apart module fontawesome.js

import Vue from "vue";
import { library } from "@fortawesome/fontawesome-svg-core";
import {
  faLaravel,
  faWordpressSimple
} from "@fortawesome/free-brands-svg-icons";

import { faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

library.add(
  faLaravel,
  faWordpressSimple
);

Vue.component("font-awesome-icon", FontAwesomeIcon);

The final result is:

What about with my code (or my logic)?

Bergur · Accepted Answer · 2021-08-23 23:10:39Z

2

You are already looping through everything in your template, there's no need to loop again in your function.

Something like this should work.

<template>
  <div class="items">
    <div class="item" v-for="(param, index) in params" :key="index">
      <font-awesome-icon :icon="['fab', icons[index]]" :key="index" class="fab fa" />
      <h3 class="skills-title">{{ param.name }}.</h3>
      <p style="display: none">{{ param.description }}.</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "PxSkillCard",
  data() {
    return {
      params: [],
      icons: ["laravel", "wordpress-simple"],
    };
  },
};
</script>

This assume, both arrays are the same size and the data in params and icons are in the correct order.

edited Aug 23, 2021 at 23:10

answered Aug 22, 2021 at 23:30

Bergur

4,07714 silver badges21 bronze badges

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

1 Comment

Edgar Gc Over a year ago

Only remove this of icons and works. Thanks!

Collectives™ on Stack Overflow

import dynamically fontawesome icons in Vue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related