remixicon-react

remixicon-react

Remix Icons for React packaged as single components

This repo is based on the very good mdi-react package.

Installation

npm install remixicon-react
# or if you use Yarn
yarn add remixicon-react

Usage

Just search for an icon on remixicon.com and look for its name.
The name translates to PascalCase followed by the suffix Icon in remixicon-react.

For example the icons named alert-line and alert-fill:

import AlertLineIcon from 'remixicon-react/AlertLineIcon';
import AlertFillIcon from 'remixicon-react/AlertFillIcon';

const MyComponent = () => {
  return (
    <div>
      {/* The default color is the current text color (currentColor) */}
      <AlertLineIcon color="#fff" />
      {/* The default size is 24 */}
      <AlertFillIcon className="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 remixicon-icon class.

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