Question

我正在尝试弄清楚如何设置使用react-icons导入的图标的样式。

特别是，我希望能够创建类似于以下内容的外观：

也就是说，我想添加背景色，填充，边框半径等。但是，我找不到一种简单的方法。

我可以添加一个大小和颜色属性，这将更改图标的实际大小和颜色。但是我没有简单的方法来更改其他元素。

有人知道我该怎么做（或者他们可以推荐一个可以帮助我解决这个问题的图书馆）吗？

Answer 1

我认为这里最简单的方法是将 className 属性直接传递给您想要应用样式的图标。 Source Code in a CodeSandbox。我在这里使用了 tailwindcss 类，但您可以同样轻松地使用自己的类。

import React from "react";
import "./styles.css";
import {
  FaFacebookF,
  FaTwitter,
  FaInstagram,
  FaPinterest
} from "react-icons/fa";

export default function App() {
  let circleClasses = "inline-block p-7 rounded-full w-20 mx-auto";
  let iconStyles = { color: "white", fontSize: "1.5em" };
  return (
    <div className="App grid grid-cols-2 sm:grid-cols-4 gap-2 w-3/4 mx-auto">
      <h1 className="col-span-full">Icon Demo</h1>
      <span style={{ background: "#3B5998" }} className={circleClasses}>
        <FaFacebookF style={iconStyles} />
      </span>
      <span style={{ background: "#1DA1F2" }} className={circleClasses}>
        <FaTwitter style={iconStyles} />
      </span>
      <span style={{ background: "black" }} className={circleClasses}>
        <FaInstagram style={iconStyles} />
      </span>
      <span style={{ background: "#BD081C" }} className={circleClasses}>
        <FaPinterest style={iconStyles} />
      </span>
    </div>
  );
}

如果您想了解更多有关其工作原理的上下文，我们可以深入研究 react-icons 的源代码。如果您查看 react-icons 中的 where the IconContext is defined，您可以看到允许的道具：

export interface IconContext {
  color?: string;
  size?: string;
  className?: string;
  style?: React.CSSProperties;
  attr?: React.SVGAttributes<SVGElement>;
}

export const DefaultContext: IconContext = {
  color: undefined,
  size: undefined,
  className: undefined,
  style: undefined,
  attr: undefined,
};

export const IconContext: React.Context<IconContext> = React.createContext && React.createContext(DefaultContext);

实际上，您可以传递颜色、大小、样式、附加的 svg 属性，甚至是 className 字符串。但是，这需要您将 Icon 组件包装在上下文中。

当您安装 react-icons 时，所有图标都会以如下格式添加到 node_modules 目录中：

// THIS FILE IS AUTO GENERATED
var GenIcon = require('../lib').GenIcon
module.exports.Fa500Px = function Fa500Px (props) {
  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 448 512"},"child":[{"tag":"path","attr":{"d":"M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7 8.5-28.6 53 0 89.4-10.1 89.4-64.4 0-61-77.1-89.6-116.9-44.6-23.5 26.4-17.6 42.1-17.6 157.6 50.7 31 118.3 22 160.4-20.1 24.8-24.8 38.5-58 38.5-93 0-35.2-13.8-68.2-38.8-93.3-24.8-24.8-57.8-38.5-93.3-38.5s-68.8 13.8-93.5 38.5c-.3.3-16 16.5-21.2 23.9l-.5.6c-3.3 4.7-6.3 9.1-20.1 6.1-6.9-1.7-14.3-5.8-14.3-11.8V20c0-5 3.9-10.5 10.5-10.5h241.3c8.3 0 8.3 11.6 8.3 15.1 0 3.9 0 15.1-8.3 15.1H130.3v132.9h.3c104.2-109.8 282.8-36 282.8 108.9 0 178.1-244.8 220.3-310.1 62.8zm63.3-260.8c-.5 4.2 4.6 24.5 14.6 20.6C306 56.6 384 144.5 390.6 144.5c4.8 0 22.8-15.3 14.3-22.8-93.2-89-234.5-57-238.3-38.2zM393 414.7C283 524.6 94 475.5 61 310.5c0-12.2-30.4-7.4-28.9 3.3 24 173.4 246 256.9 381.6 121.3 6.9-7.8-12.6-28.4-20.7-20.4zM213.6 306.6c0 4 4.3 7.3 5.5 8.5 3 3 6.1 4.4 8.5 4.4 3.8 0 2.6.2 22.3-19.5 19.6 19.3 19.1 19.5 22.3 19.5 5.4 0 18.5-10.4 10.7-18.2L265.6 284l18.2-18.2c6.3-6.8-10.1-21.8-16.2-15.7L249.7 268c-18.6-18.8-18.4-19.5-21.5-19.5-5 0-18 11.7-12.4 17.3L234 284c-18.1 17.9-20.4 19.2-20.4 22.6z"}}]})(props);
};

如果我们查看 GenIcon 的 source code，我们可以获得更多有关其工作原理的上下文。

import * as React from 'react';

import { IconContext, DefaultContext } from './iconContext';

export interface IconTree {
  tag: string;
  attr: {[key: string]: string};
  child: IconTree[];
}


function Tree2Element(tree: IconTree[]): React.ReactElement<{}>[] {
  return tree && tree.map((node, i) => React.createElement(node.tag, {key: i, ...node.attr}, Tree2Element(node.child)));
}
export function GenIcon(data: IconTree) {
  return (props: IconBaseProps) => (
    <IconBase attr={{...data.attr}} {...props}>
      {Tree2Element(data.child)}
    </IconBase>
  );
}

export interface IconBaseProps extends React.SVGAttributes<SVGElement> {
  children?: React.ReactNode;
  size?: string | number;
  color?: string;
  title?: string;
}

export type IconType = (props: IconBaseProps) => JSX.Element;
export function IconBase(props:IconBaseProps & { attr?: {} }): JSX.Element {
  const elem = (conf: IconContext) => {
    const {attr, size, title, ...svgProps} = props;
    const computedSize = size || conf.size || "1em";
    let className;
    if (conf.className) className = conf.className;
    if (props.className) className = (className ? className + ' ' : '') + props.className;

    return (
      <svg
        stroke="currentColor"
        fill="currentColor"
        strokeWidth="0"
        {...conf.attr}
        {...attr}
        {...svgProps}
        className={className}
        style={{ color: props.color || conf.color, ...conf.style, ...props.style}}
        height={computedSize}
        width={computedSize}
        xmlns="http://www.w3.org/2000/svg"
      >
      {title && <title>{title}</title>}
      {props.children}
    </svg>
    )
  };

  return IconContext !== undefined
    ? <IconContext.Consumer>{(conf: IconContext) => elem(conf)}</IconContext.Consumer>
    : elem(DefaultContext);
}

因此，GenIcon 是一个函数，它接受具有 IconTree 接口的对象，该接口包括 tag、attr 和 child 属性。我们可以在上面生成的代码中看到这一点。 GenIcon 返回一个函数本身。该函数接受 props 作为实现 IconBaseProps 接口的参数。 IconBaseProps 接口扩展了 React.SVGAttributes，其中包括 className 和 style。然后将它们作为道具传递给此处的 IconBase 组件：

export function GenIcon(data: IconTree) {
  return (props: IconBaseProps) => (
    <IconBase attr={{...data.attr}} {...props}>
      {Tree2Element(data.child)}
    </IconBase>
  );
}

要了解 IconBase 相对于 IconContext 的实际工作方式，让我们查看其 return 语句：

    return IconContext !== undefined
    ? <IconContext.Consumer>{(conf: IconContext) => elem(conf)}</IconContext.Consumer>
    : elem(DefaultContext);

在这里，我们可以看到 IconBase 将调用一个名为 elem 的函数（定义在 IconBase 的主体内）。因此，如果定义了 IconBase，IconContext 将使用 IconContext.Consumer，将返回的元素包装在 elem 中并使用 IconContext 调用 IconContext。但是，如果 IconBase 未在此范围内定义，DefaultContext 将使用 elem 代替。

要了解这是如何工作的，我们需要查看在 IconBase 中定义的 const elem = (conf: IconContext) => { const {attr, size, title, ...svgProps} = props; const computedSize = size || conf.size || "1em"; let className; if (conf.className) className = conf.className; if (props.className) className = (className ? className + ' ' : '') + props.className; return ( <svg stroke="currentColor" fill="currentColor" strokeWidth="0" {...conf.attr} {...attr} {...svgProps} className={className} style={{ color: props.color || conf.color, ...conf.style, ...props.style}} height={computedSize} width={computedSize} xmlns="http://www.w3.org/2000/svg" > {title && <title>{title}</title>} {props.children} </svg> ) }; 函数。这是完整的来源：

<FaFacebook className="bg-blue" />

因此，如果您查看与 className 相关的代码，您会发现我们实际上可以将 className 直接添加到 Context 和/或 props (svg) 中，并且它们实际上会被合并和应用于返回的 let className; if (conf.className) className = conf.className; if (props.className) className = (className ? className + ' ' : '') + props.className;

 style={{ color: props.color || conf.color, ...conf.style, ...props.style}}

此外，在 Context 或 props 中定义的样式将被组合并应用于 svg

svg

这里需要注意的一点是，所有样式和类都直接应用于返回的 int i = 0; int mapSize = map.size(); for (Map.Entry<String, Integer> element : map.entrySet()) { String key = element.getKey(); int value = element.getValue(); ... i++; } 元素。因此，在您的情况下，您可能需要一个包装元素来构建边框半径和背景颜色，然后将颜色和大小的相关样式直接应用于 svg。

Answer 2

只需将 "color" 属性添加到

像这样：

<Icon color="blue" />

Answer 3

使用Docs中提到的IconContext。

function BlueLargeIcon() {
  return (
    <IconContext.Provider
      value={{ color: 'blue', size: '50px' }}
    >
      <div>
        <FaBeer />
      </div>
    </IconContext.Provider>
  );
}

Answer 4

import {IconContext} from "react-icons";

class App extends component {

return (

<div>
<IconContext.Provider value={{ className="myReact-icons"}}>
       <FaBeer />
  </IconContext.Provider>
</div>
);  
}

css example below

.myreact-icons { color: red;
                 height: 40px;
               }

Answer 5

对于任何可能有帮助的人...

部分图标颜色无法更改。
例如，我尝试通过执行

来更改 String 图标的颜色

{ GrClose }

它只是没有改变，当我用 <GrClose className="icon" style={{ position: 'absolute', top: '20px', right: '20px', }} size="50px" color="white" onClick={handleExit} /> 图标替换我的图标时，它起作用了！

Answer 6

有一种更简单的方法来更改react-icon的颜色。您可以使用.icon > *选择svg图标中的所有内容，并使用css fill来填充svg路径。

```
.icon > * {
    fill: #B3B3B3;
}

.icon > *:hover {
    fill: #747474;
}
```

Answer 7

您只需在图标上添加color属性即可，大小等其他属性也是如此。

<BiXCircle size={40} color="red" />

Answer 8

扣眼图标上的颜色更改不适用。您可以通过传递一个类并使用 css 定位它或直接在

中与其他人一起尝试

如何设置React-Icons的样式

8 个答案: