react-easy-icon v1.0.4
react-easy-icon - reusable SVG icon component
I am using this approach for all kinds of icons in any project that uses react or react based libraries/frameworks for frontend.
This package was created to make using SVG's as icons easier and to eliminate the need to reinvent the wheel on every project again and again.
What problem the package solves
It is highly reusable and since it is customizable it can be used standalone but also as a part of other component.
This component is used as a generic icon container without the path.
Paths of icons can be listed in the object and then we can import just the icons we need to fill that generic icon container.
Limitation of react-easy-icon component
Since this component is using single SVG path for creating the icon, all icons intended for use have to be optimized.
I wrote an article on how to optimize SVG's here, so feel free to take a look.
The second limitation is that this is for made for "flat", single-color icons. Hovers etc. can be made by targeting the CSS class and making appropriate styles.
Also you can put background color in the CSS class, but that's about how much more color it can have.
react-easy-icon props
Default viewBox
value is opinionated as I tend to optimize icons to the size of 24 x 24 pixels.
If resizing the icon to the different size than 24px, just put bigger number in width
prop and the icon will scale.
If the icon has aspect ratio different that 1:1, put the proper viewBox
value and of course add proper width
and height
values.
Prop | Required | Type | Default value |
---|---|---|---|
d | Yes | string | - |
width | No | number/string | 24 |
height | No | number/string | 'auto' |
color | No | string | 'black' |
viewBox | No | string | '0 0 24 24' |
className | No | string | - |
ariaHidden | No | boolean | true |
role | No | string | 'presentational' |
Applying styles to icon component
You can pass the styles through the className
prop. That prop is attached to the SVG
element. Only other element used here is the <path />
HTML example
<a href="/contact">
<ReactEasyIcon className="react-svg-icon" d={Icon.ARROW_LEFT} />
</a>
SCSS example
.react-icon {
border-radius: 50%;
background-color: #ffa500;
path {
fill: #fff;
}
}
a:hover .react-icon {
path {
fill: #000;
}
}
How to use it in the project
Just import the ReactIcon component and import some icons object with appropriate SVG path data
import ReactEasyIcon from 'react-easy-icon';
import icons from './icons';
const Button = ({}) => (
<button type="button">
<ReactEasyIcon d={icons.CART}>
<button>
);
export default Button
If you are wondering how the icons object should look like, take a look at the example below.
const icons = {
BULLSEYE:
"M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm0-5a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm0 9a7 7 0 1 1 0-14 7 7 0 0 1 0 14Zm0-12a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm0 15a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm0-19a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
CART:
"M11.13 19.33a2.69 2.69 0 1 1-3.64 0H4.4V1.87l-2.13-.79H1.25V0h1.03l3.2 1.06v3.25l17.26 2.28.01 8.48H5.47v2.8l15.09.8a2.7 2.7 0 1 1-2.32.66h-7.1Zm8.93.36a1.62 1.62 0 1 1 0 3.23 1.62 1.62 0 0 1 0-3.23Zm-10.75 0a1.62 1.62 0 1 1 0 3.23 1.62 1.62 0 0 1 0-3.23ZM5.47 14h16.2V7.54L5.47 5.4V14Z"
};
export default icons;
react-icon demo
Head over to CodeSandbox for live demo
Instructions for contributors
will be added later