mdi-preact-es6 v7.4.1

Fork of https://github.com/levrik/mdi-preact, this fork doesn't babel/transpile the components and leverages a base component, with the endgoal of smaller bundles. In my setup, it reduces the overhead of each additional icon by about 300 bytes.

To use, you'll need to either get your bunder to transpile this directory or copy the icons manually into your codebase.

mdi-preact

Material Design Icons for Preact/React packaged as single components

New v7.4.0 released: See CHANGELOG.md

Installation

npm install mdi-preact
# or if you use Yarn
yarn add mdi-preact

Support for React is available via the mdi-react package.

Usage

Just search for an icon on materialdesignicons.com and look for its name.
The name translates to PascalCase followed by the suffix Icon in mdi-preact.
Also it's possible to import with an alias. You can find them on the detail page of the respective icon.

For example the icons named alert and alert-circle:

import AlertIcon from 'mdi-preact/AlertIcon';
import AlertCircleIcon from 'mdi-preact/AlertCircleIcon';

const MyComponent = () => {
  return (
    <div>
      {/* The default color is the current text color (currentColor) */}
      <AlertIcon color="#fff" />
      {/* The default size is 24 */}
      <AlertCircleIcon class="some-class" size={16} />
      {/* This sets the icon size to the current font size */}
      <AlertIcon size="1em" />
    </div>
  );
};

To change the color on hover you can just use your own class and plain CSS.

.some-class:hover {
  fill: red;
}

You can also add default styling via the mdi-icon class.

.mdi-icon {
  background-color: green;
}