tessl/npm-react-icons

SVG React icons of popular icon packs using ES6 imports

—

Pending

Overview

Eval results

Files

Context Configuration

Name: tessl/npm-react-icons
Author: tessl

Global configuration system using React Context API for setting default icon properties across your application. This allows you to configure icon appearance once and have it apply to all child icons.

Capabilities

IconContext Provider

React Context provider for configuring default icon properties.

/**
 * React Context for providing icon configuration to child components
 */
const IconContext: React.Context<IconContext>;

interface IconContext {
  /** Default color for all icons (e.g., "red", "#ff0000", "currentColor") */
  color?: string;
  /** Default size for all icons (e.g., "1em", "24px", "1.5rem") */
  size?: string;
  /** Default CSS class names to apply to all icons */
  className?: string;
  /** Default inline styles object for all icons */
  style?: React.CSSProperties;
  /** Default SVG attributes to apply to all icons */
  attr?: React.SVGAttributes<SVGElement>;
}

Usage Examples:

import React from "react";
import { IconContext } from "react-icons";
import { FaBeer, FaHome, FaUser } from "react-icons/fa";

// Basic context configuration
function App() {
  return (
    <IconContext.Provider value={{ color: "blue", size: "1.5em" }}>
      <div>
        <FaBeer />   {/* Will be blue and 1.5em */}
        <FaHome />   {/* Will be blue and 1.5em */}
        <FaUser />   {/* Will be blue and 1.5em */}
      </div>
    </IconContext.Provider>
  );
}

// Advanced context configuration
function StyledApp() {
  return (
    <IconContext.Provider 
      value={{ 
        color: "#333",
        size: "20px",
        className: "app-icon",
        style: { marginRight: "8px" },
        attr: { "aria-hidden": "true" }
      }}
    >
      <div>
        <FaBeer title="Beer" />  {/* Inherits all context styles */}
        <FaHome color="red" />   {/* Overrides color to red */}
      </div>
    </IconContext.Provider>
  );
}

DefaultContext

Default context configuration used when no IconContext.Provider is present.

/**
 * Default context configuration with all properties explicitly set to undefined
 * Used as fallback when no context provider is present
 */
const DefaultContext: IconContext = {
  color: undefined,
  size: undefined,
  className: undefined,
  style: undefined,
  attr: undefined,
};

Context Inheritance and Overrides

Icons inherit context values but can override them with direct props:

import { IconContext } from "react-icons";
import { FaBeer, FaHome } from "react-icons/fa";

function ContextExample() {
  return (
    <IconContext.Provider value={{ color: "blue", size: "24px" }}>
      <div>
        {/* Uses context: blue color, 24px size */}
        <FaBeer />
        
        {/* Overrides color but keeps context size */}
        <FaHome color="red" />
        
        {/* Overrides both color and size */}
        <FaBeer color="green" size="32px" />
        
        {/* Nested context - inner context takes precedence */}
        <IconContext.Provider value={{ color: "purple" }}>
          <FaHome />  {/* Purple color, 24px size (inherited from outer) */}
        </IconContext.Provider>
      </div>
    </IconContext.Provider>
  );
}

Advanced Usage

Conditional Context

import { IconContext } from "react-icons";
import { FaBeer } from "react-icons/fa";

function ThemeAwareIcons({ darkMode }) {
  const contextValue = {
    color: darkMode ? "#ffffff" : "#000000",
    size: "18px",
    className: darkMode ? "icon-dark" : "icon-light"
  };

  return (
    <IconContext.Provider value={contextValue}>
      <div>
        <FaBeer />
        {/* Icons automatically adapt to theme */}
      </div>
    </IconContext.Provider>
  );
}

Multiple Context Configurations

import { IconContext } from "react-icons";
import { FaBeer, FaHome, FaUser } from "react-icons/fa";

function MultiContextApp() {
  return (
    <div>
      {/* Navigation icons */}
      <IconContext.Provider value={{ size: "20px", color: "#666" }}>
        <nav>
          <FaHome />
          <FaUser />
        </nav>
      </IconContext.Provider>

      {/* Content icons */}
      <IconContext.Provider value={{ size: "16px", color: "#333" }}>
        <main>
          <FaBeer />
        </main>
      </IconContext.Provider>
    </div>
  );
}

CSS-in-JS Integration

import styled from "styled-components";
import { IconContext } from "react-icons";
import { FaBeer } from "react-icons/fa";

const StyledIconProvider = styled(IconContext.Provider)`
  .custom-icon {
    transition: color 0.2s ease;
    
    &:hover {
      color: #ff6b6b;
    }
  }
`;

function StyledIcons() {
  return (
    <StyledIconProvider value={{ className: "custom-icon", size: "24px" }}>
      <FaBeer />
    </StyledIconProvider>
  );
}

Context with Custom Attributes

import { IconContext } from "react-icons";
import { FaBeer, FaHome } from "react-icons/fa";

function AccessibleIcons() {
  return (
    <IconContext.Provider 
      value={{
        attr: {
          "aria-hidden": "true",
          "focusable": "false",
          "role": "img"
        },
        size: "20px"
      }}
    >
      <div>
        <FaBeer title="Beer icon" />  {/* Combines context attrs with title */}
        <FaHome />                    {/* Uses context attrs */}
      </div>
    </IconContext.Provider>
  );
}

Performance Considerations

Context Re-renders

import React, { useMemo } from "react";
import { IconContext } from "react-icons";

function OptimizedIconProvider({ children, theme }) {
  // Memoize context value to prevent unnecessary re-renders
  const contextValue = useMemo(() => ({
    color: theme.iconColor,
    size: theme.iconSize,
    className: theme.iconClass
  }), [theme.iconColor, theme.iconSize, theme.iconClass]);

  return (
    <IconContext.Provider value={contextValue}>
      {children}
    </IconContext.Provider>
  );
}