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

Icon Font Integration

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

Create custom icon components from external icon fonts, particularly iconfont.cn, enabling use of custom or additional icons beyond the built-in set.

Capabilities

createFromIconfontCN Function

Creates a custom icon component that can render icons from iconfont.cn or other icon font services.

/**
 * Create a custom icon component from iconfont.cn or other icon font services
 * @param options - Configuration options for the icon font
 * @returns React component for rendering icon font icons
 */
function createFromIconfontCN<T extends string = string>(
  options?: CustomIconOptions
): React.FC<IconFontProps<T>>;

interface CustomIconOptions {
  /** Script URL(s) for the icon font - can be single URL or array of URLs */
  scriptUrl?: string | string[];
  /** Additional props to pass to all icon instances */
  extraCommonProps?: Record<string, unknown>;
}

interface IconFontProps<T extends string = string> extends IconBaseProps {
  /** Icon type/name as defined in the icon font */
  type: T;
}

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

Usage Examples:

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

// Create custom icon component from iconfont.cn
const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});

// Create with multiple script URLs
const MultiIconFont = createFromIconfontCN({
  scriptUrl: [
    '//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js',
    '//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js',
  ],
});

// Create with extra common props
const StyledIconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
  extraCommonProps: {
    style: { fontSize: '16px' },
    className: 'custom-icon-font',
  },
});

function IconFontExample() {
  return (
    <div>
      {/* Basic icon font usage */}
      <IconFont type="icon-tuichu" />
      <IconFont type="icon-facebook" />
      <IconFont type="icon-twitter" />
      
      {/* With animations and styling */}
      <IconFont 
        type="icon-loading" 
        spin 
        style={{ fontSize: '24px', color: '#1890ff' }} 
      />
      
      {/* With rotation */}
      <IconFont type="icon-arrow" rotate={90} />
      
      {/* Multiple font sources */}
      <MultiIconFont type="icon-custom-1" />
      <MultiIconFont type="icon-custom-2" />
    </div>
  );
}

TypeScript Support

The function supports generic typing for better type safety with your icon names.

// Define your icon types for better TypeScript support
type MyIconNames = 
  | 'icon-home'
  | 'icon-user' 
  | 'icon-settings'
  | 'icon-logout';

const TypedIconFont = createFromIconfontCN<MyIconNames>({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});

function TypedExample() {
  return (
    <div>
      {/* TypeScript will provide autocomplete and type checking */}
      <TypedIconFont type="icon-home" />
      <TypedIconFont type="icon-user" />
      {/* TypeScript error: Type '"invalid-icon"' is not assignable */}
      {/* <TypedIconFont type="invalid-icon" /> */}
    </div>
  );
}

Integration with Existing Icons

Icon font components work seamlessly alongside built-in icons and support the same props and styling.

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

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});

function MixedIconsExample() {
  return (
    <div>
      {/* Mix built-in and custom icons */}
      <StarOutlined />
      <IconFont type="icon-custom" />
      
      {/* Same styling capabilities */}
      <StarOutlined style={{ fontSize: '20px', color: 'blue' }} />
      <IconFont 
        type="icon-custom" 
        style={{ fontSize: '20px', color: 'blue' }} 
      />
      
      {/* Same animation support */}
      <StarOutlined spin />
      <IconFont type="icon-loading" spin />
    </div>
  );
}

Setup Process

1. Generate Icon Font

Visit iconfont.cn or similar service
Create a project and add your custom icons
Generate the font and copy the script URL
Use the script URL in createFromIconfontCN

2. Find Icon Names

Icon names in the font service correspond to the type prop:

<!-- In the generated font, icons might be defined as: -->
<symbol id="icon-home" viewBox="...">...</symbol>
<symbol id="icon-user" viewBox="...">...</symbol>

// Use the symbol id as the type prop
<IconFont type="icon-home" />
<IconFont type="icon-user" />

3. Multiple Font Sources

const IconFont = createFromIconfontCN({
  scriptUrl: [
    '//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js', // Primary icons
    '//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js', // Additional icons
  ],
});

Error Handling:

If the script URL fails to load or an icon type doesn't exist, the component will render an empty space without throwing errors, maintaining UI stability.

Install with Tessl CLI