How to add font-awesome-icon to React Component from json?

Question

I have the following problem. I want to fetch font-awesome icon from JSON file to react component but there is showing results in the console but not in UI. My JSON file looks like this:

carFeatures.json

[
  {
    "_id": 101,
    "name": "Results Driven",
    "desc": "Sed ut perspiciatis unde om nis natus error sit volup atem accusant dolorem que laudantium. Totam aperiam, eaque ipsa quae ai.",
    "icon": "faChartColumn"
  },
  {
    "_id": 102,
    "name": "Proven Technology",
    "desc": "Sed ut perspiciatis unde om nis natus error sit volup atem accusant dolorem que laudantium. Totam aperiam, eaque ipsa quae ai.",
    "icon": "faRoad"
  },
  {
    "_id": 103,
    "name": "Winning Culture",
    "desc": "Sed ut perspiciatis unde om nis natus error sit volup atem accusant dolorem que laudantium. Totam aperiam, eaque ipsa quae ai.",
    "icon": "faFlagCheckered"
  },
  {
    "_id": 104,
    "name": "Top Performance",
    "desc": "Sed ut perspiciatis unde om nis natus error sit volup atem accusant dolorem que laudantium. Totam aperiam, eaque ipsa quae ai.",
    "icon": "faGaugeHigh"
  }
]

I have the following problem. I want to fetch font-awesome icon from JSON file to react component but there is showing results in the console but not in UI. My React component where fetching the data looks like this:

Features.js

import React, { useEffect, useState } from 'react';
import Feature from '../Feature/Feature';
import { Container, Row } from 'react-bootstrap';
const Features = () => {
  const [carFeatures, setCarFeatures] = useState([]);
  useEffect(() => {
    fetch('carFeatures.json')
      .then((res) => res.json())
      .then((data) => setCarFeatures(data))
      .catch((err) => console.log(err));
  }, []);
  return (
    <Container fluid>
      <Row xs={1} md={2} lg={4} className="g-4">
        {carFeatures.map((carFeature) => (
          <Feature key={carFeature?._id} carFeature={carFeature} />
        ))}
      </Row>
    </Container>
  );
};
export default Features;

Feature.js

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
const Feature = ({ carFeature }) => {
  console.log(carFeature);
  return (
    <div>
      <FontAwesomeIcon icon={icons[carFeature?.icon]} />
      <h3>{carFeature?.name}</h3>
      <p>{carFeature?.desc}</p>
    </div>
  );
};
export default Feature;

Answer 1

First that I saw , update wrong icon names in the json file , it must be like this `

[{
  "_id": 101,
  "name": "Results Driven",
  "desc": "Sed ut perspiciatis unde om nis natus error sit volup atem accusant dolorem que laudantium. Totam aperiam, eaque ipsa quae ai.",
  "icon": "fa-chart-column"
},
  {
    "_id": 102,
    "name": "Proven Technology",
    "desc": "Sed ut perspiciatis unde om nis natus error sit volup atem accusant dolorem que laudantium. Totam aperiam, eaque ipsa quae ai.",
    "icon": "fa-road"
  },
  {
    "_id": 103,
    "name": "Winning Culture",
    "desc": "Sed ut perspiciatis unde om nis natus error sit volup atem accusant dolorem que laudantium. Totam aperiam, eaque ipsa quae ai.",
    "icon": "fa-flag-checkered"
  },
  {
    "_id": 104,
    "name": "Top Performance",
    "desc": "Sed ut perspiciatis unde om nis natus error sit volup atem accusant dolorem que laudantium. Totam aperiam, eaque ipsa quae ai.",
    "icon": "fa-gauge-high"
  }
]

After that run this two commands for install missing packages

1. yarn add @fortawesome/free-solid-svg-icons
2. yarn add @fortawesome/fontawesome-svg-core

After that import these packages inside of Feature.js like this

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {library} from '@fortawesome/fontawesome-svg-core';
import * as Icons from '@fortawesome/free-solid-svg-icons';

const iconList = Object.keys(Icons)
    .filter((key) => key !== 'fas' && key !== 'prefix')
    .map((icon) => Icons[icon]);

library.add(...iconList);

const Feature = ({ carFeature }) => {
    console.log(carFeature);
    return (
        <div>
            <FontAwesomeIcon icon={carFeature?.icon} color="#ddd" />
            <h3>{carFeature?.name}</h3>
            <p>{carFeature?.desc}</p>
        </div>
    );
};
export default Feature;