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.

---

---

Utiliza Nuestro Buscador