ezcater icons

Include ezcater branded icons in your React projects easily with @ezcater/icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

Installation

Install @ezcater/icons. Import icons using one of these two options:

Option 1:

import { Beer, WineBottle } from '@ezcater/icons';

Option 2:

import Beer from '@ezcater/icons/Beer';
import WineBottle from '@ezcater/icons/WineBottle';

Option 1 offers the simplest developer experience, but should only be used in projects that support Tree-shaking, such as create-react-app or Next.js. If you're using ES6 modules and a bundler that supports tree-shaking, you can safely use named imports and get an optimized bundle size automatically.

If Tree-shaking is unavailable in your project, Option 2 requires no additional configuration to keep your bundle size to a minimum, by only including the icons imported at the specified path.

Usage

import { Beer } from '@ezcater/icons';

function Question() {
  return (
    <h3>
      {' '}
      Lets go for a <Beer />?{' '}
    </h3>
  );
}

Icon overview

You can add more icons by submitting pull requests or creating issues.

Preview

The preview site is the react-icons website, built in NextJS.

cd packages/www
yarn dev

Why React SVG components instead of fonts?

SVG is supported by all major browsers. With @ezcater/icons, you can serve only the needed icons instead of one big font file to the users, helping you to recognize which icons are used in your project.

Inspiration

Licence

MIT