Socket
Socket
Sign inDemoInstall

@ant-design/icons-svg

Package Overview
Dependencies
0
Maintainers
11
Versions
15
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ant-design/icons-svg

Abstract nodes for ant design icons.


Version published
Maintainers
11
Weekly downloads
1,145,248
decreased by-7.02%

Weekly downloads

Package description

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

Readme

Source

Ant Design Icons

⭐ The abstract node of the Ant Design SVG icons.

NPM version NPM downloads

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;
  };
}

FAQs

Last updated on 01 Feb 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc