如何设计 React-Icons 的样式
How to Style React-Icons
我想知道如何设置我使用 react-icons
导入的图标的样式。
特别是,我希望能够创建类似于这样的外观:
也就是说,我想添加背景颜色、填充、边框半径等。但是,我找不到简单的方法来做到这一点。
我可以添加尺寸和颜色道具,这将改变图标的实际尺寸和颜色。但是我没有简单的方法来更改其他元素。
有谁知道我该怎么做(或者他们可以推荐一个可以帮助我解决这个问题的不同库)吗?
使用 IconContext
中提到的 Docs。
function BlueLargeIcon() {
return (
<IconContext.Provider
value={{ color: 'blue', size: '50px' }}
>
<div>
<FaBeer />
</div>
</IconContext.Provider>
);
}
要针对特定的图标组件,您可以使用 style
道具或在组件本身上使用相同的 API(参见 Configurations):
const style = { color: "white", fontSize: "1.5em" }
<FaFacebookF style={style} />
// API
<FaFacebookF color="white" fontSize="1.5em" />
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;
}
有一种更简单的方法来更改 react-icon 的颜色。您可以选择带有 .icon > *
的 svg 图标内的所有内容,使用 css fill
来填充svg 路径。
```
.icon > * {
fill: #B3B3B3;
}
.icon > *:hover {
fill: #747474;
}
```
您可以通过简单地向图标添加颜色 属性 来实现,其他属性(如大小)也是如此。
<BiXCircle size={40} color="red" />
只需将 "颜色" 属性 添加到
像这样:
<Icon color="blue" />
我认为这里最简单的方法是将 className
道具直接传递给您想要应用样式的图标。 Source Code in a CodeSandbox. I've used 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
return 是一个函数本身。此函数接受 props 作为实现 IconBaseProps
接口的参数。 IconBaseProps
接口扩展了 React.SVGAttributes
,其中包括 className
and 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
,IconBase
将使用 IconContext
,将 returned 元素包装在 IconContext.Consumer
中,并使用 IconContext
调用 elem
。但是,如果 IconContext
未在此范围内定义,则 IconBase
将使用 DefaultContext
代替。
要了解这是如何工作的,我们需要查看 IconBase
中定义的 elem
函数。又是完整的来源:
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 and/or props 中(<FaFacebook className="bg-blue" />
),它们将实际上被组合并应用于 returned svg
let className;
if (conf.className) className = conf.className;
if (props.className) className = (className ? className + ' ' : '') + props.className;
此外,上下文或道具中定义的样式将被组合并应用于 svg
style={{ color: props.color || conf.color, ...conf.style, ...props.style}}
这里要注意的一件事是所有样式和 类 都直接应用于 returned svg
元素。因此,在您的情况下,您可能需要一个包装元素来构建边框半径和背景颜色,然后将颜色和大小的相关样式直接应用于 svg。
对可能有帮助的人...
部分图标颜色无法更改。
例如,我试图通过
来改变 { GrClose }
图标的颜色
<GrClose
className="icon"
style={{
position: 'absolute',
top: '20px',
right: '20px',
}}
size="50px"
color="white"
onClick={handleExit}
/>
它只是没有改变,当我用 { AiOutlineClose }
图标替换我的图标时它起作用了!
索环图标的颜色变化不适用。您可以通过传递 class 并使用 css 或直接在
内尝试与其他人一起尝试
在您的 styles.scss 或 css
.iconFaFacebook {
color: blue;
font-size: 2.5rem;
}
<FaFacebook className={styles.iconFaFacebook} />
function blackReactIcons () {
return(
<div>
<FaTwitter fill='#000' />
<FaLinkedinIn fill='#000' />
<FaGithub fill='#000' />
</div>
);
}
我想知道如何设置我使用 react-icons
导入的图标的样式。
特别是,我希望能够创建类似于这样的外观:
也就是说,我想添加背景颜色、填充、边框半径等。但是,我找不到简单的方法来做到这一点。
我可以添加尺寸和颜色道具,这将改变图标的实际尺寸和颜色。但是我没有简单的方法来更改其他元素。
有谁知道我该怎么做(或者他们可以推荐一个可以帮助我解决这个问题的不同库)吗?
使用 IconContext
中提到的 Docs。
function BlueLargeIcon() {
return (
<IconContext.Provider
value={{ color: 'blue', size: '50px' }}
>
<div>
<FaBeer />
</div>
</IconContext.Provider>
);
}
要针对特定的图标组件,您可以使用 style
道具或在组件本身上使用相同的 API(参见 Configurations):
const style = { color: "white", fontSize: "1.5em" }
<FaFacebookF style={style} />
// API
<FaFacebookF color="white" fontSize="1.5em" />
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;
}
有一种更简单的方法来更改 react-icon 的颜色。您可以选择带有 .icon > *
的 svg 图标内的所有内容,使用 css fill
来填充svg 路径。
```
.icon > * {
fill: #B3B3B3;
}
.icon > *:hover {
fill: #747474;
}
```
您可以通过简单地向图标添加颜色 属性 来实现,其他属性(如大小)也是如此。
<BiXCircle size={40} color="red" />
只需将 "颜色" 属性 添加到
像这样:
<Icon color="blue" />
我认为这里最简单的方法是将 className
道具直接传递给您想要应用样式的图标。 Source Code in a CodeSandbox. I've used 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
return 是一个函数本身。此函数接受 props 作为实现 IconBaseProps
接口的参数。 IconBaseProps
接口扩展了 React.SVGAttributes
,其中包括 className
and 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
,IconBase
将使用 IconContext
,将 returned 元素包装在 IconContext.Consumer
中,并使用 IconContext
调用 elem
。但是,如果 IconContext
未在此范围内定义,则 IconBase
将使用 DefaultContext
代替。
要了解这是如何工作的,我们需要查看 IconBase
中定义的 elem
函数。又是完整的来源:
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 and/or props 中(<FaFacebook className="bg-blue" />
),它们将实际上被组合并应用于 returned svg
let className;
if (conf.className) className = conf.className;
if (props.className) className = (className ? className + ' ' : '') + props.className;
此外,上下文或道具中定义的样式将被组合并应用于 svg
style={{ color: props.color || conf.color, ...conf.style, ...props.style}}
这里要注意的一件事是所有样式和 类 都直接应用于 returned svg
元素。因此,在您的情况下,您可能需要一个包装元素来构建边框半径和背景颜色,然后将颜色和大小的相关样式直接应用于 svg。
对可能有帮助的人...
部分图标颜色无法更改。
例如,我试图通过
{ GrClose }
图标的颜色
<GrClose
className="icon"
style={{
position: 'absolute',
top: '20px',
right: '20px',
}}
size="50px"
color="white"
onClick={handleExit}
/>
它只是没有改变,当我用 { AiOutlineClose }
图标替换我的图标时它起作用了!
索环图标的颜色变化不适用。您可以通过传递 class 并使用 css 或直接在
在您的 styles.scss 或 css
.iconFaFacebook {
color: blue;
font-size: 2.5rem;
}
<FaFacebook className={styles.iconFaFacebook} />
function blackReactIcons () {
return(
<div>
<FaTwitter fill='#000' />
<FaLinkedinIn fill='#000' />
<FaGithub fill='#000' />
</div>
);
}