@patternfly/react-icons NPM | npm.io

5.3.2 • Published 7 days ago

Install

Weekly downloads

17,832

License

MIT

Repository

Last release

7 days ago

@patternfly/react-icons

PatternFly 4 Icons as React Components.

Usage

import React from 'react';
import { TimesIcon } from '@patternfly/react-icons';

const closeIcon = <TimesIcon />;

For a list of the available icons please refer to the PatternFly React Docs

Every icon component has the following props:

Prop	Description	Default
color	Color of the icon (e.g. red, white, #c3ee)	'currentColor'
size	Size of the icon. There are 4 different sizes: sm, md, lg and xl	sm
title	Label of the icon	null

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';

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
        }
      }
    ]
  ]
}

react patternfly

@patternfly/react-table @patternfly/react-docs @patternfly/react-core @patternfly/react-topology @rh-uxd/integration @khala/react-table @kobsio/plugin-clickhouse @infinitebrahmanuniverse/nolb-_pat @everything-registry/sub-chunk-707 @janus-idp/backstage-plugin-tekton @janus-idp/backstage-plugin-topology @janus-idp/backstage-plugin-argocd @janus-idp/backstage-plugin-ocm @janus-idp/backstage-plugin-kiali @kaoto-next/ui @kaoto/kaoto @kaoto/kaoto-ui foreman-insights pf-docs patternfly-kafkareact-notifications pfreacttable @manageiq/react-ui-components @kie-tooling-core/patternfly-base @kie-tools-core/editor @kie-tools-core/guided-tour @kobsio/plugin-applications @kobsio/plugin-core @kobsio/plugin-elasticsearch @kobsio/plugin-flux @kobsio/plugin-helm @kobsio/plugin-jaeger @kobsio/plugin-kiali @kobsio/plugin-klogs @kobsio/plugin-prometheus @kobsio/plugin-resources @kobsio/plugin-sql @kobsio/shared @kogito-tooling/patternfly-base @kie-tools/serverless-workflow-combined-editor @kie-tools/serverless-workflow-editor @kie-tools/serverless-workflow-mermaid-viewer @kie-tools/serverless-workflow-text-editor @kie-tools/unitables @kie-tools/unitables-dmn @kie-tools/yard-editor @kie-tools/dashbuilder-editor @kie-tools/dashbuilder-viewer @kie-tools/dmn-runner @kie-tools/form @kie-tools/form-dmn @kie-tools/import-java-classes-component @kie-tools/pmml-editor @kie-tools/runtime-tools-components @kie-tools/runtime-tools-enveloped-components @kie-tools/scesim-editor @kie-tools/boxed-expression-component @parodos/plugin-parodos @openshift-assisted/ui-lib sce-sim-grid @odf-console/shared @patternfly/react-datetime @patternfly/react-drag-drop @patternfly/react-code-editor @patternfly/react-component-groups @patternfly/react-data-view @patternfly-labs/pf-labs-prometheus @patternfly/react-templates @patternfly/react-user-feedback @patternfly/react-inline-edit-extension @patternfly/react-log-viewer @patternfly/react-virtualized-extension @patternfly/virtual-assistant theme-patternfly-org-standalone-alt @theforeman/vendor-core @thiagoelg/kaoto-ui @vbartoli/skupper-network-console @vbartoli/skupper-site-console @vbartoli/skupper-site-console-app @ausuliv/react-core @ausuliv/react-log-viewer @ausuliv/react-log-viewer-docs @ausuliv/react-log-viewer-docs-test @ausuliv/react-table @aljesusg/backstage-plugin-kiali @app-data-services/prometheus-pf @breakaway/preact-core @breakaway/react-core @breakaway/react-docs @breakaway/react-log-viewer keycloak-ui-shared keycloak-account-ui keycloak-admin-ui alfonsomthd-odftest component-bible-library metal3-facet odfshared @redhat-cloud-services/rule-components @redhat-exd/container-analytics @rh-uxd/appservices-patternfly-crossconsole @rh-uxd/integration-react

7 days ago

5.4.0-prerelease.2

8 days ago

13 days ago

16 days ago

5.4.0-prerelease.1

19 days ago

20 days ago

1 month ago

1 month ago

5.3.0-prerelease.3

1 month ago

2 months ago

5.3.0-prerelease.2

2 months ago

2 months ago

2 months ago

2 months ago

5.3.0-prerelease.1

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

5.2.0-prerelease.10

4 months ago

4 months ago

5 months ago

5 months ago

5.2.0-prerelease.9

5 months ago

5 months ago

5 months ago

7 months ago

10 months ago

5.0.0-prerelease.8

10 months ago

5.0.0-prerelease.9

10 months ago

5.2.0-prerelease.5

6 months ago

5.2.0-prerelease.4

7 months ago

5.2.0-prerelease.7

6 months ago

5.2.0-prerelease.6

6 months ago

5.2.0-prerelease.1

7 months ago

5.2.0-prerelease.3

7 months ago

5.2.0-prerelease.2

7 months ago

5.2.0-prerelease.8

6 months ago

7 months ago

6 months ago

8 months ago

10 months ago

5.1.1-prerelease.1

8 months ago

5.1.1-prerelease.3

8 months ago

5.1.1-prerelease.2

8 months ago

5.1.1-prerelease.5

8 months ago

5.1.1-prerelease.4

8 months ago

5.1.1-prerelease.7

8 months ago

5.1.1-prerelease.6

8 months ago

5.1.1-prerelease.8

7 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

11 months ago

11 months ago

5.0.0-prerelease.1

11 months ago

5.0.0-prerelease.2

11 months ago

5.0.0-prerelease.3

11 months ago

5.0.0-prerelease.4

11 months ago

5.0.0-prerelease.5

11 months ago

5.0.0-prerelease.6

11 months ago

5.0.0-prerelease.7

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago