### Installing Components with withInstall Helper

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue2-api.md

Illustrates the internal usage of the `withInstall` helper for making icon components installable with Vue.

```typescript
const icon = withInstall(IconComponent);
Vue.use(icon);
```

--------------------------------

### Install TDesign Icons Web Components

Source: https://github.com/tencent/tdesign-icons/blob/develop/packages/web-components/README.md

Install the TDesign Icons Web Components package using npm.

```bash
npm i tdesign-icons-web-components
```

--------------------------------

### Install TDesign Icons for React

Source: https://github.com/tencent/tdesign-icons/blob/develop/packages/react/README.md

Install the TDesign Icons React package using npm.

```bash
npm i tdesign-icons-react
```

--------------------------------

### Install TDesign Icons for Vue

Source: https://github.com/tencent/tdesign-icons/blob/develop/packages/vue/README.md

Install the TDesign Icons Vue package using npm.

```bash
npm i tdesign-icons-vue
```

--------------------------------

### Install tdesign-icons-angular

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/angular-api.md

Install the TDesign Icons Angular package using npm.

```bash
npm install tdesign-icons-angular
```

--------------------------------

### Debug Logging Example

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/utilities-and-internals.md

Example of enabling debug logging during development by setting the `NODE_ENV` environment variable. Logs icon loading information.

```typescript
// Enable with NODE_ENV=development
console.log('Icon loaded:', iconName);
```

--------------------------------

### CSS Optimization Example

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/utilities-and-internals.md

Shows how to import CSS styles separately, allowing for conditional loading of icon styles.

```typescript
import 'tdesign-icons-react/lib/style/index.css';
```

--------------------------------

### Global Style Application Example

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/angular-api.md

Shows how component styles are not encapsulated and can be affected by global styles, allowing straightforward CSS customization.

```css
t-icon {
  color: blue;
}
```

--------------------------------

### Install TDesign Icons for Vue 3

Source: https://github.com/tencent/tdesign-icons/blob/develop/packages/vue-next/README.md

Install the TDesign Icons Vue 3 package using npm.

```bash
npm i tdesign-icons-vue-next
```

--------------------------------

### Accessing Icon Manifest

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue2-api.md

Demonstrates how to import and inspect the `manifest` object to get a list of available icon names.

```typescript
import { manifest } from 'tdesign-icons-vue';

// manifest is an object with icon names as keys and metadata as values
console.log(Object.keys(manifest)); // ['close', 'check', 'time', ...]
```

--------------------------------

### Flutter Package Release Process

Source: https://github.com/tencent/tdesign-icons/blob/develop/packages/flutter/CONTRIBUTING.md

Follow these steps to install dependencies, generate resources and code, analyze the code, update the version, and publish the Flutter package.

```bash
# 1. Install dependencies
pnpm install

# 2. Generate resources
pnpm run generate  # In the root directory

# 3. Enter Flutter package directory
cd packages/flutter

# 4. Install Flutter dependencies
flutter pub get

# 5. Generate code
dart run tool/generate.dart

# 6. Code check
flutter analyze

# 7. Update version number (edit pubspec.yaml)

# 8. Publish
flutter pub publish
```

--------------------------------

### CSS Customization for Icons

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue3-api.md

Provides examples of how to customize the appearance of icons using CSS.

```APIDOC
### CSS Customization

```css
/* Override global icon size */
.t-icon {
  width: 24px;
  height: 24px;
}

/* Override specific icon color */
.t-icon-close {
  color: red;
}
```
```

--------------------------------

### Code Splitting Example

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/utilities-and-internals.md

Demonstrates how individual icon components can be tree-shaken to reduce bundle size. Only the imported `CloseIcon` will be included in the final bundle.

```typescript
// Only CloseIcon is bundled
import { CloseIcon } from 'tdesign-icons-react';
```

--------------------------------

### Example Usage of IconFont Component

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue2-api.md

Illustrates different ways to use the `IconFont` component, including basic usage, specifying the tag, handling click events, and loading custom icon fonts.

```html
<template>
  <div>
    {/* Basic iconfont */}
    <IconFont name="close" />

    {/* Different element type */}
    <IconFont name="check" tag="span" class="custom-icon" />

    {/* With event handler */}
    <IconFont name="close" @click="handleClick" />

    {/* Custom iconfont */}
    <IconFont 
      name="custom"
      url="https://example.com/custom.css"
      :load-default-icons="false"
    />
  </div>
</template>

<script>
import { IconFont } from 'tdesign-icons-vue';

export default {
  components: { IconFont },
  methods: {
    handleClick(e) {
      console.log('Iconfont clicked', e);
    }
  }
};
</script>
```

--------------------------------

### Build All Framework Packages

Source: https://github.com/tencent/tdesign-icons/blob/develop/README.md

Builds all framework packages within the monorepo. This command targets packages starting with 'tdesign-icons-*'.

```bash
pnpm run --filter "tdesign-icons-*" build
```

--------------------------------

### React useConfig Hook Example

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/configuration-reference.md

Demonstrates how to use the useConfig hook in React to access and utilize the class prefix and locale settings.

```typescript
import { useConfig } from 'tdesign-icons-react';

export function MyComponent() {
  const { classPrefix, locale } = useConfig();
  // classPrefix: 't'
  // locale: 'zh-CN'
  
  return <Icon name={`${classPrefix}-icon-close`} />; 
}
```

--------------------------------

### Vue 3 Plugin Installation

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/api-index.md

Install the TDesign Icons Vue 3 plugin globally using app.use() for component registration.

```typescript
import TDesignIcons from 'tdesign-icons-vue-next';
app.use(TDesignIcons);
```

--------------------------------

### Angular ICONFONT_URLS Provider Example

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/configuration-reference.md

Demonstrates how to provide custom iconfont URLs using the ICONFONT_URLS injection token in an Angular module.

```typescript
import { ICONFONT_URLS } from 'tdesign-icons-angular';

@NgModule({
  providers: [
    {
      provide: ICONFONT_URLS,
      useValue: [
        'https://example.com/custom-fonts.css',
        'https://example.com/additional-fonts.css'
      ]
    }
  ]
})
export class IconModule { }
```

--------------------------------

### Vue 2 Plugin Installation

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/api-index.md

Install the TDesign Icons Vue 2 plugin globally using Vue.use() for component registration.

```typescript
import TDesignIcons from 'tdesign-icons-vue';
Vue.use(TDesignIcons);
```

--------------------------------

### Comprehensive TDesign Icon Component Example

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/web-components-api.md

Illustrates various ways to use the `tdesign-icon` component, including basic usage, different sizes, custom styling, and JavaScript interaction for properties and events.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>TDesign Icons Web Components</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tdesign-icons-web-components@latest/dist/style.css">
</head>
<body>
  <!-- Basic icon -->
  <tdesign-icon name="close"></tdesign-icon>

  <!-- Icon with size -->
  <tdesign-icon name="check" size="large"></tdesign-icon>
  <tdesign-icon name="time" size="32px"></tdesign-icon>

  <!-- Icon with styling -->
  <tdesign-icon 
    name="heart" 
    class="my-icon"
    style="color: red;"
  ></tdesign-icon>

  <!-- Icon with inner styling -->
  <tdesign-icon 
    name="star"
    inner-class="animated"
    inner-style="transform: rotate(45deg);"
  ></tdesign-icon>

  <script src="https://cdn.jsdelivr.net/npm/tdesign-icons-web-components@latest"></script>

  <script>
    // JavaScript access
    const icon = document.querySelector('tdesign-icon');
    
    // Get/set properties
    console.log(icon.name);
    icon.name = 'close';
    
    // Listen to events
    icon.addEventListener('click', (e) => {
      console.log('Icon clicked', e);
    });
  </script>
</body>
</html>
```

--------------------------------

### CDN Usage Example

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/web-components-api.md

Load TDesign Icons Web Components and Omi library directly from a CDN to make icons available in your HTML. Ensure the CSS is linked for styling.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tdesign-icons-web-components/dist/index.min.css">
</head>
<body>
  <tdesign-icon name="close"></tdesign-icon>

  <script src="https://cdn.jsdelivr.net/npm/omi@latest"></script>
  <script src="https://cdn.jsdelivr.net/npm/tdesign-icons-web-components/dist/index.min.js"></script>
</body>
</html>
```

--------------------------------

### Vue withInstall Helper

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/utilities-and-internals.md

Wraps a Vue component to enable installation as a plugin. Use this to easily register components globally or locally.

```typescript
export default function withInstall<T extends any>(comp: T) {
  comp.install = function(Vue: typeof VueType) {
    Vue.component(comp.name, comp);
  };
  return comp as T & Plugin;
}
```

```typescript
import withInstall from './with-install';
import MyComponent from './MyComponent';

export default withInstall(MyComponent);
```

--------------------------------

### Example Usage of SVG Sprite Icon Component

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue2-api.md

Demonstrates various ways to use the `Icon` component, including basic usage, custom sizes, event handling, and custom sprite definitions.

```html
<template>
  <div>
    {/* Basic icon */}
    <Icon name="close" />

    {/* Custom size */}
    <Icon name="close" size="large" />
    <Icon name="close" size="32px" />

    {/* With event handler */}
    <Icon name="close" @click="onIconClick" />

    {/* Custom sprite */}
    <Icon 
      name="custom"
      url="https://example.com/custom.js"
      :load-default-icons="false"
    />
  </div>
</template>

<script>
import { Icon } from 'tdesign-icons-vue';

export default {
  components: { Icon },
  methods: {
    onIconClick(e) {
      console.log('Icon clicked', e);
    }
  }
};
</script>
```

--------------------------------

### Vue 3 (tdesign-icons-vue-next) Main Exports

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/api-index.md

Provides the primary components and installation methods for TDesign Icons in Vue 3 applications, including a plugin for automatic installation and components for SVG sprite and font icons.

```APIDOC
## Vue 3 (tdesign-icons-vue-next) Main Exports

### Description
Main exports for using TDesign Icons in Vue 3.

### Exports
- `default`: Vue plugin for auto-installing all icons.
- `install`: Function for manual installation.
- `Icon`: Component for SVG sprite-based icons.
- `IconFont`: Component for font-based icons.
- `[IconName]Icon`: Auto-generated components for individual icons.
- `manifest`: Object containing icon metadata.
```

--------------------------------

### Event Handling for Icons in Different Frameworks

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/api-index.md

Provides examples of attaching click event listeners to icons in React, Vue, Angular, and Web Components.

```typescript
// React
<Icon onClick={(e) => console.log(e)} />

// Vue
<Icon @click="handleClick" />

// Angular
<t-icon (click)="handleClick()"></t-icon>

// Web Components
<tdesign-icon @click="handleClick"></tdesign-icon>
```

--------------------------------

### React Custom CDN Configuration

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/configuration-reference.md

Example of configuring a custom CDN URL for icons in the React package, disabling default icon loading.

```typescript
import { Icon } from 'tdesign-icons-react';

<Icon 
  name="close"
  url="https://custom.example.com/icons.js"
  loadDefaultIcons={false}
/>
```

--------------------------------

### React Integration Example

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/web-components-api.md

Use the TDesign Icon component within a React application by importing the 'Icon' component and rendering it as a JSX element.

```typescript
import { Icon } from 'tdesign-icons-web-components';

export function App() {
  return (
    <div>
      <Icon name="close" size="large"></Icon>
    </div>
  );
}
```

--------------------------------

### Vue 3 useConfig Hook Example

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/configuration-reference.md

Shows how to use the useConfig hook in Vue 3 to retrieve the class prefix and locale.

```typescript
import { useConfig } from 'tdesign-icons-vue-next';

const { classPrefix, locale } = useConfig();
```

--------------------------------

### Angular Icon Error Example

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/types-reference.md

An example of an error thrown by the Angular icon component when both 'svg' and 'iconfont' inputs are provided simultaneously.

```typescript
Error: '[t-design:icon]: [svg] and [iconfont] could not be both assigned or not assigned'
```

--------------------------------

### Angular ICON_SVG_URLS Provider Example

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/configuration-reference.md

Demonstrates how to provide custom SVG icon URLs using the ICON_SVG_URLS injection token in an Angular module.

```typescript
import { ICON_SVG_URLS } from 'tdesign-icons-angular';

@NgModule({
  providers: [
    {
      provide: ICON_SVG_URLS,
      useValue: [
        'https://example.com/custom-icons.js',
        'https://example.com/additional-icons.js'
      ]
    }
  ]
})
export class IconModule { }
```

--------------------------------

### Vue Icon Component Generation

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/utilities-and-internals.md

Example of generating Vue icon components. It uses an IconBase component pre-configured with icon data.

```typescript
import IconBase from './icon';

export default IconBase; // Pre-configured with icon data
```

--------------------------------

### CSS Customization for TDesign Icons

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue2-api.md

Provides CSS examples for overriding global icon size and specific icon colors using class names.

```css
/* Override global icon size */
.t-icon {
  width: 24px;
  height: 24px;
}

/* Override specific icon color */
.t-icon-close {
  color: red;
}
```

--------------------------------

### Angular Icon Component Generation

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/utilities-and-internals.md

Example of generating Angular icon components. It extends the TIconStandaloneComponent and sets the icon name.

```typescript
import { TIconStandaloneComponent } from './base';

export class CloseIconComponent extends TIconStandaloneComponent {
  protected name = 'close';
}
```

--------------------------------

### Vue 3 Custom CDN Configuration

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/configuration-reference.md

Example of configuring a custom CDN URL for icons in the Vue 3 package, disabling default icon loading.

```html
<Icon 
  name="close"
  url="https://custom.example.com/icons.js"
  :load-default-icons="false"
/>
```

--------------------------------

### React Icon Component Generation

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/utilities-and-internals.md

Example of generating React icon components using the build tools. It utilizes IconBase and IconElement from tdesign-icons-react.

```typescript
import { IconBase, IconElement } from 'tdesign-icons-react';

const closeIcon: IconElement = { /* ... */ };
export const CloseIcon = (props) => <IconBase {...props} />;
```

--------------------------------

### Shared Dependencies Configuration

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/utilities-and-internals.md

Example of defining shared development dependencies in the root `package.json` using `catalog:` to ensure version consistency across all monorepo packages.

```json
"devDependencies": {
  "typescript": "catalog:",
  "rollup": "catalog:"
}
```

--------------------------------

### Angular Integration Example

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/web-components-api.md

Use TDesign Icons in an Angular project by importing the necessary modules and schemas, then rendering the 'tdesign-icon' custom element in your templates.

```typescript
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { Icon } from 'tdesign-icons-web-components';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

// In your component template:
// <tdesign-icon name="close" size="large"></tdesign-icon>
```

--------------------------------

### Svelte Integration Example

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/web-components-api.md

Incorporate TDesign Icons into a Svelte component by importing the 'Icon' component and using the 'tdesign-icon' tag. Global styling can be applied using ':global()'.

```svelte
<script>
  import { Icon } from 'tdesign-icons-web-components';
</script>

<tdesign-icon name="close" size="large"></tdesign-icon>

<style>
  :global(tdesign-icon) {
    color: blue;
  }
</style>
```

--------------------------------

### Custom Icon Component Implementation

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/angular-api.md

An example of creating a custom icon component by extending TIconStandaloneComponent. It defines the SVG structure, icon name, default styles, and classes.

```typescript
import { Component, Input } from '@angular/core';
import { TIconStandaloneComponent, TIconSize, NgStyleInterface, NgClassInterface } from 'tdesign-icons-angular';

@Component({
  selector: 'app-custom-icon',
  template: `
    <svg [ngClass]="_classes" [ngStyle]="_styles">
      <use xlink:href="#t-icon-{{ name }}"></use>
    </svg>
  `
})
export class CustomIconComponent extends TIconStandaloneComponent {
  @Input() override size: TIconSize | string = 'default';

  protected override name = 'custom';
  protected override styles = { 'stroke-width': '2' };
  protected override classes = { 'custom-icon': true };
}
```

--------------------------------

### Vue 2 (tdesign-icons-vue) Utilities

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/api-index.md

Provides utility functions for TDesign Icons in Vue 2, such as making components installable and rendering SVGs from JSON data.

```APIDOC
## Vue 2 (tdesign-icons-vue) Utilities

### Description
Utility functions for tdesign-icons-vue.

### Utilities
- `withInstall`: Utility to make a component installable.
- `renderFn`: Function to render SVG from JSON data.
- `useConfig`: Hook to access configuration.
```

--------------------------------

### Vue 2 (tdesign-icons-vue) Main Exports

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/api-index.md

Exposes the main components and installation functions for using TDesign Icons in Vue 2 applications. Includes plugin for auto-installation and components for SVG sprite and font-based icons.

```APIDOC
## Vue 2 (tdesign-icons-vue) Main Exports

### Description
Main exports for using TDesign Icons in Vue 2.

### Exports
- `default`: Vue plugin for auto-installing all icons.
- `install`: Function for manual installation.
- `Icon`: Component for SVG sprite-based icons.
- `IconFont`: Component for font-based icons.
- `[IconName]Icon`: Auto-generated components for individual icons.
- `manifest`: Object containing icon metadata.
```

--------------------------------

### Angular Component Loading Icons

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/angular-api.md

An example Angular component demonstrating how to load default and custom SVG icons using TIconService. It includes a button to trigger loading custom icons.

```typescript
import { Component, OnInit } from '@angular/core';
import { TIconService } from 'tdesign-icons-angular';

@Component({
  selector: 'app-icon-loader',
  template: `
    <div>
      <button (click)="loadCustomIcons()">Load Custom Icons</button>
      <t-icon svg="custom-icon"></t-icon>
    </div>
  `
})
export class IconLoaderComponent implements OnInit {
  constructor(private iconService: TIconService) { }

  ngOnInit() {
    // Load default icons
    this.iconService.loadSvgIcon('https://tdesign.gtimg.com/icon/0.2.0/fonts/index.js');
  }

  loadCustomIcons() {
    this.iconService.loadSvgIcon('https://example.com/custom-icons.js');
  }
}
```

--------------------------------

### Build Scripts Summary

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/utilities-and-internals.md

Summary table of common build commands, their purposes, and expected outputs.

```markdown
| Command | Purpose |
|---------|---------|
| `npm run generate` | Generate code from SVGs |
| `npm run build` | Build all packages |
| `npm run lint` | Lint and fix code |
| `npm run dev:icons` | Run dev server |
```

--------------------------------

### Get Configuration with useConfig Hook

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/react-api.md

Access global configuration settings like class prefix and locale using the useConfig hook. This is useful for understanding or overriding default behaviors.

```typescript
import { useConfig } from 'tdesign-icons-react';

const { classPrefix, locale } = useConfig();
```

--------------------------------

### Preset vs Custom Icon Size

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/api-index.md

Demonstrates how to set icon sizes using predefined presets or custom CSS values.

```typescript
// Preset
<Icon size="large" />

// Custom
<Icon size="32px" />
<Icon size="2em" />
```

--------------------------------

### Build for Production

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/utilities-and-internals.md

Command to trigger the production build process, which includes minification of output files.

```bash
npm run build  // Uses NODE_ENV=production
```

--------------------------------

### Generate All Framework Packages

Source: https://github.com/tencent/tdesign-icons/blob/develop/README.md

Execute this command to update icon resources for all frameworks and generate iconfont/svgsprite resources. Run again after updating original icon resources.

```bash
pnpm run generate
```

--------------------------------

### Publish All NPM Packages

Source: https://github.com/tencent/tdesign-icons/blob/develop/README.md

Publishes all framework packages to NPM. This command is used after building and versioning the packages.

```bash
pnpm publish -r
```

--------------------------------

### Web Components (tdesign-icons-web-components) package.json Configuration

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/configuration-reference.md

Configuration details for the tdesign-icons-web-components package, specifying peer dependencies for the OMI library.

```json
{
  "name": "tdesign-icons-web-components",
  "peerDependencies": {
    "omi": ">=7.6.17"
  }
}
```

--------------------------------

### Get Class Prefix in Vue

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/configuration-reference.md

Access the current class prefix configuration in Vue 2/3 using the useConfig composable function.

```typescript
const { classPrefix } = useConfig();
// Returns 't' by default
```

--------------------------------

### CSS Customization for Icons

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/angular-api.md

Demonstrates how to override global icon size, specific icon colors, and utilize size classes for styling.

```css
/* Override global icon size */
.t-icon {
  width: 24px;
  height: 24px;
}

/* Override specific icon color */
.t-icon-close {
  color: red;
}

/* Size classes */
.t-size-large {
  font-size: 32px;
}
```

--------------------------------

### Built-in vs Custom Icons

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/api-index.md

Shows how to use built-in icons by name or load custom icons from a specified URL.

```typescript
// Built-in
<Icon name="close" />

// Custom
<Icon name="custom-icon" url="/custom-icons.js" />
```

--------------------------------

### Use Individual Icon Components

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue2-api.md

Import and use specific icon components directly in your templates. This is useful when you only need a few icons.

```html
<template>
  <CloseIcon />
  <TimeIcon size="large" />
  <CheckIcon class="custom-icon" />
</template>

<script>
import { CloseIcon, TimeIcon, CheckIcon } from 'tdesign-icons-vue';

export default {
  components: { CloseIcon, TimeIcon, CheckIcon }
};
</script>
```

--------------------------------

### Build with Source Maps

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/utilities-and-internals.md

Command to build the project, which includes generating source map files (.js.map) for easier debugging during development.

```bash
npm run build  // Includes .js.map files
```

--------------------------------

### Vue 3 Integration Example

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/web-components-api.md

Integrate TDesign Icons into a Vue 3 application by importing the 'Icon' component and using the 'tdesign-icon' tag in your template.

```vue
<template>
  <div>
    <tdesign-icon name="close" size="large"></tdesign-icon>
  </div>
</template>

<script setup>
import { Icon } from 'tdesign-icons-web-components';
</script>
```

--------------------------------

### Styling TDesign Icons with CSS

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/web-components-api.md

Demonstrates how to style the `tdesign-icon` component using CSS selectors for general styling, specific icons, and sizes.

```css
/* Style outer icon element */
tdesign-icon {
  display: inline-block;
  color: blue;
}

/* Style specific icon */
tdesign-icon[name="close"] {
  color: red;
}

/* Style by size */
tdesign-icon[size="large"] {
  font-size: 32px;
}
```

--------------------------------

### Usage of Icon CSS Variables

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/configuration-reference.md

Demonstrates how to apply CSS custom properties for icon size and color to a custom element.

```css
.custom-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--icon-color);
}
```

--------------------------------

### React (tdesign-icons-react) package.json Configuration

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/configuration-reference.md

Configuration details for the tdesign-icons-react package, including main, module, unpkg, and sideEffects properties.

```json
{
  "name": "tdesign-icons-react",
  "main": "lib/index.js",
  "module": "esm/index.js",
  "unpkg": "dist/index.min.js",
  "sideEffects": [
    "dist/**/*",
    "esm/style/**/*",
    "lib/style/**/*"
  ]
}
```

--------------------------------

### Using TDesign Icons in Vue 2

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue2-api.md

Demonstrates basic usage of individual icon components, applying custom sizes and colors, and handling click events.

```html
<template>
  <div>
    {/* Basic individual icon */}
    <CloseIcon />

    {/* With custom styling */}
    <CheckIcon 
      size="24px"
      :stroke-color="['#1890ff', '#ff4d4f']"
      class="dual-color-icon"
    />

    {/* Event handling */}
    <TimeIcon @click="onTimeClick" />
  </div>
</template>

<script>
import { CloseIcon, CheckIcon, TimeIcon } from 'tdesign-icons-vue';

export default {
  components: { CloseIcon, CheckIcon, TimeIcon },
  methods: {
    onTimeClick(e) {
      console.log('Time icon clicked', e);
    }
  }
};
</script>
```

--------------------------------

### Create Git Tag After Release

Source: https://github.com/tencent/tdesign-icons/blob/develop/packages/flutter/CONTRIBUTING.md

After publishing the package, create a Git tag for the new version.

```bash
git tag v{version}
```

--------------------------------

### Styling Icons with CSS Class and Inline Styles

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/api-index.md

Illustrates applying styles to icons using CSS classes for general styling and inline styles for specific overrides.

```typescript
// CSS class
<Icon className="my-icon" />

// Inline styles
<Icon style={{ color: 'red' }} />
```

--------------------------------

### Manifest Utility

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue2-api.md

The `manifest` object provides metadata about all available icons in the TDesign Vue 2 library. It can be imported and inspected to get a list of icon names.

```APIDOC
## Manifest

### Description
The manifest file contains metadata about all available icons.

### Usage
```typescript
import { manifest } from 'tdesign-icons-vue';

// manifest is an object with icon names as keys and metadata as values
console.log(Object.keys(manifest)); // ['close', 'check', 'time', ...]
```
```

--------------------------------

### Accessing Global Configuration with useConfig

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue2-api.md

Shows how to access global configuration settings like `classPrefix` and `locale` using the `useConfig` hook.

```typescript
import { useConfig } from 'tdesign-icons-vue';

const { classPrefix, locale } = useConfig();
```

--------------------------------

### Vue (tdesign-icons-vue) package.json Configuration

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/configuration-reference.md

Configuration details for the tdesign-icons-vue package, including main, module, unpkg, and peerDependencies.

```json
{
  "name": "tdesign-icons-vue",
  "main": "lib/index.js",
  "module": "esm/index.js",
  "unpkg": "dist/index.min.js",
  "peerDependencies": {
    "vue": "^2.6.12"
  }
}
```

--------------------------------

### Get React Global Configuration Context

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/utilities-and-internals.md

Use the `useConfig` hook to access the current global configuration context in React. This hook retrieves settings like `classPrefix` and `locale`.

```typescript
import { useContext } from 'react';
import ConfigContext from './config-context';

export default () => useContext(ConfigContext);
```

```typescript
import useConfig from 'tdesign-icons-react';

function MyComponent() {
  const { classPrefix } = useConfig();
  return <div className={`${classPrefix}-icon`} />;
}
```

--------------------------------

### Size Utilities

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue3-api.md

Details the built-in size options for icons and their corresponding CSS classes.

```APIDOC
## Size Utilities

Built-in size support:

| Size | CSS Class | Notes |
|------|-----------|-------|
| `'small'` | `t-size-small` | Smaller icon |
| `'medium'` | `t-size-medium` | Medium size |
| `'large'` | `t-size-large` | Larger icon |
| Custom value | — | Applied as `font-size` style |
```

--------------------------------

### Global Configuration for TDesign Icons

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue3-api.md

Illustrates how to configure global settings for TDesign icons, such as the class prefix and locale. The configuration is managed using a React Context.

```typescript
interface Config {
  classPrefix?: string;  // Default: 't'
  locale?: 'zh-CN';      // Default: 'zh-CN'
}

const ConfigContext = createContext<Config>({
  classPrefix: DEFAULT_CLASS_PREFIX,
  locale: DEFAULT_LOCALE,
});
```

--------------------------------

### Using Individual TDesign Icons in Vue 3

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue3-api.md

Demonstrates how to import and use individual icon components like CloseIcon, CheckIcon, and TimeIcon. Shows basic usage, applying custom styles and sizes, and handling click events.

```vue
<template>
  <div>
    <!-- Basic individual icon -->
    <CloseIcon />

    <!-- With custom styling -->
    <CheckIcon 
      size="24px"
      :stroke-color="['#1890ff', '#ff4d4f']"
      class="dual-color-icon"
    />

    <!-- Event handling -->
    <TimeIcon @click="onTimeClick" />
  </div>
</template>

<script setup>
import { CloseIcon, CheckIcon, TimeIcon } from 'tdesign-icons-vue-next';

const onTimeClick = () => {
  console.log('Time icon clicked');
};
</script>
```

--------------------------------

### Build Outputs

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue3-api.md

Lists the available build formats for the TDesign Icons Vue 3 package.

```APIDOC
## Build Outputs

The package provides multiple build formats:

- **Main** (CommonJS): `lib/index.js`
- **Module** (ES6): `esm/index.js`
- **UMD**: `dist/index.min.js`
- **Types**: `types/` directory
```

--------------------------------

### Individual Icons with Advanced Props and Refs

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/react-api.md

Demonstrates using individual icon components with advanced props like size, strokeColor, and strokeWidth, as well as attaching a ref for direct DOM manipulation.

```typescript
import { CloseIcon, TimeIcon, CheckIcon } from 'tdesign-icons-react';
import { useRef } from 'react';

export function IndividualIconsDemo() {
  const iconRef = useRef<SVGSVGElement>(null);

  return (
    <>
      {/* Basic icon */}
      <CloseIcon />

      {/* With ref */}
      <TimeIcon ref={iconRef} />

      {/* With styling */}
      <CheckIcon 
        size="24px" 
        strokeColor="#1890ff"
        strokeWidth={3}
      />
    </>
  );
}
```

--------------------------------

### useConfig Hook (React)

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/utilities-and-internals.md

Returns the current global configuration context, including class prefix and locale.

```APIDOC
## useConfig Hook (React)

### Description
Returns the current global configuration context.

### Source
`packages/react/src/util/use-config.ts`

### Returns
```typescript
interface Config {
  classPrefix?: string;
  locale?: 'zh-CN';
}
```

### Example
```typescript
import useConfig from 'tdesign-icons-react';

function MyComponent() {
  const { classPrefix } = useConfig();
  return <div className={`${classPrefix}-icon`} />;
}
```
```

--------------------------------

### Update Versions and CHANGELOG

Source: https://github.com/tencent/tdesign-icons/blob/develop/README.md

Use this command to manage versioning and changelogs for packages. It prompts for version changes and injects them into package.json and CHANGELOG files.

```bash
npx changeset
```

```bash
pnpm changeset version
```

--------------------------------

### Global Configuration

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue3-api.md

Configure global settings for TDesign Icons, such as the class prefix and locale.

```APIDOC
## Configuration

### Global Config

Configure the icon class prefix and locale (if supported):

```typescript
interface Config {
  classPrefix?: string;  // Default: 't'
  locale?: 'zh-CN';      // Default: 'zh-CN'
}

const ConfigContext = createContext<Config>({
  classPrefix: DEFAULT_CLASS_PREFIX,
  locale: DEFAULT_LOCALE,
});
```

The config context can be accessed through dependency injection or utility hooks.
```

--------------------------------

### Recommended tsconfig.json Settings

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/types-reference.md

Provides essential compiler options for a TypeScript project using TDesign Icons.

```json
{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM"],
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true
  }
}
```

--------------------------------

### Angular Service and Constants Import

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/api-index.md

Import TIconService and ICON_SVG_URLS for advanced configuration and service injection in Angular.

```typescript
import { TIconService, ICON_SVG_URLS } from 'tdesign-icons-angular';
```

--------------------------------

### Customize Icon Styles with CSS

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/web-components-api.md

Apply global styles to all icons using the '.t-icon' class, specific icon styles using '.t-icon-{name}', and size-related styles using '.t-size-{size}'. Outer container styling is also demonstrated.

```css
/* Style all icons */
.t-icon {
  display: inline-block;
  fill: currentColor;
  width: 1em;
  height: 1em;
}

/* Style specific icon */
.t-icon-close {
  color: red;
}

/* Style by size */
.t-size-large {
  font-size: 32px;
}

/* Style outer container */
tdesign-icon {
  margin: 0 4px;
}
```

--------------------------------

### Individual Icon Components

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue2-api.md

Import and use specific icons directly as components. This provides granular control over icon usage.

```APIDOC
## Individual Icon Components

### Description
Import and use specific icons directly as components. This approach allows for direct usage of individual icons without needing a wrapper component.

### Example
```html
<template>
  <CloseIcon />
  <TimeIcon size="large" />
  <CheckIcon class="custom-icon" />
</template>

<script>
import { CloseIcon, TimeIcon, CheckIcon } from 'tdesign-icons-vue';

export default {
  components: { CloseIcon, TimeIcon, CheckIcon }
};
</script>
```
```

--------------------------------

### React to Web Components Type Compatibility

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/types-reference.md

Demonstrates type compatibility for icon properties between React and Web Components.

```typescript
// React
const iconProps: IconProps = { size: 'large' };

// Web Components
const webComponentProps = {
  size: 'large'  // Compatible
};
```

--------------------------------

### TDesign Icons Flutter Project Structure

Source: https://github.com/tencent/tdesign-icons/blob/develop/packages/flutter/CONTRIBUTING.md

Overview of the directory structure for the TDesign Icons Flutter package.

```bash
packages/flutter/
├── fonts/
│   └── t.ttf          # Font file (generated by gulp build)
├── lib/
│   ├── tdesign_icons.dart   # Entry file
│   └── src/
│       └── assets.g.dart    # Icon constants (auto-generated)
├── tool/
│   └── generate.dart        # Code generator
├── pubspec.yaml            # Package configuration
├── CHANGELOG.md            # Version history
└── README.md               # Usage instructions
```

--------------------------------

### TIconComponent with Various Inputs

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/angular-api.md

Demonstrates advanced usage of TIconComponent, including rendering SVG and iconfont icons, applying different sizes (preset and custom), and binding custom styles and classes.

```typescript
import { Component } from '@angular/core';
import { TIconModule } from 'tdesign-icons-angular';

@Component({
  selector: 'app-icon-demo',
  template: '
    <div class="icon-container">
      <!-- SVG icon -->
      <t-icon svg="t-icon-close"></t-icon>

      <!-- Iconfont icon -->
      <t-icon iconfont="t-icon-check"></t-icon>

      <!-- With size -->
      <t-icon svg="t-icon-time" size="large"></t-icon>
      <t-icon svg="t-icon-star" size="32px"></t-icon>

      <!-- With custom styling -->
      <t-icon 
        svg="t-icon-heart" 
        [styles]="{ 'color': 'red' }"
        [classes]="{ 'active': isActive }"
      ></t-icon>

      <!-- Icon list -->
      <t-icon 
        *ngFor="let iconName of iconNames"
        [svg]="iconName"
      ></t-icon>
    </div>
  ',
  imports: [TIconModule, NgFor, NgIf]
})
export class IconDemoComponent {
  isActive = true;
  iconNames = ['t-icon-close', 't-icon-check', 't-icon-time'];
}
```

--------------------------------

### IconFont Component with Customization

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/react-api.md

Demonstrates customizing the IconFont component with different HTML tags, event handlers, and custom iconfont sources. Supports specifying the HTML element type and loading custom CSS files.

```typescript
import { IconFont } from 'tdesign-icons-react';

export function FontIconDemo() {
  return (
    <>
      {/* Basic iconfont usage */}
      <IconFont name="close" />

      {/* Different element type */}
      <IconFont name="check" tag="span" className="my-icon" />

      {/* With event handler */}
      <IconFont 
        name="close" 
        onClick={() => console.log('closed')}
      />

      {/* Custom iconfont */}
      <IconFont 
        name="custom-icon"
        url="https://example.com/custom.css"
        loadDefaultIcons={false}
      />
    </>
  );
}
```

--------------------------------

### Monorepo Workspace Configuration

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/utilities-and-internals.md

Configuration in `pnpm-workspace.yaml` to define the root directory for pnpm workspaces, specifying which directories contain packages.

```yaml
packages:
  - 'packages/*'
```

--------------------------------

### Use Web Components with Custom Icons

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/configuration-reference.md

Include custom icon scripts and use the tdesign-icon component to display icons in Web Components.

```html
<script src="https://custom.example.com/icons.js"></script>
<tdesign-icon name="close"></tdesign-icon>
```

--------------------------------

### Icon Component with Customization

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/react-api.md

Shows how to customize the Icon component with different sizes, colors, and styles. Supports preset sizes like 'large' or custom CSS values, and dual-color options for strokes and fills.

```typescript
import { Icon } from 'tdesign-icons-react';

export function IconDemo() {
  return (
    <>
      {/* Basic usage */}
      <Icon name="close" />

      {/* With custom size */}
      <Icon name="close" size="large" />
      <Icon name="close" size="32px" />

      {/* With custom styling */}
      <Icon 
        name="close" 
        strokeColor="#1890ff"
        style={{ display: 'inline-block', marginRight: '8px' }}
      />

      {/* Dual-color icon */}
      <Icon 
        name="check" 
        strokeColor={['#1890ff', '#ff4d4f']}
      />

      {/* Custom sprite */}
      <Icon 
        name="custom-icon"
        url="https://example.com/custom-icons.js"
        loadDefaultIcons={false}
      />
    </>
  );
}
```

--------------------------------

### Advanced Icon Component Usage (SVG Sprite)

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue3-api.md

Demonstrates advanced usage of the `Icon` component, including custom sizes, event handling, and loading custom sprites.

```vue
<template>
  <div>
    <!-- Basic icon -->
    <Icon name="close" />

    <!-- Custom size -->
    <Icon name="close" size="large" />
    <Icon name="close" size="32px" />

    <!-- With event handler -->
    <Icon name="close" @click="handleClick" />

    <!-- Custom sprite -->
    <Icon 
      name="custom"
      url="https://example.com/custom.js"
      :load-default-icons="false"
      class="my-icon"
      style="color: red;"
    />
  </div>
</template>

<script setup>
import { Icon } from 'tdesign-icons-vue-next';

const handleClick = () => {
  console.log('Icon clicked');
};
</script>
```

--------------------------------

### Apply Preset and Custom Sizes to Icons

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/web-components-api.md

Icons support preset sizes ('small', 'medium', 'large') via CSS classes, or custom sizes applied directly as CSS font-size values (e.g., '32px', '2em').

```html
<!-- Preset sizes -->
<tdesign-icon name="close" size="small"></tdesign-icon>
<tdesign-icon name="close" size="medium"></tdesign-icon>
<tdesign-icon name="close" size="large"></tdesign-icon>

<!-- Custom sizes -->
<tdesign-icon name="close" size="32px"></tdesign-icon>
<tdesign-icon name="close" size="2em"></tdesign-icon>
```

--------------------------------

### Import Icon Component in a Framework

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/web-components-api.md

Import the `Icon` class from the package to register the custom element for use in framework templates.

```typescript
import { Icon } from 'tdesign-icons-web-components';

// Icon is automatically registered as a custom element
// Can be used in templates as <tdesign-icon></tdesign-icon>
```

--------------------------------

### Importing Icon Manifest

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/angular-api.md

Imports the manifest object which contains metadata for all available icons in the library.

```typescript
import { manifest } from 'tdesign-icons-angular';

// manifest contains information about all available icons
const iconInfo = manifest;
```

--------------------------------

### Tree Shaking with React Icons

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/configuration-reference.md

Import only the specific icons you need from the React package to enable tree shaking and reduce bundle size. Other icons will not be included in the final bundle.

```typescript
// Only import what you use
import { CloseIcon } from 'tdesign-icons-react';
// Other icons are not bundled
```

--------------------------------

### Import and Use TDesign Icons View

Source: https://github.com/tencent/tdesign-icons/blob/develop/packages/view/README.md

Import the 'tdesign-icons-view' package. Use the `<td-icons-view />` custom element for a single page display or `<td-icons-view framework-content />` to insert it as part of a page.

```javascript
import "tdesign-icons-view";

// single page
<td-icons-view />;
// inserted as part of page
<td-icons-view framework-content />;
```

--------------------------------

### useConfig Hook (Vue 3)

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/utilities-and-internals.md

Returns the current configuration from context in Vue 3 applications.

```APIDOC
## useConfig Hook (Vue 3)

### Description
Returns the current configuration from context.

### Source
`packages/vue-next/src/utils/config-context.ts`

### Details
Access via direct context access or utility functions.

### Returns
```typescript
interface Config {
  classPrefix?: string;
  locale?: 'zh-CN';
}
```
```

--------------------------------

### Import and Use Individual Icon Components

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue3-api.md

Import and use specific icon components directly for fine-grained control over icon rendering. Supports size and class attributes.

```vue
<template>
  <CloseIcon />
  <TimeIcon size="large" />
  <CheckIcon class="custom-icon" />
</template>

<script setup>
import { CloseIcon, TimeIcon, CheckIcon } from 'tdesign-icons-vue-next';
</script>
```

--------------------------------

### Using useSizeProps Hook

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue3-api.md

Shows how to use the 'useSizeProps' hook to convert a size prop into CSS class names and inline styles. This is useful for applying custom sizes or built-in size utilities to icons.

```typescript
const { className, style } = useSizeProps(size);

Returns an object with:
- className: CSS class name for the size (if applicable)
- style: Inline style object (e.g., { fontSize: '24px' } for custom sizes)
```

--------------------------------

### Plugin Registration

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue2-api.md

Register all icons as a Vue plugin for global availability. This makes all icon components accessible directly in templates.

```APIDOC
## Plugin Registration

### Description
Registers all exported icon components with Vue globally. Each icon component is wrapped with the `withInstall()` utility.

### Method
`Vue.use(TDesignIcons)`

### Parameters
- `app` (App) - The Vue application instance.

### Example
```typescript
import Vue from 'vue';
import TDesignIcons from 'tdesign-icons-vue';

Vue.use(TDesignIcons);

new Vue({
  el: '#app',
  template: '<CloseIcon />'
});
```
```

--------------------------------

### Configure Custom Class Prefix in React

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/configuration-reference.md

Implement a custom class prefix for TDesign icons in React by using a ConfigContext provider.

```typescript
import ConfigContext from './config-context';

<ConfigContext.Provider value={{ classPrefix: 'my-prefix' }}>
  <App />
</ConfigContext.Provider>
```

--------------------------------

### TIconService Methods

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/angular-api.md

The TIconService provides methods for dynamically loading icon resources, specifically SVG icons from a given URL.

```APIDOC
## TIconService

### Description
Service for dynamically loading icon resources.

### Methods

#### loadSvgIcon(iconUrl: string): void

Load SVG icon resources from a URL.

```typescript
this.iconService.loadSvgIcon('https://example.com/icons.js');
```

**Parameters**:
- `iconUrl` (`string`): URL to the SVG sprite definition file.

**Notes**:
- Creates and appends a `<script>` element to the document body.
- Prevents duplicate loads by tracking loaded URLs internally.
```

--------------------------------

### Import and Use Icons in React Native

Source: https://github.com/tencent/tdesign-icons/blob/develop/packages/react-native/README.md

Demonstrates how to import specific icons like CloseIcon and TimeIcon from the tdesign-icons-react-native library and render them in your React Native components.

```javascript
import { CloseIcon, TimeIcon } from "tdesign-icons-react-native";

<CloseIcon />;
```

--------------------------------

### CDN Resources for Icons

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue3-api.md

Information on accessing TDesign icon resources via Content Delivery Network (CDN).

```APIDOC
## CDN Resources

Default icon resources are loaded from Tencent CDN:

- **SVG Sprite**: `https://tdesign.gtimg.com/icon/0.4.2/fonts/index.js`
- **IconFont**: `https://tdesign.gtimg.com/icon/0.4.2/fonts/index.css`

Automatically loaded when `loadDefaultIcons={true}` (default).
```

--------------------------------

### React Config Interface

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/configuration-reference.md

Defines the configuration options for the React package, including CSS class prefix and locale.

```typescript
interface Config {
  classPrefix?: string;  // Default: 't'
  locale?: 'zh-CN';      // Default: 'zh-CN'
}
```

--------------------------------

### Recommended tsconfig.json for TDesign Icons

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/configuration-reference.md

Recommended TypeScript compiler options for projects using TDesign Icons, including target, module, strictness, and JSX settings.

```json
{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM"],
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "declaration": true,
    "jsx": "react-jsx"
  }
}
```

--------------------------------

### Angular (tdesign-icons-angular) package.json Configuration

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/configuration-reference.md

Configuration details for the tdesign-icons-angular package, specifying peer dependencies for Angular core and common modules.

```json
{
  "name": "tdesign-icons-angular",
  "peerDependencies": {
    "@angular/core": "^10.0.11",
    "@angular/common": "^10.0.11"
  }
}
```

--------------------------------

### Advanced IconFont Component Usage

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/vue3-api.md

Demonstrates advanced usage of the `IconFont` component, including different element types, event handling, and loading custom iconfonts.

```vue
<template>
  <div>
    <!-- Basic iconfont -->
    <IconFont name="close" />

    <!-- Different element type -->
    <IconFont name="check" tag="span" class="custom-icon" />

    <!-- With event handler -->
    <IconFont name="close" @click="handleClick" />

    <!-- Custom iconfont -->
    <IconFont 
      name="custom"
      url="https://example.com/custom.css"
      :load-default-icons="false"
    />
  </div>
</template>

<script setup>
import { IconFont } from 'tdesign-icons-vue-next';

const handleClick = () => {
  console.log('Iconfont clicked');
};
</script>
```

--------------------------------

### Linting Command

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/utilities-and-internals.md

Executes the linting process for all source files, automatically fixing style issues and enforcing code standards.

```bash
npm run lint
```

--------------------------------

### Configuration Object

Source: https://github.com/tencent/tdesign-icons/blob/develop/_autodocs/react-api.md

Defines the structure for the global configuration object used to customize the TDesign icons package.

```APIDOC
### Configuration Object

```typescript
interface Config {
  classPrefix?: string;  // Default: 't'
  locale?: 'zh-CN';      // Default: 'zh-CN'
}
```
```