Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@carbon/pictograms-react

Package Overview
Dependencies
Maintainers
17
Versions
219
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@carbon/pictograms-react

React components for pictograms in digital and software products using the Carbon Design System

  • 10.8.0-alpha.5887
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
17K
increased by19.9%
Maintainers
17
Weekly downloads
 
Created
Source

@carbon/pictograms-react

React components for pictograms in digital and software products using the Carbon Design System

Getting started

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

npm install -S @carbon/pictograms-react

If you prefer Yarn, use the following command instead:

yarn add @carbon/pictograms-react

Usage

Icons in this package support the following sizes: 16, 20, 24, and 32 pixels. These sizes refer to the width and height of the icon. You can import an icon component into your project by referring to its name and size:

import { Add24 } from '@carbon/pictograms-react';

We also provide CommonJS and UMD files in the lib and umd directories, respectively.

To import using CommonJS, you can do the following:

const { Add24 } = require('@carbon/pictograms-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 icon to `rebeccapurple`
svg.my-custom-class {
  fill: rebeccapurple;
}
import { Airplane } from '@carbon/pictograms-react';

function MyComponent() {
  return (
    <button>
      <Airplane aria-label="Add" className="my-custom-class" />
    </button>
  );
}

Focus and aria-label

By default, the icon components from @carbon/pictograms-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:

import { Airplane } from '@carbon/pictograms-react';

function MyComponent() {
  return (
    <button>
      <Airplane aria-label="Add" />
    </button>
  );
}

Doing this will add the appropriate role to the <svg> node, as well.

If you would like the <svg> to receive focus, you will need to pass in a tabIndex value. For example:

import { Airplane } from '@carbon/pictograms-react';

function MyComponent() {
  return <Airplane aria-label="Add" tabIndex="0" />;
}

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! 👀

📝 License

Licensed under the Apache 2.0 License.

Keywords

FAQs

Package last updated on 10 Oct 2019

Did you know?

Socket

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
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc