Icon Font Integration

/**
 * 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;
}

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>
  );
}

// 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>
  );
}

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>
  );
}

<!-- 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" />

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