@carbon/icons-react is a library of React components for IBM's Carbon Design System icons. It provides a comprehensive set of icons that can be easily integrated into React applications, ensuring consistency and adherence to the Carbon Design System.
What are @carbon/icons-react's main functionalities?
Basic Icon Usage
This feature allows you to import and use individual icons as React components. The example demonstrates how to import the 'Add32' icon and use it within a React component.
import { Add32 } from '@carbon/icons-react';
function App() {
return (
<div>
<Add32 />
</div>
);
}
Customizing Icon Size
This feature allows you to customize the size of the icons by passing width and height properties. The example shows how to set the size of the 'Add32' icon to 64x64 pixels.
import { Add32 } from '@carbon/icons-react';
function App() {
return (
<div>
<Add32 width={64} height={64} />
</div>
);
}
Applying Custom Styles
This feature allows you to apply custom styles to the icons using the style prop. The example demonstrates how to change the fill color of the 'Add32' icon to red.
react-icons provides a comprehensive set of icons from various icon libraries such as Font Awesome, Material Design, and more. It offers a similar approach to @carbon/icons-react by allowing icons to be used as React components. However, it supports a wider range of icon libraries, making it more versatile for projects that require icons from different sources.
fontawesome-svg-core is part of the Font Awesome library and provides a way to use Font Awesome icons as React components. It offers a similar functionality to @carbon/icons-react but focuses on the extensive Font Awesome icon set. It is ideal for projects that require the use of Font Awesome icons.
@carbon/icons-react
React components for icons in digital and software products using the Carbon
Design System
Getting started
To install @carbon/icons-react in your project, you will need to run the
following command using npm:
npm install -S @carbon/icons-react
If you prefer Yarn, use the following command
instead:
yarn add @carbon/icons-react
Usage
You can import an icon component into your project by referring to its name:
import { Add } from'@carbon/icons-react';
Each icon supports a size prop and supports the 16px, 20px, 24px, and 32px
sizes by default. The default size for each icon is 16px.
We also provide CommonJS and UMD files in the lib and umd directories,
respectively.
To import using CommonJS, you can do the following:
const { Add } = require('@carbon/icons-react');
Note: if you would like to find the import path for an icon, you can reference
our Icon Library
Icon fill
All icons from the library support being styled by the fill property. You can
change the color of an icon by passing in a custom class name that sets this
property (preferred), or by passing in an inline style. For example:
// CSS custom class name to set the fill of the iconto `rebeccapurple`
svg.my-custom-class {
fill: rebeccapurple;
}
Certain icons in the library support two distinct fill colors. You can target
the inner path by using the [data-icon-path="inner-path"] attribute selector.
For example:
// CSS custom class name to set the fill of the icon to `yellow`
svg.my-custom-class {
fill: yellow;
}
// Use the `data-icon-path` attribute selector to target the inner path// where we want to set the fill to `black`. We also set `opacity` to `1` so// that this inner-path is visible.
svg.my-custom-class[data-icon-path='inner-path'] {
fill: black;
opacity: 1;
}
By default, the icon components from @carbon/icons-react are treated as
decorative content. This means that we set aria-hidden="true" unless certain
props are passed to the component.
If you would like the icon to be announced by a screen reader, you can supply an
aria-label or aria-labelledby. For example:
Including tabIndex and aria-label (or aria-labelledby) will set the
corresponding tabindex on the underlying <svg> and verify support in older
browsers like Internet Explorer 11 by setting focusable to true.
🙌 Contributing
We're always looking for contributors to help us fix bugs, build new features,
or help us improve the project documentation. If you're interested, definitely
check out our Contributing Guide! 👀
This package uses IBM Telemetry to collect metrics data. By installing this
package as a dependency you are agreeing to telemetry collection. To opt out,
see
Opting out of IBM Telemetry data collection.
For more information on the data being collected, please see the
IBM Telemetry documentation.
React components for icons in digital and software products using the Carbon Design System
The npm package @carbon/icons-react receives a total of 107,944 weekly downloads. As such, @carbon/icons-react popularity was classified as popular.
We found that @carbon/icons-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.It has 9 open source maintainers collaborating on the project.
Package last updated on 07 Oct 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.
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.