Fontawesome 图标不接受颜色道具，通过 tailwindcss 反应功能组件

Question

我的问题

我有一个项目需要到处都有图标。我没有在每个脚本中渲染Fontawesome Icon，而是有一个功能组件，它在给定道具时渲染一个图标。

调用函数时，有时它不接受color 属性。似乎只有某些颜色有效，例如darkBlue、lightBlue 和green。未接受该道具的颜色默认为白色。

我正在使用Tailwindcss 将类注入到组件中。

顺风配置

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：图标渲染

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;

调用图标渲染

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;

我的尝试/有趣的事实

• 控制台中没有错误。
• 某些颜色可能会保留顺风颜色名称？
• 尝试在顺风配置中更改颜色名称
• 尝试在顺风配置中更改十六进制值

结论

编辑：发现了一种更简单的方法：

<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;

Answer 1

TailwindCSS 不允许您动态生成类。所以当你使用以下来生成类时……

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

…TailwindCSS 不会将其作为有效的 TailwindCSS 类，因此不会生成必要的 CSS。

相反，您必须在源代码中包含类的全名。

为此，您可以创建任何返回所需字符串的函数，如下所示：

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")
}

并在组件中使用

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

Answer 2

Tailwind 会生成一个 CSS 文件，其中仅包含您在项目中使用过的类。

您遇到的问题是因为 Tailwind 无法识别您在“FC：图标渲染”中应用的生成类。特别是这一行：

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

引用文档：

Tailwind 如何提取类名的最重要含义是 它只会找到作为完整的完整字符串存在的类 在您的源文件中。

如果使用字符串插值或连接部分类名 一起，Tailwind 将找不到它们，因此不会生成 对应的 CSS：

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

要解决您的问题，请传入完整的类名而不是生成它，或者将您的所有 text-{color} 类列入您的配置文件中。

将颜色分配给变量：

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

将它们传递到您的主题配置中：

theme: {
    colors,
    . . . 

将您的颜色列入安全列表：

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