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

Question

我的问题

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

调用函数时，有时它不接受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

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}`),

Answer 2

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}
    />