我想弄清楚如何设计我使用react-icons.
特别是，我希望能够创建与此类似的外观： 
也就是说，我想添加背景颜色、填充、边框半径等。但是，我找不到简单的方法来做到这一点。
我可以添加一个大小和颜色props，这将改变图标的实际大小和颜色。但是我没有简单的方法来改变其他元素。
有谁知道我该怎么做（或者他们可以推荐一个可以帮助我解决这个问题的不同图书馆）？
如何设计 React-Icons
IT技术
reactjs
react-icons
2021-05-03 17:23:55
4个回答
使用Docs 中IconContext提到的。
function BlueLargeIcon() {
return (
<IconContext.Provider
value={{ color: 'blue', size: '50px' }}
>
<div>
<FaBeer />
</div>
</IconContext.Provider>
);
}
要定位特定的图标组件，您可以使用styleprop 或在组件本身上使用相同的 API（请参阅配置）：
const style = { color: "white", fontSize: "1.5em" }
<FaFacebookF style={style} />
// API
<FaFacebookF color="white" fontSize="1.5em" />
我认为这里最简单的方法是将classNameprops直接传递给您想要应用样式的图标。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 中定义 IconContext 的位置，您可以看到允许的props：
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我们可以获得更多关于它是如何工作的上下文。
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。然后将它们作为props传递给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将使用IconContextif one 已定义，将返回的元素包装在其中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>
)
};
因此，如果您查看与 className 相关的代码，您会发现我们实际上可以将 className 添加到 Context 和/或直接 ( <FaFacebook className="bg-blue" />)props，它们实际上会被组合并应用于返回的svg
let className;
if (conf.className) className = conf.className;
if (props.className) className = (className ? className + ' ' : '') + props.className;
此外，在 Context 或 props 中定义的样式将被组合并应用于 svg
style={{ color: props.color || conf.color, ...conf.style, ...props.style}}
这里要注意的一件事是所有样式和类都直接应用于返回的svg元素。因此，在您的情况下，您可能需要一个包装元素来构建边框半径和背景颜色，然后将颜色和大小的相关样式直接应用于 svg。
对任何人这可能有帮助......
某些图标的颜色无法更改。
例如，我尝试{ GrClose }通过执行更改图标的颜色
<GrClose
className="icon"
style={{
position: 'absolute',
top: '20px',
right: '20px',
}}
size="50px"
color="white"
onClick={handleExit}
/>
它只是没有改变，当我用图标替换我的图标时{ AiOutlineClose }它起作用了！
只需将“颜色”属性添加到
像这样：
<Icon color="blue" />
其它你可能感兴趣的问题