or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdcore-components.mdicon-font.mdindex.mdindividual-icons.md
tile.json

configuration.mddocs/

Global Configuration

React Context provider for global icon settings and utility functions for managing two-tone color themes across the entire application.

Capabilities

IconProvider Component

React Context provider that allows global configuration of icon behavior and appearance throughout the component tree.

/**
 * React Context provider for global icon configuration
 */
const IconProvider: React.Provider<IconContextProps>;

interface IconContextProps {
  /** CSS class prefix for all icons (default: 'anticon') */
  prefixCls?: string;
  /** Root CSS class applied to icon containers */
  rootClassName?: string;
  /** Content Security Policy configuration for style injection */
  csp?: { nonce?: string };
  /** CSS layer name for style isolation */
  layer?: string;
}

Usage Examples:

import React from "react";
import { IconProvider } from "@ant-design/icons";
import { StarOutlined, HeartFilled } from "@ant-design/icons";

// Basic provider setup
function App() {
  return (
    <IconProvider value={{ prefixCls: 'my-icon' }}>
      <MyComponent />
    </IconProvider>
  );
}

// CSP-compliant setup
function SecureApp() {
  return (
    <IconProvider 
      value={{ 
        csp: { nonce: 'your-csp-nonce' },
        layer: 'icons'
      }}
    >
      <MyComponent />
    </IconProvider>
  );
}

// Custom styling setup  
function CustomStyledApp() {
  return (
    <IconProvider 
      value={{ 
        prefixCls: 'custom-icon',
        rootClassName: 'icon-container'
      }}
    >
      <div>
        <StarOutlined /> {/* Will have custom-icon prefix */}
        <HeartFilled />  {/* Will have custom-icon prefix */}
      </div>
    </IconProvider>
  );
}

Two-Tone Color Management

Global functions for managing the default colors used by all two-tone icons throughout the application.

/**
 * Set global two-tone color configuration for all two-tone icons
 * @param twoToneColor - Single color string or [primary, secondary] color tuple
 */
function setTwoToneColor(twoToneColor: TwoToneColor): void;

/**
 * Get current global two-tone color configuration
 * @returns Current two-tone color setting
 */
function getTwoToneColor(): TwoToneColor;

type TwoToneColor = string | [string, string];

Usage Examples:

import React from "react";
import { 
  setTwoToneColor, 
  getTwoToneColor,
  StarTwoTone, 
  HeartTwoTone, 
  SettingTwoTone 
} from "@ant-design/icons";

// Set single color (primary only)
setTwoToneColor('#1890ff');

// Set both primary and secondary colors
setTwoToneColor(['#1890ff', '#69c0ff']);

// Get current setting
const currentColors = getTwoToneColor();
console.log(currentColors); // ['#1890ff', '#69c0ff']

function GlobalColorExample() {
  return (
    <div>
      {/* All two-tone icons will use the global colors */}
      <StarTwoTone />
      <HeartTwoTone />
      <SettingTwoTone />
      
      {/* Individual icons can override global settings */}
      <HeartTwoTone twoToneColor="#eb2f96" />
    </div>
  );
}

// Theme switching example
function ThemeSwitcher() {
  const applyTheme = (theme: 'blue' | 'green' | 'red') => {
    switch (theme) {
      case 'blue':
        setTwoToneColor(['#1890ff', '#69c0ff']);
        break;
      case 'green':
        setTwoToneColor(['#52c41a', '#73d13d']);
        break;
      case 'red':
        setTwoToneColor(['#f5222d', '#ff4d4f']);
        break;
    }
  };

  return (
    <div>
      <button onClick={() => applyTheme('blue')}>Blue Theme</button>
      <button onClick={() => applyTheme('green')}>Green Theme</button>
      <button onClick={() => applyTheme('red')}>Red Theme</button>
      
      <div>
        <StarTwoTone />
        <HeartTwoTone />
        <SettingTwoTone />
      </div>
    </div>
  );
}

Content Security Policy Support

Configure CSP-compliant style injection for secure environments.

interface CSPOptions {
  /** Nonce value for inline styles to satisfy CSP requirements */
  nonce?: string;
}

Usage Examples:

import React from "react";
import { IconProvider } from "@ant-design/icons";

// CSP setup with nonce
function CSPApp({ nonce }: { nonce: string }) {
  return (
    <IconProvider value={{ csp: { nonce } }}>
      <MyIconComponents />
    </IconProvider>
  );
}

// Server-side rendering with CSP
function SSRApp() {
  // Generate nonce on server
  const nonce = generateNonce(); // Your nonce generation logic
  
  return (
    <html>
      <head>
        <meta 
          httpEquiv="Content-Security-Policy" 
          content={`style-src 'self' 'nonce-${nonce}'`} 
        />
      </head>
      <body>
        <IconProvider value={{ csp: { nonce } }}>
          <App />
        </IconProvider>
      </body>
    </html>
  );
}

CSS Layer Support

Control CSS cascade order using CSS layers for better style isolation.

import React from "react";
import { IconProvider } from "@ant-design/icons";

function LayeredApp() {
  return (
    <>
      <style>{`
        @layer reset, base, icons, components, utilities;
      `}</style>
      
      <IconProvider value={{ layer: 'icons' }}>
        <MyApp />
      </IconProvider>
    </>
  );
}

Configuration Best Practices

Application Setup

import React from "react";
import { IconProvider, setTwoToneColor } from "@ant-design/icons";

// Set global theme colors at app initialization
setTwoToneColor(['#1890ff', '#69c0ff']);

function App() {
  return (
    <IconProvider 
      value={{
        prefixCls: 'app-icon',
        csp: { nonce: process.env.CSP_NONCE },
        layer: 'icons'
      }}
    >
      <Router>
        <Routes>
          {/* Your app routes */}
        </Routes>
      </Router>
    </IconProvider>
  );
}

Theme Integration

import { setTwoToneColor } from "@ant-design/icons";

// Integrate with your theme system
const themes = {
  light: ['#1890ff', '#69c0ff'],
  dark: ['#177ddc', '#3c9ae8'],
  high_contrast: ['#000000', '#333333']
};

function applyIconTheme(themeName: keyof typeof themes) {
  setTwoToneColor(themes[themeName]);
}

// Call when theme changes
applyIconTheme('dark');

The configuration system ensures consistent icon appearance across large applications while maintaining flexibility for specific use cases and security requirements.