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