@biom3/react

@biom3/react

This package publishes via CICD to the public npm component: @biom3/react.

What's inside?

All react based BIOME components, hooks and utils. All components and hooks will be atleast 90% covered with tests. To read more about our API philosophy see this document.

To read more about this package, please goto biome.immutable.com

How to use

To use any @biom3/react primitives, install the package using your package manager of choice. For example:

npm i @biom3/react

and then import the primitive you need (all primitives will be exported from the root of the package):

import { Box, IconArrowBackward } from '@biom3/react';

Adding an icon

To add a new icon to the Biome React package, follow these steps:

• Convert your SVG to JSON

  • Extract the <path ... /> elements from your SVG file.
  • Create a JSON file named after your icon (e.g., MyIcon.json) with the following structure:
    • For single-variant icons:

      {
        "regular": ["<path d=\"...\" />"]
      }
      

    • For dual-variant icons (with both regular and bold):

      {
        "regular": ["<path d=\"...\" />"],
        "bold": ["<path d=\"...\" />"]
      }
      

• Upload the JSON file

  • Place your JSON file in the ../../hosted-assets/icons directory (relative to this package).

• Update the icon types

  • Add your icon's name to the appropriate array (singleVariantIcons or dualVariantIcons) in src/components/Icon/shared.ts for TypeScript support and autocomplete.

• Bump the package version

  • Bump the package version and publish the updated package to npm if needed.

• Merge your changes

  • Open a pull request with your changes and merge it into the main branch.

• Sync the hosted assets

  • The GitHub Action sync-hosted-files-with-s3 will automatically run after your PR is merged, syncing the local files to the remote icon host (e.g., S3 bucket). You do not need to upload manually.

• Publish the package

  • Bump the package version and publish the updated package to npm if needed.

• Use your icon

  • You can now use your icon in your code:

    <Icon icon="MyIcon" />