Helpers used alongside icons for digital and software products using the
Carbon Design System
Getting started
To install @carbon/icon-helpers in your project, you will need to run the
following command using npm:
npm install -S @carbon/icon-helpers
If you prefer Yarn, use the following command
instead:
yarn add @carbon/icon-helpers
Usage
@carbon/icon-helpers provides a couple of helpers for rendering <svg> nodes
in a document, or to help get the correct attributes to set on an <svg> node.
These include:
Name
Type
Description
getAttributes
(attributes: Object) => Object
Get the attributes for an <svg> node
formatAttributes
(attributes: Object) => String
Format the attributes into a string that can be applied to a node in the DOM
toString
(descriptor: Object) => String
Format the given icon descriptor into a string. Useful for templates
toSVG
(descriptor: Object) => DOMNode
Format the given icon descriptor into a DOM node
For most of the methods, attributes corresponds with whatever the name and
value would be if you were writing the HTML for the <svg>. For example, if we
wanted to set width and height we would do the following:
In order for the icon to be considered focusable, you will need to provide
either aria-label, aria-labelledby, or title in the given attributes in
addition to tabindex. For example:
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.
Helpers used alongside icons for digital and software products using the Carbon Design System
The npm package @carbon/icon-helpers receives a total of 105,838 weekly downloads. As such, @carbon/icon-helpers popularity was classified as popular.
We found that @carbon/icon-helpers demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.It has 14 open source maintainers collaborating on the project.
Last updated on 13 Mar 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.
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.