### Setup for Development

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-angular/README.md

Install dependencies and run the generate script to set up the development environment.

```bash
npm run generate
```

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

### Install Ant Design Icons

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react-native/README.md

Install the library using Yarn.

```bash
yarn add @ant-design/icons-react-native
```

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

### Start Demo

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-angular/README.md

Run the generate script followed by the start script to launch the demo application.

```bash
npm run generate && npm run start
```

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

### Clone Repository and Install Dependencies

Source: https://github.com/ant-design/ant-design-icons/blob/master/README.md

Clone the Ant Design Icons repository and install all necessary project dependencies using the 'ut install' command. Ensure Node.js version 16 or higher is installed and 'utoo' is available globally.

```bash
git clone https://github.com/ant-design/ant-design-icons.git
cd ant-design-icons

ut install
```

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

### Generate Icons Configuration Example

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.zh-CN.md

Example configuration object for the `generateIcons` function in `gulpfile.ts`.

```typescript
// gulpfile.ts

generateIcons({
  // 告知生成图标的主题风格
  theme: 'filled',

  // 图标来源
  from: ['svg/filled/*.svg'],

  // 输出目录
  toDir: 'src/asn',

  // 图标压缩插件 svgo 的配置
  svgoConfig: generalConfig,

  // 对节点的额外转换，详细说明见下
  extraNodeTransformFactories: [
    assignAttrsAtTag('svg', { focusable: 'false' }),
    adjustViewBox
  ],

  // 在套用模板前，对抽象节点的序列化操作，详细说明见下
  stringify: JSON.stringify,

  // 套用的模板
  template: iconTemplate,

  // 模板中的插值映射
  mapToInterpolate: ({ name, content }) => ({
    identifier: getIdentifier({ name, themeSuffix: 'Filled' }),
    content
  }),

  // 最后输出文件命名
  filename: ({ name }) => getIdentifier({ name, themeSuffix: 'Filled' })
});

```

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

### Start Gulp Build Workflow

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.md

Execute this command to start the Gulp build process, which compiles TypeScript files into the 'es' and 'lib' output directories.

```bash
ut build
```

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

### Install @ant-design/icons-svg

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/README.md

Install the package using yarn or npm.

```bash
# use yarn
$ yarn add @ant-design/icons-svg

# or use npm
$ npm install @ant-design/icons-svg --save
```

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

### Install Ant Design Icons Angular

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-angular/src/README.md

Install the library using Angular CLI or npm.

```bash
ng add @ant-design/icons-angular

# or npm install @ant-design/icons-angular
```

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

### Start Gulp Generate Workflow

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.md

Run this command to initiate the Gulp workflow for generating icon abstract nodes and related files.

```bash
ut generate
```

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

### Example: Access icon name, theme, and previous attributes

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.md

Shows how to dynamically set attributes using a function within `assignAttrsAtTag`, accessing the icon's name, theme, and existing attributes.

```typescript
extraNodeTransformFactories: [
  assignAttrsAtTag('path', ({ name, theme, previousAttrs }) => ({
    hello: `${name}-${theme}-${previousAttrs.d}`
  }))
]
```

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

### Install Ant Design Icons Vue

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-vue/README.md

Use yarn to add the @ant-design/icons-vue package to your project.

```bash
yarn add @ant-design/icons-vue
```

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

### Example: Add 'hello="world"' attribute to path tags

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.md

Demonstrates how to use `assignAttrsAtTag` to add a static attribute `hello='world'` to all 'path' elements within an icon.

```typescript
extraNodeTransformFactories: [
  assignAttrsAtTag('path', { hello: 'world'})
]
```

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

### Install Ant Design Icons with Yarn

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/README.md

Use this command to add the Ant Design Icons package to your project dependencies.

```bash
yarn add @ant-design/icons
```

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

### Example Extra Node Transform Factories

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.zh-CN.md

Specific factory functions used for transforming SVG nodes within the `gulpfile.ts`.

```typescript
extraNodeTransformFactories: [
  assignAttrsAtTag('svg', { focusable: 'false' }),
  adjustViewBox
]

```

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

### Build Process Overview

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.zh-CN.md

Textual representation of the icon generation build flow.

```txt
1. 清理之前生成、编译的文件
2. 并行运行下列任务
  2.1 直接拷贝部分代码至 src 目录，例如辅助函数 helpers.ts、类型定义 types.ts
  2.2 生成 filled 主题风格的图标抽象节点
  2.3 生成 outlined 主题风格的图标抽象节点
  2.4 生成 twotone 主题风格的图标抽象节点
3. 并行运行下列任务
  3.1 生成入口文件 index.ts
  3.2 生成内联图标 inline-svg
  3.3 生成包含名字空间的内联图标 inline-namespaced-svg

```

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

### Build Library

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-angular/README.md

Execute the build script to compile the icon library for distribution.

```bash
npm run build:lib
```

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

### Project Directory Structure

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.zh-CN.md

Overview of the project's file and directory organization.

```bash
. 
├── README.md
├── babel.config.cjs      # 用于测试环境的 babel 配置
├── docs                  # 项目文档
├── es                    # tsc 输出目录，使用 ES Modules
├── gulpfile.ts           # 用于整个图标生成的 gulp 配置文件
├── inline-svg            # gulp 输出目录，输出可直接使用的 SVG
├── inline-namespaced-svg # gulp 输出目录，输出可直接使用的 SVG
├── jest.config.cjs
├── lib                   # tsc 输出目录，使用 CommonJS
├── package.json
├── plugins               # gulp 的插件目录，存放用于处理图标的自定义 gulp 插件
├── scripts               # 其他自定义的脚本文件
├── src                   # 源文件目录，该目录下的文件通常由 gulp 生成，然后通过 tsc 编译输出到 es、lib 目录
├── svg                   # 存放从设计师得到的，未经处理的图标文件
├── tasks/creators        # gulp 的任务工厂函数目录，存放用于处理图标的自定义 gulp 任务工厂函数
├── templates             # 模板目录
├── test
├── tsconfig.build.json   # 用于编译构建（build）的 TypeScript 配置
├── tsconfig.json         # 用于生成（generate）的（gulp 运行环境） TypeScript 配置
├── typings.d.ts
└── utils

```

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

### Build Project Commands

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-vue/README.md

Commands for generating files, building the library, and running tests for the Ant Design Icons Vue project.

```bash
ut generate # Generate files to ./src
ut build # Build library
ut test # Running Test
```

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

### Project Structure Overview

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.md

This bash script displays the directory structure of the @ant-design/icons-svg project, highlighting key directories and configuration files.

```bash
.
├── README.md
├── babel.config.cjs      # babel config used by jest
├── docs
├── es                    # the output directory of typescript compiler (--module esnext)
├── gulpfile.ts           # the core gulp config
├── inline-svg            # the output directory of gulp. It contains all processed icons with the extenstion ".svg"
├── inline-namespaced-svg # the output directory of gulp. It contains all processed icons with the extenstion ".svg" and the SVG namespace (xmlns="http://www.w3.org/2000/svg")
├── jest.config.cjs
├── lib                   # the output directory of typescript compiler (--module commonjs)
├── package.json
├── plugins               # custom gulp plugins
├── scripts               # some custom scripts
├── src                   # source directory. All files in "src" are generated by gulp and compiled by tsc
├── svg                   # the raw icons directory. You can add icons here.
├── tasks/creators        # gulp tasks factory fucntions
├── templates             # some templates
├── test
├── tsconfig.build.json   # build time typescript config
├── tsconfig.json         # runtime typescript config when running "npm run generate"
├── typings.d.ts
└── utils
```

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

### Gulp Generate Workflow Steps

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.md

This text outlines the sequential steps involved in the Gulp generate workflow, including cleaning files, generating abstract nodes for different themes, and creating index files and SVG directories.

```txt
1. clean (or delete) the generated or compiled files
2. run these tasks parallelly:
  2.1 copy some files to "src" dir. (e.g. helpers.ts, types.ts)
  2.2 generate abstract nodes with the theme "filled"
  2.3 generate abstract nodes with the theme "outlined"
  2.4 generate abstract nodes with the theme "twotone"
3. run these tasks parallelly:
  3.1 generate index.ts
  3.2 generate inline-svg dirctory
  3.3 generate inline-namespaced-svg dirctory
```

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

### Generate Icons Command

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.zh-CN.md

Command to initiate the gulp build process for generating icons.

```bash
ut generate

```

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

### Import Icons in React

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/README.md

Demonstrates how to import icons directly or destructure them from the package when tree-shaking is enabled.

```typescript
import SmileOutlined from '@ant-design/icons/SmileOutlined';
import { SmileOutlined } from '@ant-design/icons';

import SmileFilled from '@ant-design/icons/SmileFilled';
import SmileTwoTone from '@ant-design/icons/SmileTwoTone';
import { SmileFilled, SmileTwoTone } from '@ant-design/icons';
```

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

### Import and Log Icon Definition

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/README.md

Import an icon definition from the library and log its structure. This demonstrates the format of an IconDefinition object.

```typescript
import { AccountBookOutlined } from '@ant-design/icons-svg';
// or
// import AccountBookOutlined from '@ant-design/icons-svg/es/asn/AccountBookOutlined';

console.log(AccountBookOutlined);
// ==> 
// {
//   name: 'account-book',
//   theme: 'outlined',
//   icon: {
//     tag: 'svg',
//     attrs: { 
//       viewBox: '64 64 896 896',
//       focusable: 'false'
//     },
//     children: [
//       {
//         tag: 'path',
//         attrs: {
//           d:
//             'M880 184H712v-64c0-4.4-3.6-8-8-8h- ...'
//         }
//       }
//     ]
//   }
// };
```

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

### Import Icons

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react-native/README.md

Import the necessary icon components from the library.

```tsx
import { IconFill, IconOutline } from "@ant-design/icons-react-native";
```

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

### Release Commands

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/README.md

Commands to generate, build, and publish the Ant Design Icons package.

```bash
ut generate
ut build
npm publish
```

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

### Generate Icons Task Configuration

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.md

This TypeScript code demonstrates the configuration for the 'generateIcons' Gulp task, specifying theme, source files, output directory, SVGO configuration, transformations, templating, and filename mapping.

```typescript
// gulpfile.ts

generateIcons({
  // set the icon theme
  theme: 'filled',

  // sources
  from: ['svg/filled/*.svg'],

  // output dir
  toDir: 'src/asn',

  // config of the plugin SVGO
  svgoConfig: generalConfig,

  // the collection of the transform function. See the following for details
  extraNodeTransformFactories: [
    assignAttrsAtTag('svg', { focusable: 'false' }),
    adjustViewBox
  ],

  // the serialization operation of the abstract node before applying templates. See the following for details
  stringify: JSON.stringify,

  // template
  template: iconTemplate,

  // Interpolation mapping in templates
  mapToInterpolate: ({ name, content }) => ({
    identifier: getIdentifier({ name, themeSuffix: 'Filled' }),
    content
  }),

  // output filename
  filename: ({ name }) => getIdentifier({ name, themeSuffix: 'Filled' })
});

```

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

### Add Custom Icon with Namespace (Dynamic Loading)

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-angular/src/README.md

Place custom SVG icons in the `assets/` directory with a namespace for dynamic loading. Render using the `antIcon` directive with the namespaced type.

```html
<span antIcon type="animal:panda"></span>
```

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

### Provide Icons Statically in app.config.ts

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-angular/src/README.md

Configure icons to be provided at the application level using `provideAntIcons` in `app.config.ts` for static loading.

```typescript
import { ApplicationConfig } from '@angular/core';
import { provideAntIcons } from '@ant-design/icons-angular';
import { AccountBookFill } from '@ant-design/icons-angular/icons';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAntIcons([ AccountBookFill ])
  ]
};
```

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

### Configure Assets for React Native >= 0.69.0

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react-native/README.md

Configure your react-native.config.js to include the icon fonts. This is recommended for all versions.

```javascript
module.exports = {
  assets: ['node_modules/@ant-design/icons-react-native/fonts'],
};
```

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

### Add/Modify/Delete Icons Commands

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.zh-CN.md

Commands to regenerate and build after modifying SVG files.

```bash
# 生成 ts 源文件至 src
ut generate

# 编译 src 文件至 es、lib
ut build

```

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

### Resulting icon definition with dynamic attribute

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.md

Illustrates the `IconDefinition` for `AccountBookFilled` after applying a dynamic `assignAttrsAtTag` transformation, where the 'hello' attribute is generated from icon properties.

```typescript
// src/asn/AccountBookFilled.ts

const AccountBookFilled: IconDefinition = {
  icon: {
    tag: 'svg',
    attrs: { viewBox: '0 0 1024 1024' },
    children: [
      {
        tag: 'path',
        attrs: {
          d:
            'M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zM648.3 426.8l-87.7 161.1h45.7c5.5 0 10 4.5 10 10v21.3c0 5.5-4.5 10-10 10h-63.4v29.7h63.4c5.5 0 10 4.5 10 10v21.3c0 5.5-4.5 10-10 10h-63.4V752c0 5.5-4.5 10-10 10h-41.3c-5.5 0-10-4.5-10-10v-51.8h-63.1c-5.5 0-10-4.5-10-10v-21.3c0-5.5 4.5-10 10-10h63.1v-29.7h-63.1c-5.5 0-10-4.5-10-10v-21.3c0-5.5 4.5-10 10-10h45.2l-88-161.1c-2.6-4.8-.9-10.9 4-13.6 1.5-.8 3.1-1.2 4.8-1.2h46c3.8 0 7.2 2.1 8.9 5.5l72.9 144.3 73.2-144.3a10 10 0 018.9-5.5h45c5.5 0 10 4.5 10 10 .1 1.7-.3 3.3-1.1 4.8z',
          hello:
            'account-book-filled-M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zM648.3 426.8l-87.7 161.1h45.7c5.5 0 10 4.5 10 10v21.3c0 5.5-4.5 10-10 10h-63.4v29.7h63.4c5.5 0 10 4.5 10 10v21.3c0 5.5-4.5 10-10 10h-63.4V752c0 5.5-4.5 10-10 10h-41.3c-5.5 0-10-4.5-10-10v-51.8h-63.1c-5.5 0-10-4.5-10-10v-21.3c0-5.5 4.5-10 10-10h63.1v-29.7h-63.1c-5.5 0-10-4.5-10-10v-21.3c0-5.5 4.5-10 10-10h45.2l-88-161.1c-2.6-4.8-.9-10.9 4-13.6 1.5-.8 3.1-1.2 4.8-1.2h46c3.8 0 7.2 2.1 8.9 5.5l72.9 144.3 73.2-144.3a10 10 0 018.9-5.5h45c5.5 0 10 4.5 10 10 .1 1.7-.3 3.3-1.1 4.8z'
        }
      }
    ]
  },
  name: 'account-book',
  theme: 'filled'
};
```

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

### Package-Specific Commands

Source: https://github.com/ant-design/ant-design-icons/blob/master/README.md

Run specific commands for individual packages within the Ant Design Icons monorepo. These commands are defined in the root package.json and cover icon generation, building, and CI processes for React, Vue, Angular, and React Native.

```bash
- ut icons:generate - Generate icons-svg
- ut icons:build - Build icons-svg
- ut react:ci - Run React icons CI
- ut vue:ci - Run Vue icons CI
- ut angular:ci - Run Angular icons CI
- ut rn:generate - Generate React Native icons
```

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

### Link Icons for React Native < 0.69.0

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react-native/README.md

Use the react-native link command for older versions of React Native.

```bash
react-native link @ant-design/icons-react-native
```

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

### Resulting icon definition with added attribute

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.md

Shows the generated `IconDefinition` for `AccountBookFilled` after applying the `assignAttrsAtTag` transformation to add the 'hello' attribute.

```typescript
// src/asn/AccountBookFilled.ts

const AccountBookFilled: IconDefinition = {
  icon: {
    tag: 'svg',
    attrs: { viewBox: '0 0 1024 1024' },
    children: [
      {
        tag: 'path',
        attrs: {
          d:
            'M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zM648.3 426.8l-87.7 161.1h45.7c5.5 0 10 4.5 10 10v21.3c0 5.5-4.5 10-10 10h-63.4v29.7h63.4c5.5 0 10 4.5 10 10v21.3c0 5.5-4.5 10-10 10h-63.4V752c0 5.5-4.5 10-10 10h-41.3c-5.5 0-10-4.5-10-10v-51.8h-63.1c-5.5 0-10-4.5-10-10v-21.3c0-5.5 4.5-10 10-10h63.1v-29.7h-63.1c-5.5 0-10-4.5-10-10v-21.3c0-5.5 4.5-10 10-10h45.2l-88-161.1c-2.6-4.8-.9-10.9 4-13.6 1.5-.8 3.1-1.2 4.8-1.2h46c3.8 0 7.2 2.1 8.9 5.5l72.9 144.3 73.2-144.3a10 10 0 018.9-5.5h45c5.5 0 10 4.5 10 10 .1 1.7-.3 3.3-1.1 4.8z',
          hello: 'world'
        }
      }
    ]
  },
  name: 'account-book',
  theme: 'filled'
};
```

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

### Add New Icons Command

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.md

These bash commands are used after adding or modifying icons in the 'svg' directory. 'ut generate' processes the SVG files into abstract nodes, and 'ut build' compiles them.

```bash
# generate ".ts" files into "src" dir
ut generate

# compile files in "src" dir
ut build
```

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

### Render an Icon in HTML

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-angular/src/README.md

Use the `antIcon` directive in your HTML template to render an icon by specifying its type and theme.

```html
<span antIcon type="ant-cloud" theme="outline"></span>
```

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

### Compile Icons Command

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.zh-CN.md

Command to compile generated source files using tsc.

```bash
ut build

```

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

### Common Workspace Commands

Source: https://github.com/ant-design/ant-design-icons/blob/master/README.md

Execute common commands across all workspaces in the Ant Design Icons project. These include cleaning, linting, generating icons, building, testing, and running CI processes for specific packages.

```bash
# Clean all workspaces
ut clean

# Lint all workspaces
ut lint

# Generate icons for a specific package
ut generate --workspace @ant-design/icons-svg

# Build a specific package
ut build --workspace @ant-design/icons-svg

# Test a specific package
ut test --workspace @ant-design/icons-svg

# Run CI for a specific package
ut ci --workspace @ant-design/icons
```

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

### Current extraNodeTransformFactories configuration

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.md

Shows the default configuration for `extraNodeTransformFactories` in `gulpfile.ts`, including attribute assignment and viewbox adjustment.

```typescript
extraNodeTransformFactories: [
  assignAttrsAtTag('svg', { focusable: 'false' }),
  adjustViewBox
]
```

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

### Iterating Through Icons in Angular

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-angular/examples/app/app.component.html

Use Angular's control flow syntax to iterate over a list of icon names. This snippet demonstrates a basic loop structure.

```html
@for (name of icons; track name) { }
```

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

### Link Assets Automatically

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react-native/README.md

Run the react-native-asset command to automatically link fonts for React Native version 0.69.0 and above.

```bash
npx react-native-asset
```

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

### IconFill Component Interface

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react-native/README.md

Defines the props for the IconFill component, including name, size, and color.

```typescript
interface IconFillProps extends TextProps {
  name: FillGlyphMapType;
  size?: number;
  color?: string;
}
```

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

### Add Custom Icon with Namespace (Static Loading)

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-angular/src/README.md

Register a custom SVG icon with a namespace using `addIconLiteral` for static loading.

```typescript
addIconLiteral('animal:panda', '<svg>...</svg>')
```

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

### Register Icons Statically in Component

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-angular/src/README.md

Register specific icons with IconService in your component's constructor for static loading. Avoid registering all icons to prevent bundle size increase.

```typescript
import { Component, inject } from '@angular/core';
import { IconService } from '@ant-design/icons-angular';
import { AccountBookFill } from '@ant-design/icons-angular/icons'
// import * as AllIcons from 'ant-icons-angular/icons';

@Component({
  // ...
})
export class AppComponent {
  readonly iconService = inject(IconService);
  
  constructor() {
    // Import all. NOT RECOMMENDED. ❌
    // const antDesignIcons = AllIcons as {
      // [key: string]: IconDefinition;
    // };
    // this.iconService.addIcon(...Object.keys(antDesignIcons).map(key => antDesignIcons[key]));

    // Import what you need! ✔️
    this.iconService.addIcon(...[ AccountBookFill ]);
    this.iconService.twoToneColor = { primaryColor: '#1890ff' };
  }
}
```

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

### Generate Icons Function Signature

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.zh-CN.md

TypeScript signature for the `generateIcons` Gulp task function.

```typescript
generateIcons(options: GenerateIconsOptions): () => NodeJS.ReadWriteStream

```

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

### Register Icons in Vue

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-vue/README.md

Import and register the desired icons with Vue before using them in your components. This makes the icons available globally.

```js
import Vue from 'vue'
import { Filter } from '@ant-design/icons-vue';
Vue.component(Filter.name, Filter);
```

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

### Render Icon Definition to SVG Element

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/README.md

Use the `renderIconDefinitionToSVGElement` helper to convert an icon definition into an SVG HTML string. You can provide extra attributes for the SVG element.

```typescript
import { AccountBookFilled } from '@ant-design/icons-svg';
import { renderIconDefinitionToSVGElement } from '@ant-design/icons-svg/es/helpers';

const svgHTMLString = renderIconDefinitionToSVGElement(AccountBookFilled, {
  extraSVGAttrs: { width: '1em', height: '1em', fill: 'currentColor' }
});

console.log(svgHTMLString);
// ==> 
// '<svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zM648.3 426.8l-87.7 161.1h45.7c5.5 0 10 4.5 10 10v21.3c0 5.5-4.5 10-10 10h-63.4v29.7h63.4c5.5 0 10 4.5 10 10v21.3c0 5.5-4.5 10-10 10h-63.4V752c0 5.5-4.5 10-10 10h-41.3c-5.5 0-10-4.5-10-10v-51.8h-63.1c-5.5 0-10-4.5-10-10v-21.3c0-5.5 4.5-10 10-10h63.1v-29.7h-63.1c-5.5 0-10-4.5-10-10v-21.3c0-5.5 4.5-10 10-10h45.2l-88-161.1c-2.6-4.8-.9-10.9 4-13.6 1.5-.8 3.1-1.2 4.8-1.2h46c3.8 0 7.2 2.1 8.9 5.5l72.9 144.3 73.2-144.3a10 10 0 0 1 8.9-5.5h45c5.5 0 10 4.5 10 10 .1 1.7-.3 3.3-1.1 4.8z" /></svg>'
```

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

### Conditional Theming in Angular

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-angular/examples/app/app.component.html

Conditionally render icons based on the current theme using Angular's @if directive. This allows for dynamic theme switching.

```html
@if (currentTheme === 'fill') { }
```

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

### Use Icons in Components

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react-native/README.md

Render Ant Design icons in your React components using IconFill or IconOutline.

```jsx
<IconFill name="account-book" />
<IconOutline name="account-book" />
```

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

### AntdIconProps Interface

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/README.md

Defines the properties available for Ant Design Icon components, including className, onClick, and style.

```typescript
interface AntdIconProps {
  className?: string;
  onClick?: React.MouseEventHandler<SVGSVGElement>;
  style?: React.CSSProperties;
}
```

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

### assignAttrsAtTag helper function signature

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.md

Provides the signature for the `assignAttrsAtTag` helper function, which adds extra attributes to SVG nodes.

```typescript
function assignAttrsAtTag(
  tag: string,
  extraPropsOrFn:
    | Dictionary
    | (( (options: TransformOptions & { previousAttrs: Dictionary }) => Dictionary ))
): TransformFactory;

type Dictionary = Record<string, string>;
```

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

### Use Icons in Vue Components

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-vue/README.md

Once registered, icons can be used directly in your Vue templates using their component tag.

```jsx
<icon-filter />
```

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

### Adjust ViewBox Factory Function

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.zh-CN.md

Implementation of the `adjustViewBox` transform factory, which modifies the `viewBox` attribute of SVG nodes.

```typescript
const adjustViewBox: TransformFactory = assignAttrsAtTag('svg', ({ name }) => ({
  viewBox: includes(name, OLD_ICON_NAMES) ? '0 0 1024 1024' : '64 64 896 896'
}));

```

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

### Define TransformFactory and related types

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.md

Defines the `TransformFactory` interface and associated types for processing abstract nodes in SVG icons.

```typescript
interface TransformFactory {
  (options: TransformOptions): (asn: AbstractNode) => AbstractNode;
}

type TransformOptions = {
  name: string;
  theme: ThemeType;
};

interface AbstractNode {
  tag: string;
  attrs: {
    [key: string]: string;
  };
  children?: AbstractNode[];
}
```

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

### Adjust ViewBox TransformFactory

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.md

Defines `adjustViewBox` using `assignAttrsAtTag` to conditionally set the `viewBox` attribute based on the icon name.

```typescript
const adjustViewBox: TransformFactory = assignAttrsAtTag('svg', ({ name }) => ({
  viewBox: includes(name, OLD_ICON_NAMES) ? '0 0 1024 1024' : '64 64 896 896'
}));
```

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

### Import IconDirective in Component

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-angular/src/README.md

Import the IconDirective into your Angular component to enable icon rendering.

```typescript
import { IconDirective } from '@ant-design/icons-angular';

@Component({
  imports: [ IconDirective ]
})
export class AppComponent {}
```

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

### Extra Node Transform Factories Type Definition

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.zh-CN.md

TypeScript type definitions for `TransformFactory`, `TransformOptions`, and `AbstractNode` used in icon node transformations.

```typescript
interface TransformFactory {
  (options: TransformOptions): (asn: AbstractNode) => AbstractNode;
}

type TransformOptions = {
  name: string;
  theme: ThemeType;
};

interface AbstractNode {
  tag: string;
  attrs: {
    [key: string]: string;
  };
  children?: AbstractNode[];
}

```

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

### Assign Attributes At Tag Helper Function

Source: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/docs/ContributionGuide.zh-CN.md

Type definition for the `assignAttrsAtTag` helper function, used to add attributes to specific SVG tags.

```typescript
function assignAttrsAtTag(
  tag: string,
  extraPropsOrFn:
    | Dictionary
    | (( (options: TransformOptions & { previousAttrs: Dictionary }) => Dictionary))
): TransformFactory;

type Dictionary = Record<string, string>;

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.