DOCSEARCHbyAlgolia
Submit Docs

Ant Design Icons

repository·master·Indexed 22 days ago

https://github.com/ant-design/ant-design-icons

A collection of optimized SVG icon trees for various frontend frameworks. It provides framework-specific packages including @ant-design/icons for React, @ant-design/icons-vue for Vue, @ant-design/icons-angular for Angular, @ant-design/icons-react-native for React Native, and @ant-design/icons-svg for vanilla JS/SVG.

Tokens
19.3K
Snippets
86
Records
98
Agent score
28%

What's inside Ant Design Icons

  1. Overview of Ant Design Icons packages

    master

    Ant Design Icons provides SVG icon trees for various web and mobile frameworks. Depending on your project's technology stack, you should install the corresponding package:

    • Vanilla JS/SVG: @ant-design/icons-svg
    • React: @ant-design/icons
    • React Native: @ant-design/icons-react-native
    • Angular: @ant-design/icons-angular
    • Vue: @ant-design/icons-vue

  2. Understand the @ant-design/icons-svg project structure

    master

    The @ant-design/icons-svg package uses a specific directory structure for icon management:

    • svg/: The raw icon directory. Add new .svg files here in theme-specific folders (filled, outlined, twotone).
    • src/: The source directory. All files here are generated by gulp and compiled by tsc.
    • es/: TypeScript compiler output (ESNext module).
    • lib/: TypeScript compiler output (CommonJS module).
    • inline-svg/: Processed icons output as .svg files.
    • inline-namespaced-svg/: Processed icons output as .svg files including the SVG namespace (xmlns="http://www.w3.org/2000/svg").
    • gulpfile.ts: Core Gulp configuration.
    • tsconfig.build.json: TypeScript configuration used during builds.

  3. The icon generation and compilation process

    master

    The @ant-design/icons-svg package uses a two-step process to transform raw SVGs into usable code.

    1. Generation (ut generate)

    This triggers a gulp build process that:

    • Cleans previous build artifacts.
    • Copies helper functions (helpers.ts) and type definitions (types.ts) to src.
    • Generates Abstract Node (ASN) files for filled, outlined, and twotone themes in parallel.
    • Generates the entry file index.ts.
    • Generates inline SVG assets (inline-svg and inline-namespaced-svg).

    2. Compilation (ut build)

    This uses tsc to compile the generated files in the src directory into the es and lib output directories.

    ut generate
ut build

  4. Use Namespaces for custom icons

    master

    Namespaces allow you to register your own icon sets and support both static and dynamic loading.

    • Static Loading: Use iconService.addIconLiteral('namespace:icon-name', '<svg>...</svg>') to register an icon string directly.
    • Dynamic Loading: Place your SVG files in a directory following the pattern assets/{namespace}/{icon-name}.svg. You can then render them using the type attribute: <span antIcon type="namespace:icon-name"></span>.
    // Example of static namespace loading
this.iconService.addIconLiteral('animal:panda', '<svg>...</svg>');
    <!-- Example of dynamic namespace loading (requires panda.svg in assets/animal/) -->
<span antIcon type="animal:panda"></span>

  7. How to add, modify, or delete icons in @ant-design/icons-svg

    master

    To manage icons in this package, you work directly with the .svg files located in the svg/ directory.

    Icon Design Requirements

    Before adding an icon, ensure it meets these specifications:

    1. Source: Must come from the Ant Design official icon library or comply with Ant Design design specifications.
    2. ViewBox: Must be 0 0 1024 1024.
    3. Bleed Area: The icon must have a 64px bleed area around the perimeter.

    Workflow

    1. Add/Modify/Delete: Place or edit .svg files in the appropriate theme directory within svg/ (filled, outlined, or twotone).
    2. Generate TS Source: Run ut generate to convert SVG files into TypeScript Abstract Nodes (ASN) in the src directory.
    3. Compile: Run ut build to compile the src files into es (ES Modules) and lib (CommonJS) directories.
    # 1. Generate ts source files to src
ut generate

# 2. Compile src files to es and lib
ut build

  8. Use Ant Design Icons in Angular components

    master

    To use icons, you must import the IconDirective into your component's imports array. You then need to register the specific icons you want to use via IconService (static loading) or via provideAntIcons in your application configuration.

    import { IconDirective, IconService } from '@ant-design/icons-angular';
import { AccountBookFill } from '@ant-design/icons-angular/icons';
import { Component, inject } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ IconDirective ],
  template: `<span antIcon type="ant-cloud" theme="outline"></span>`
})
export class AppComponent {
  readonly iconService = inject(IconService);
  
  constructor() {
    // Register specific icons to avoid massive bundle sizes
    this.iconService.addIcon(...[ AccountBookFill ]);
    // Optional: Configure two-tone color
    this.iconService.twoToneColor = { primaryColor: '#1890ff' };
  }
}

  10. Run the icon generation and build workflows

    master

    The @ant-design/icons-svg package uses two primary CLI commands to manage the icon lifecycle:

    Generate Workflow

    Run ut generate to trigger the gulp workflow. This process:

    1. Cleans/deletes previously generated or compiled files.
    2. Parallelly generates abstract nodes for filled, outlined, and twotone themes.
    3. Parallelly generates index.ts, the inline-svg directory, and the inline-namespaced-svg directory.

    Build Workflow

    Run ut build to use tsc to compile the generated files in the src directory into the output directories es (ESM) and lib (CommonJS).

    ut generate
ut build

  11. Generate and build icons using ut commands

    master

    The project provides two primary commands for managing the icon lifecycle:

    • ut generate: Triggers the gulp workflow. It cleans previous files, copies helpers/types to src, generates abstract nodes for filled, outlined, and twotone themes, and finally generates index.ts and the inline-svg directories.
    • ut build: Uses tsc to compile files from the src directory into the es and lib output directories.
    ut generate
ut build