Ant Design Icons
⭐ The abstract node of the Ant Design SVG icons.
[](https://npmjs.org/package/@ant-design/icons-svg)
[](https://npmjs.org/package/@ant-design/icons-svg)
Check [all icons list](https://github.com/ant-design/ant-design-icons/issues/227).
## Install
```bash
# use yarn
$ yarn add @ant-design/icons-svg
# or use npm
$ npm install @ant-design/icons-svg --save
```
## Use Library Adapter
- React: See [@ant-design/icons](../icons-react) to learn about detail usage.
## Contribution Guide 贡献指南
See contribution guide. [English](./docs/ContributionGuide.md) ｜ [中文](./docs/ContributionGuide.zh-CN.md)
## Get started
```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- ...'
// }
// }
// ]
// }
// };
```
- Interfaces
This library export all SVG files as `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;
}
```
## Render Helpers
```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);
// ==>
// ''
```
- Interfaces
```ts
declare function renderIconDefinitionToSVGElement(
icon: IconDefinition,
options?: HelperRenderOptions
): string;
interface HelperRenderOptions {
placeholders?: {
primaryColor?: string; // default #333
secondaryColor?: string; // default #E6E6E6
};
extraSVGAttrs?: {
[key: string]: string;
};
}
```