@ant-design/icons-svg

What is @ant-design/icons-svg?

The @ant-design/icons-svg package provides a collection of SVG icons that are part of the Ant Design system, which is a design language for UI design. This package allows developers to use SVG icons in their web applications, providing a consistent look and feel that aligns with the Ant Design guidelines.

What are @ant-design/icons-svg's main functionalities?

Importing and using individual SVG icons

This feature allows developers to import individual SVG icons from the package and use them in their React components. The example shows how to import the 'AccountBookFill' icon and use it within a React component.

import { AccountBookFill } from '@ant-design/icons-svg';

// Usage in a React component
const MyComponent = () => (
  <svg {...AccountBookFill.props} />
);

Customizing SVG icon properties

Developers can customize the properties of SVG icons, such as 'fill', 'width', and 'height'. The example demonstrates how to override the default properties of the 'AccountBookFill' icon with custom values.

import { AccountBookFill } from '@ant-design/icons-svg';

// Customizing the icon's properties
const customProps = {
  fill: 'currentColor',
  width: '1em',
  height: '1em'
};

// Usage in a React component
const MyComponent = () => (
  <svg {...AccountBookFill.props} {...customProps} />
);

Other packages similar to @ant-design/icons-svg

react-icons

The 'react-icons' package includes a large collection of icons from various icon libraries (such as Font Awesome, Ionicons, Material Design icons, and more) for use in React applications. It is similar to @ant-design/icons-svg in that it provides ready-to-use icons, but it offers a wider range of icon sets from different sources.

material-design-icons

This package provides the Material Design icons created by Google. It is similar to @ant-design/icons-svg as it also offers SVG icons, but these icons follow Google's Material Design guidelines rather than the Ant Design system.

font-awesome

Font Awesome is a popular icon set that can be used as web fonts or SVG icons. It is similar to @ant-design/icons-svg in providing a large set of icons, but it is not specifically tied to a design system like Ant Design and offers different styles and icon categories.

README

Ant Design Icons

⭐ The abstract node of the Ant Design SVG icons.

Check all icons list.

Install

# 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 to learn about detail usage.

Contribution Guide 贡献指南

See contribution guide. English ｜ 中文

Get started

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.

// 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

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

• Interfaces

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

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