Socket
Socket
Sign inDemoInstall

@carbon/icons

Package Overview
Dependencies
1
Maintainers
14
Versions
301
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@carbon/icons

Icons for digital and software products using the Carbon Design System


Version published
Maintainers
14
Weekly downloads
37,690
decreased by-27.18%

Weekly downloads

Readme

Source

@carbon/icons

Icons for digital and software products using the Carbon Design System

Getting started

To install @carbon/icons in your project, you will need to run the following command using npm:

npm install -S @carbon/icons

If you prefer Yarn, use the following command instead:

yarn add @carbon/icons

Usage

Icons in Carbon are provided through a variety of packages, often specific for the framework that will use them. Currently, we support the following packages for various frameworks:

We also support using icons in Vanilla JavaScript.

In order to use an icon, it may be helpful to reference our Icon library reference page in order to find the specific icon you would like to use.

Vanilla

Once you've found an icon and you're looking to use it in Vanilla JavaScript, you can import the icon by writing the following in your JavaScript file:

import IconName from '@carbon/icons/<module-type>/path-to-icon/size';

For example, if I wanted to import the 16x16 add icon, I would write:

import AddIcon from '@carbon/icons/es/add/16';

In this case, es is used for ES2015 modules (ESM), but one may also use lib for CommonJS or umd for UMD modules.

In order to render this to the screen, we'll make use of our icon-helpers package. This package gives us two options for rendering our icons: toString and toSVG. If rendering in templates, you may want to use the former. If rendering to the DOM, toSVG may be helpful.

In our case, we'll use toSVG to create a node in the DOM for the 16x16 add icon:

import { getAttributes, toSVG } from '@carbon/icon-helpers';
import addIcon from '@carbon/icons/es/add/16';

const addIconNode = toSVG({
  ...addIcon,
  attrs: getAttributes(addIcon.attrs),
});

Styling the inner path

Certain icons in the library support an alternate fill inside of the icon, for example warning--filled supports styling the inner ! path.

In order to style the inner path, you will need to target the SVG using CSS. In general, you can target the path by writing the following:

svg [data-icon-path='inner-path'] {
  fill: blue;
  opacity: 1;
}

In the code snippet above, we are targeting the inner path attribute with [data-icon-path="inner-path"]. The value of fill will be the custom color you would like to set for the inner path. We also need to set opacity to 1 in order to get this inner path to be visible on the page.

Reference

You can view a full reference of our icons here . This is useful for finding the path information in order to import an icon.

๐Ÿ™Œ 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! ๐Ÿ‘€

๐Ÿ“ License

Licensed under the Apache 2.0 License.

IBM Telemetry IBM Telemetry

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.

Keywords

FAQs

Last updated on 27 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.

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