open-index/open-npm huggingface dataset:
npm package: @redgate/honeycomb-icons
Description: This package contains the [Honeycomb icons](https://honeycomb.red-gate.com/ui/library/elements/icons), packaged as Material UI [`SvgIcon`](https://mui.com/api/svg-icon/) components.
Latest version: 0.5.3

# Honeycomb icons

This package contains the [Honeycomb icons](https://honeycomb.red-gate.com/ui/library/elements/icons), packaged as Material UI [`SvgIcon`](https://mui.com/api/svg-icon/) components.

## Installation

### npm

```
npm install @redgate/honeycomb-icons
```

### yarn

```
yarn add @redgate/honeycomb-icons
```

## Usage

```tsx
import React from "react";
import FlywayIcon from "@redgate/honeycomb-icons/FlywayIcon";
import SqlCloneIcon from "@redgate/honeycomb-icons/SqlCloneIcon";

const Example: React.FunctionComponent = () => (
  <>
    <FlywayIcon />
    <SqlCloneIcon />
  </>
);
```

These icons accept any of the `SvgIcon` props, such as color.

```tsx
import React from "react";
import FlywayIcon from "@redgate/honeycomb-icons/FlywayIcon";
import SqlCloneIcon from "@redgate/honeycomb-icons/SqlCloneIcon";

const Example: React.FunctionComponent = () => (
  <>
    <FlywayIcon color="primary" />
    <SqlCloneIcon color="secondary" />
  </>
);
```

We recommend importing from the child files rather than importing from root to keep your bundle size low.

I.e.

```tsx
import FlywayIcon from "@redgate/honeycomb-icons/FlywayIcon";
```

instead of

```tsx
import { FlywayIcon } from "@redgate/honeycomb-icons";
```

You can ensure you do this by adding this rule to your eslint config:

```json
  "rules": {
    ...
    "no-restricted-syntax": [
      "error",
      {
        "selector": "ImportDeclaration:[source.value=@redgate/honeycomb-icons]",
        "message": "Importing from `@redgate/honeycomb-icons` loads all icons! Use narrower imports instead such as 'import FlywayIcon from '@redgate/honeycomb-icons/FlywayIcon'."
      }
    ]
  }
```