Security News
Node.js EOL Versions CVE Dubbed the "Worst CVE of the Year" by Security Experts
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
@ant-design/icons
Advanced tools
[![NPM version](https://img.shields.io/npm/v/@ant-design/icons.svg?style=flat)](https://npmjs.org/package/@ant-design/icons) [![NPM downloads](http://img.shields.io/npm/dm/@ant-design/icons.svg?style=flat)](https://npmjs.org/package/@ant-design/icons)
The @ant-design/icons package provides a comprehensive collection of SVG icons for use in web development projects, specifically designed to be used with the Ant Design UI framework. It allows developers to easily incorporate icons into their applications for enhanced UI design and user experience.
Importing and using an icon
This feature allows developers to import specific icons from the package and use them in their React components. In this example, the 'UserOutlined' icon is imported and used inside an Avatar component.
import { UserOutlined } from '@ant-design/icons';
<Avatar icon={<UserOutlined />} />;
Customizing icon properties
Developers can customize icons by passing style properties. This example demonstrates changing the color and font size of the 'HeartOutlined' icon.
import { HeartOutlined } from '@ant-design/icons';
<HeartOutlined style={{ color: 'hotpink', fontSize: '16px' }} />;
Using icons with Ant Design components
Icons from the package can be seamlessly integrated with other Ant Design components. Here, the 'DownloadOutlined' icon is used within a Button component to create a download button.
import { Button } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
<Button icon={<DownloadOutlined />} type="primary">Download</Button>;
React-icons provides a large set of icons from various icon libraries (FontAwesome, Ionicons, MaterialDesign, etc.) for React applications. Unlike @ant-design/icons, which is tailored for Ant Design, react-icons offers a broader selection from multiple sources, making it versatile for different design systems.
Font Awesome is a popular icon library that can be used in web projects. It provides icons as fonts and CSS. While it's not a React-specific package like @ant-design/icons, it's widely used across web development for adding icons due to its extensive collection and ease of use.
yarn add @ant-design/icons@4.0.0
You can import it directly or destructure from @ant-design/icons
when tree-shaking enabled.
import SmileOutlined from '@ant-design/icons/SmileOutlined';
import { SmileOutlined } from '@ant-design/icons';
import SmileFilled from '@ant-design/icons/SmileFilled';
import SmileTwoTone from '@ant-design/icons/SmileTwoTone';
import { SmileFilled, SmileTwoTone } from '@ant-design/icons';
interface AntdIconProps {
className?: string;
onClick?: React.MouseEventHandler<SVGSVGElement>;
style?: React.CSSProperties;
}
npm run generate
npm run compile
npm publish
FAQs
[![NPM version](https://img.shields.io/npm/v/@ant-design/icons.svg?style=flat)](https://npmjs.org/package/@ant-design/icons) [![NPM downloads](http://img.shields.io/npm/dm/@ant-design/icons.svg?style=flat)](https://npmjs.org/package/@ant-design/icons)
The npm package @ant-design/icons receives a total of 1,454,594 weekly downloads. As such, @ant-design/icons popularity was classified as popular.
We found that @ant-design/icons demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
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.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.