CODEWITHSUNDEEP
vue.jsfont-awesome
Edgar Gc
Edgar Gc

Reputation: 159

import dynamically fontawesome icons in Vue

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: enter image description here

What about with my code (or my logic)?

Upvotes: 2

Views: 1880

Answers (1)

Bergur
Bergur

Reputation: 4057

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.

Upvotes: 2

Related Questions