tessl/npm-ant-design--icons

React icon components library providing 800+ high-quality SVG icons with three themes (Outlined, Filled, Two-tone) for Ant Design applications

—

Pending

Overview

Eval results

Files

Core Components

Name: tessl/npm-ant-design--icons
Author: tessl

Base components that provide the rendering infrastructure and customization capabilities for all icons in the @ant-design/icons library.

Capabilities

Icon Component

The base Icon component with static methods for global configuration and support for custom SVG components.

/**
 * Base Icon component with customization options and static methods
 */
const Icon: React.ForwardRefExoticComponent<
  Omit<IconComponentProps, 'ref'> & React.RefAttributes<HTMLSpanElement>
>;

interface IconComponentProps extends IconBaseProps {
  /** SVG viewBox attribute for custom sizing */
  viewBox?: string;
  /** Custom React component to render instead of built-in SVG */
  component?: React.ComponentType<CustomIconComponentProps | React.SVGProps<SVGSVGElement>>;
  /** Accessibility label for screen readers */
  ariaLabel?: React.AriaAttributes['aria-label'];
}

interface IconBaseProps extends React.HTMLProps<HTMLSpanElement> {
  /** Enable spinning animation */
  spin?: boolean;
  /** Rotation angle in degrees */
  rotate?: number;
}

interface CustomIconComponentProps {
  width: string | number;
  height: string | number;
  fill?: string;
  viewBox?: string;
  className?: string;
  style?: React.CSSProperties;
}

Usage Examples:

import React from "react";
import Icon from "@ant-design/icons";

// Custom SVG component
const CustomSvg = () => (
  <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
    <path d="M512 64L64 512l448 448 448-448L512 64z" />
  </svg>
);

function CustomIconExample() {
  return (
    <div>
      {/* Using custom SVG component */}
      <Icon component={CustomSvg} />
      
      {/* With custom styling */}
      <Icon 
        component={CustomSvg}
        style={{ fontSize: '24px', color: 'red' }}
        spin
      />
      
      {/* With rotation */}
      <Icon component={CustomSvg} rotate={90} />
    </div>
  );
}

AntdIcon Component

Internal component used by all individual icon components, handling SVG rendering and theme-specific features.

/**
 * Internal Ant Design icon component with theme support
 */
interface AntdIconProps extends IconBaseProps {
  /** Override two-tone colors for this specific icon instance */
  twoToneColor?: TwoToneColor;
}

interface IconComponentProps extends AntdIconProps {
  /** Icon definition from @ant-design/icons-svg */
  icon: IconDefinition;
}

type TwoToneColor = string | [string, string];

Usage Examples:

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

function AntdIconExample() {
  return (
    <div>
      {/* Basic icon usage */}
      <StarOutlined />
      
      {/* Two-tone icon with custom colors */}
      <HeartTwoTone twoToneColor="#eb2f96" />
      <HeartTwoTone twoToneColor={["#eb2f96", "#f759ab"]} />
      
      {/* Icon with animations */}
      <StarOutlined spin />
      <StarOutlined rotate={45} />
      
      {/* Icon with custom styling */}
      <StarOutlined 
        style={{ fontSize: '20px', color: '#1890ff' }}
        className="custom-icon"
      />
    </div>
  );
}

IconBase Component

Low-level component that handles SVG rendering, color management, and style injection.

/**
 * Base component for rendering SVG icons with color and style management
 */
interface IconProps {
  /** Icon definition containing SVG data */
  icon: IconDefinition;
  /** CSS class name */
  className?: string;
  /** Click event handler */
  onClick?: React.MouseEventHandler<SVGSVGElement>;
  /** Inline styles */
  style?: React.CSSProperties;
  /** Primary color for two-tone icons */
  primaryColor?: string;
  /** Secondary color for two-tone icons */
  secondaryColor?: string;
  /** SVG focusable attribute */
  focusable?: string;
}

interface TwoToneColorPaletteSetter {
  primaryColor: string;
  secondaryColor?: string;
}

interface TwoToneColorPalette extends TwoToneColorPaletteSetter {
  calculated?: boolean;
}

AntdIcon Component with Static Methods

The default export from individual icon components (like StarOutlined) includes static methods for global configuration.

/**
 * Individual icon component with static methods for global two-tone color management
 */
interface IconBaseComponent<Props> extends React.ForwardRefExoticComponent<
  Props & React.RefAttributes<HTMLSpanElement>
> {
  getTwoToneColor(): TwoToneColor;
  setTwoToneColor(twoToneColor: TwoToneColor): void;
}

// Example: StarOutlined has these static methods
const StarOutlined: IconBaseComponent<AntdIconProps>;

Usage Examples:

import { StarOutlined, StarTwoTone, HeartTwoTone } from "@ant-design/icons";

// Set global two-tone colors using any icon's static methods
StarOutlined.setTwoToneColor('#eb2f96');
StarOutlined.setTwoToneColor(['#1890ff', '#69c0ff']);

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

function GlobalColorExample() {
  return (
    <div>
      {/* These will use the global two-tone colors */}
      <StarTwoTone />
      <HeartTwoTone />
      
      {/* This overrides the global setting */}
      <HeartTwoTone twoToneColor="#52c41a" />
    </div>
  );
}