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

@patternfly/react-icons

Package Overview
Dependencies
Maintainers
0
Versions
849
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@patternfly/react-icons

PatternFly 4 Icons as React Components

  • 6.1.0-prerelease.4
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
44K
increased by6.1%
Maintainers
0
Weekly downloads
 
Created
Source

@patternfly/react-icons

PatternFly Icons as React Components.

Usage

import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';

const closeIcon = <TimesIcon />;

For a list of the available icons please refer to the PatternFly react docs

Styling icons

All icons from @patternfly/react-icons have the HTML class pf-v6-svg applied and CSS styles applied via @patternfly/react-styles.

If not using @patternfly/react-icons in conjunction with @patternfly/react-styles, then the following generic styles will need to be applied to the icons: height="1em", style="vertical-align: -0.125em;" width="1em"

If using @patternfly/react-icons in conjunction with @patternfly/react-core, icons can be further styled by wrapping an icon from @patternfly/react-icons in a PatternFly icon component.

Adding icons

Icons for this package are generated from the @fortawesome/free-solid-svg-icons package. To add more to what is generated, modify the icons.js file in the build folder.

If you have some custom icon defined by svg path the best way to add such icon to this repository is to add its path definition in pfIcons.js file in the build folder.

module.exports = {
  pfIcons: {
    // ... other icon defintions
    bigPlus: {width: 1024, height: 1024, svgPathData: 'M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z'}
  }
}

Tree shaking

Ensure optimization.sideEffects is set to true within your Webpack config:

optimization: {
  sideEffects: true
}

Use ESM module imports to enable tree shaking with no additional setup required.

import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';

To enable tree shaking with named imports for CJS modules, utilize babel-plugin-transform-imports and update a babel.config.js file to utilize the plugin:

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: [
    [
      "transform-imports",
      {
        "@patternfly/react-icons": {
          transform: (importName, matches) => `@patternfly/react-icons/dist/js/icons/${importName.split(/(?=[A-Z])/).join('-').toLowerCase()}`,
          preventFullImport: true
        }
      }
    ]
  ]
}

Keywords

FAQs

Package last updated on 20 Nov 2024

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