Solución:
Usar IconContext
como se menciona en los Documentos.
function BlueLargeIcon()
return (
);
Creo que la forma más fácil aquí sería simplemente pasar el className
prop directamente al icono al que le gustaría aplicar estilos. Código fuente en un CodeSandbox. He usado clases tailwindcss aquí, pero podrías usar las tuyas con la misma facilidad.
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 (
Icon Demo
);
Si desea un poco más de contexto sobre cómo funciona esto, podemos sumergirnos en el código fuente de react-icons. Si observa dónde se define IconContext dentro de react-icons, puede ver los accesorios permitidos:
export interface IconContext
color?: string;
size?: string;
className?: string;
style?: React.CSSProperties;
attr?: React.SVGAttributes;
export const DefaultContext: IconContext =
color: undefined,
size: undefined,
className: undefined,
style: undefined,
attr: undefined,
;
export const IconContext: React.Context = React.createContext && React.createContext(DefaultContext);
De hecho, puede pasar color, tamaño, estilo, atributos svg adicionales e incluso un className string. Pero esto requiere que envuelva el componente Icon en el contexto.
Cuando instalas react-icons, todos los iconos se agregan al directorio node_modules en un formato que se ve así:
// 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);
;
Si echamos un vistazo al código fuente de GenIcon
podemos obtener un poco más de contexto sobre cómo está funcionando esto.
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) => (
Tree2Element(data.child)
);
export interface IconBaseProps extends React.SVGAttributes 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 ;
return IconContext !== undefined
? (conf: IconContext) => elem(conf)
: elem(DefaultContext);
Entonces, GenIcon
es una función que acepta un objeto con una interfaz de IconTree que incluye tag
, attr
y child
propiedades. Podemos ver esto en acción en el código generado arriba. GenIcon
devuelve una función en sí misma. Esta función acepta props como un argumento que implementa el IconBaseProps
interfaz. los IconBaseProps
la interfaz se extiende React.SVGAttributes
que incluye className
y style
. A continuación, se pasan como accesorios a la IconBase
componente aquí:
export function GenIcon(data: IconTree)
return (props: IconBaseProps) => (
Tree2Element(data.child)
);
Para tener una idea de cómo IconBase
realmente funciona con respecto a la IconContext
echemos un vistazo a su declaración de devolución:
return IconContext !== undefined
? (conf: IconContext) => elem(conf)
: elem(DefaultContext);
Aquí podemos ver que IconBase
invocará una función llamada elem
(definido dentro del cuerpo de IconBase
) de cualquier manera. Entonces, IconBase
usará el IconContext
si hay uno definido, envolviendo el elemento devuelto en IconContext.Consumer
y llamando elem
con el IconContext
. Pero si IconContext
no está definido en este ámbito, IconBase
usará el DefaultContext
en lugar de.
Para entender cómo funciona esto, debemos mirar el elem
función definida dentro de IconBase
. Aquí está la fuente completa nuevamente:
const elem = (conf: IconContext) => "1em";
let className;
if (conf.className) className = conf.className;
if (props.className) className = (className ? className + ' ' : '') + props.className;
return (
)
;
Entonces, si echas un vistazo al código relacionado con className, puedes ver que en realidad podemos agregar className al contexto y / o los accesorios directamente (
) y en realidad se combinarán y aplicarán a las devoluciones. svg
let className;
if (conf.className) className = conf.className;
if (props.className) className = (className ? className + ' ' : '') + props.className;
Además, los estilos definidos en el contexto o los accesorios se combinarán y aplicarán al svg.
style=
Una cosa a tener en cuenta aquí es que todos los estilos y clases se aplican directamente al devuelto svg
elemento. Entonces, en su caso, probablemente necesitaría tener un elemento de envoltura para construir el radio del borde y el color de fondo y luego aplicar los estilos relevantes para el color y el tamaño directamente al svg.
Te mostramos comentarios y puntuaciones
Si haces scroll puedes encontrar las notas de otros usuarios, tú además tienes la habilidad mostrar el tuyo si lo deseas.