Have ideas to improve npm?Join in the discussion! »

    @patternfly/react-icons
    TypeScript icon, indicating that this package has built-in type declarations

    4.7.16 • Public • Published

    @patternfly/react-icons

    PatternFly 4 Icons as React Components.

    Usage

    import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
     
    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/dist/js/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
            }
          }
        ]
      ]
    }

    Install

    npm i @patternfly/[email protected]

    Version

    4.7.16

    License

    MIT

    Unpacked Size

    5.58 MB

    Total Files

    5182

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar