@redgate/honeycomb-icons

Honeycomb icons

This package contains the Honeycomb icons, packaged as Material UI SvgIcon components.

Installation

npm

npm install @redgate/honeycomb-icons

yarn

yarn add @redgate/honeycomb-icons

Usage

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.

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.

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

instead of

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

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

  "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'."
      }
    ]
  }