Ant Design Icons

⭐ The abstract node of the Ant Design SVG icons.

Check all icons list.

Install

1# use yarn
2$ yarn add @ant-design/icons-svg
3
4# or use npm
5$ npm install @ant-design/icons-svg --save

Use Library Adapter

• React: See @ant-design/icons to learn about detail usage.

Contribution Guide 贡献指南

See contribution guide. English ｜ 中文

Get started

1import { AccountBookOutlined } from '@ant-design/icons-svg';
2// or
3// import AccountBookOutlined from '@ant-design/icons-svg/es/asn/AccountBookOutlined';
4
5console.log(AccountBookOutlined);
6// ==>
7// {
8//   name: 'account-book',
9//   theme: 'outlined',
10//   icon: {
11//     tag: 'svg',
12//     attrs: {
13//       viewBox: '64 64 896 896',
14//       focusable: 'false'
15//     },
16//     children: [
17//       {
18//         tag: 'path',
19//         attrs: {
20//           d:
21//             'M880 184H712v-64c0-4.4-3.6-8-8-8h- ...'
22//         }
23//       }
24//     ]
25//   }
26// };

• Interfaces

This library export all SVG files as IconDefinition.

1// types.d.ts
2export declare type ThemeType = 'filled' | 'outlined' | 'twotone';
3
4export interface AbstractNode {
5  tag: string;
6  attrs: {
7    [key: string]: string;
8  };
9  children?: AbstractNode[];
10}
11
12export interface IconDefinition {
13  name: string; // kebab-case-style
14  theme: ThemeType;
15  icon:
16    | ((primaryColor: string, secondaryColor: string) => AbstractNode)
17    | AbstractNode;
18}

Render Helpers

1import { AccountBookFilled } from '@ant-design/icons-svg';
2import { renderIconDefinitionToSVGElement } from '@ant-design/icons-svg/es/helpers';
3
4const svgHTMLString = renderIconDefinitionToSVGElement(AccountBookFilled, {
5  extraSVGAttrs: { width: '1em', height: '1em', fill: 'currentColor' }
6});
7
8console.log(svgHTMLString);
9// ==>
10// '<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>'

• Interfaces

1declare function renderIconDefinitionToSVGElement(
2  icon: IconDefinition,
3  options?: HelperRenderOptions
4): string;
5
6interface HelperRenderOptions {
7  placeholders?: {
8    primaryColor?: string; // default #333
9    secondaryColor?: string; // default #E6E6E6
10  };
11  extraSVGAttrs?: {
12    [key: string]: string;
13  };
14}