Fontawesome icons not accepting color props through react functional components via tailwindcss-CodePudding

My Problem

I have a project which requires icons everywhere. Instead of rendering a Fontawesome Icon in every script, I have a functional component which renders an icon when given props.

When calling the function, sometimes it doesn't accept the color prop. Only certain colors seem to be working, such as darkBlue, lightBlue, and green. Colors which haven't accepted the prop are defaulting to white.

I'm using Tailwindcss to inject classes into the components.

Tailwind Config

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    colors: {
      dark: "#121212",
      white: "#fff",
      secondary: "#F0A500",
      lightBlue: "#0EA5E9",
      darkBlue: "#2563EB",
      beige: "#FDBA74",
      silver: "#9CA3AF",
      red: "#DC2626",
      green: "#10B981",
      orange: "#F97316",
      hotPink: "#EC4899",
      purple: "#6D28D9",
      yellow: "#FDE047",
    },
    extend: {
    },
  },
  plugins: [],
};

FC: Icon Render

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// color props must be passed as a string
function Icon({ name, color, scale }) {
  return (
    <FontAwesomeIcon
      icon={name}
      className={`text-${color}`} 
      size={scale}
    />
  );
}

export default Icon;

Calling Icon Render

import React from "react";
import Button from "../../shared/components/Button";
import Typography from "../../shared/utilities/Typography";
import Mugshot from "../../shared/assets/mugshot.jpg";
import Icon from "../../shared/components/Icon";
import {
  faGlobe,
  faHandSpock,
  faComment,
} from "@fortawesome/free-solid-svg-icons";
import Avatar from "../../shared/components/Avatar";

function example() {
  return (
    <section className="section" id="home-hero">
      <Typography variant="label">Some text</Typography>
      <Typography variant="h2">
        Some text <Icon name={faHandSpock} color="beige" />
      </Typography>
    </section>
  );
}
export default example;

What I've Tried / Fun Facts

No errors in the console.
Some colors may be preserved tailwind color names?
Tried changing color names in tailwind config
Tried changing hex values in tailwind config

Conclusion

Edit: Discovered an easier way:

<Icon name={faHandSpock} color="text-beige" /> // full classname


// remove partial className, pass in object
function Icon({ name, color, scale }) {
  return (
    <FontAwesomeIcon
      icon={name}
      className={color}
      size={scale}
    />
  );
}

export default Icon;

CodePudding user response：

TailWind generates a CSS file which contains only the classes that you've used in the project.

The problem you're experiencing is because TailWind doesn't recognise the generated class you're applying in "FC: Icon Render". In particular, this line:

className={`text-${color}`}

To quote the documentation:

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

https://tailwindcss.com/docs/content-configuration#class-detection-in-depth

To resolve your problem, either pass in the full class name instead of generating it or safelist all of your text-{color} classes in your config file.

Assign your colors to a variable:

const colors = {
    dark: "#121212",
    white: "#fff",
    ...

Pass them into your config for theme:

theme: {
    colors,
    . . .

Safelist your colors:

safelist: Object.keys(colors).map(color => `text-${color}`),

CodePudding user response：

TailwindCSS doesn't allow you to generate classes dynamically. So when you use the following to generate the class…

className={`text-${color}`}

…TailwindCSS will not pick that up as a valid TailwindCSS class and therefore will not produce the necessary CSS.

Instead, you must include the full name of the class in your source code.

For this you can create any function which returns the required string like this:

function changeFAColor (color) {
  if(color === dark) return "text-dark"
    (color === white) return "text-white"
    (color === secondary) return "text-secondary")
    .
    .
    .
    (color === purple) return "text-purple")
    (color === yellow) return "text-yellow")
}

And use it in the component

<FontAwesomeIcon
      icon={name}
      className={`${changeFAcolor(color)}`} 
      size={scale}
    />