# @ant-design/icons-svg 中文文档

规范地址：https://npmcn.com/package/%40ant-design/icons-svg/

版本：4\.6\.0
npm 元数据更新时间：2026-08-31T09:41:41.628Z
中文译文更新时间：2026-11-06T06:00:18.008Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ant-design/icons-svg
原文对照：https://npmcn.com/package/%40ant-design/icons-svg/?lang=original
项目主页：https://github.com/ant-design/ant-design-icons/
源码仓库：https://github.com/ant-design/ant-design-icons

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：3.7 MB，5102 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2019-07-30T07:16:23.798Z
- 最新版本发布：2026-08-31T09:41:41.391Z
- 近 30 天下载量：14461053（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 2 个）

## 中文简介

蚂蚁设计图标的抽象节点.

## 安装

```sh
npm install @ant-design/icons-svg
```

也可以使用：`pnpm add @ant-design/icons-svg`、`yarn add @ant-design/icons-svg`、`bun add @ant-design/icons-svg`

## README

# 蚂蚁设计图标

QQ 蚂蚁设计SVG图标的抽象节点.

[![NPM version](https://img.shields.io/npm/v/@ant-design/icons-svg.svg?style=flat)](https://npmjs.org/package/@ant-design/icons-svg) [![NPM downloads](http://img.shields.io/npm/dm/@ant-design/icons-svg.svg?style=flat)](https://npmjs.org/package/@ant-design/icons-svg)

检查 [所有图标列表](https://github.com/ant-design/ant-design-icons/issues/227)。 。 。 .

## 安装

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

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

## 使用库适配器

-   反应: 见 [@ant-design/icons (英语)](https://npmcn.com/package/%40ant-design/icons-react) 了解细节用途.

## 贡献指南

见贡献指南. [联合国](https://npmcn.com/package/%40ant-design/icons-svg/docs/ContributionGuide.md) | [页:1](https://npmcn.com/package/%40ant-design/icons-svg/docs/ContributionGuide.zh-CN.md)

## 开始吧

```ts
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- ...'
//         }
//       }
//     ]
//   }
// };
```

-   接口

此库将全部 SVG 文件导出为 `IconDefinition`。 。 。 .

```ts
// types.d.ts
export declare type ThemeType = 'filled' | 'outlined' | 'twotone';

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

export interface IconDefinition {
  name: string; // kebab-case-style
  theme: ThemeType;
  icon:
    | ((primaryColor: string, secondaryColor: string) => AbstractNode)
    | AbstractNode;
}
```

## 助推器

```ts
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>'
```

-   接口

```ts
declare function renderIconDefinitionToSVGElement(
  icon: IconDefinition,
  options?: HelperRenderOptions
): string;

interface HelperRenderOptions {
  placeholders?: {
    primaryColor?: string; // default #333
    secondaryColor?: string; // default #E6E6E6
  };
  extraSVGAttrs?: {
    [key: string]: string;
  };
}
```

## 常见问题

### @ant-design/icons-svg 是什么？

蚂蚁设计图标的抽象节点\.

### 如何安装 @ant-design/icons-svg？

在项目目录运行 npm install @ant-design/icons-svg，或使用 pnpm add / yarn add / bun add。

### @ant-design/icons-svg 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ant-design/icons-svg 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ant-design/icons-svg 可以商用吗？

@ant-design/icons-svg 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ant-design/icons-svg 的下载量有多少？

根据 npm 官方下载统计，@ant-design/icons-svg 在 2026/10/06 – 2026/11/04 这 30 天内被下载 14,461,053 次，日均约 482,035 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ant-design/icons-svg 还在维护吗？

最新版本 4\.6\.0 发布于 2026/08/31（2 个月前）；至今共发布 20 个版本，其中过去 12 个月发布了 2 个；首次发布于 2019/07/30。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。