remixicon-react
v1.0.0
Published
Remix Icon for React
Downloads
45,016
Readme
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;
}