hand-drawn-icons
Version:
A set of hand drawn icons to import into your own projects via a react component
109 lines (97 loc) • 16.7 kB
Markdown
React hand drawn icons
==
This package contains an `<Icon/>` component which can be provided with a `type` prop and a `color` prop.
<a href="https://www.buymeacoffee.com/NikhilPatel" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-violet.png" alt="Buy Me A Coffee" style="max-height: 60px !important; max-width: 217px !important;" ></a>
Type
-
In this package the type corresponds to what type of icon you need. For example `<Icon type="Star"/>` would produce a playful hand-drawn star as a react component.
**The available types are shown at the bottom.**
Color
-
The color prop corresponds to the desired stroke colour of the icon. This prop take any type of color object.
For example, for a yellow star component, the react component could be;
- `<Icon type="Star" color="#FFFF00"/>`
- `<Icon type="Star" color="rgb(255, 255, 0)"/>`
- `<Icon type="Star" color="rgba(255, 255, 0, 1)"/>`
maxWidth and maxHeight
-
These max size props do exactly the same as setting a `max-width` and `max-height` property in CSS.
| Icon Name | Preview | Usage |
|-|--|---|
|Attachment||`<Icon type="Attachment"/>`|
|Bar Graph||`<Icon type="Bar Graph"/>`|
|Book||`<Icon type="Book"/>`|
|Bookmark||`<Icon type="Bookmark"/>`|
|Briefcase||`<Icon type="Briefcase"/>`|
|Browser||`<Icon type="Browser"/>`|
|Calendar||`<Icon type="Calendar"/>`|
|Camera||`<Icon type="Camera"/>`|
|Cancel||`<Icon type="Cancel"/>`|
|Clock||`<Icon type="Clock"/>`|
|Comment Lines||`<Icon type="Comment Lines"/>`|
|Comment||`<Icon type="Comment"/>`|
|Computer||`<Icon type="Computer"/>`|
|Controls||`<Icon type="Controls"/>`|
|Conversation||`<Icon type="Conversation"/>`|
|Create New||`<Icon type="Create New"/>`|
|Credit Card||`<Icon type="Credit Card"/>`|
|Diary||`<Icon type="Diary"/>`|
|Document||`<Icon type="Document"/>`|
|Down Arrow||`<Icon type="Down Arrow"/>`|
|Email||`<Icon type="Email"/>`|
|Folder||`<Icon type="Folder"/>`|
|Forward||`<Icon type="Forward"/>`|
|Heart||`<Icon type="Heart"/>`|
|Home||`<Icon type="Home"/>`|
|Inbox||`<Icon type="Inbox"/>`|
|Layers||`<Icon type="Layers"/>`|
|Left Arrow||`<Icon type="Left Arrow"/>`|
|Link||`<Icon type="Link"/>`|
|List||`<Icon type="List"/>`|
|Location Marker||`<Icon type="Location Marker"/>`|
|Location||`<Icon type="Location"/>`|
|Map||`<Icon type="Map"/>`|
|Medal||`<Icon type="Medal"/>`|
|Menu||`<Icon type="Menu"/>`|
|Microphone||`<Icon type="Microphone"/>`|
|Minus||`<Icon type="Minus"/>`|
|More Details 3||`<Icon type="More Details 3"/>`|
|More Details 4||`<Icon type="More Details 4"/>`|
|Music||`<Icon type="Music"/>`|
|No Volume||`<Icon type="No Volume"/>`|
|Notification||`<Icon type="Notification"/>`|
|Padlock||`<Icon type="Padlock"/>`|
|Phone||`<Icon type="Phone"/>`|
|Photo||`<Icon type="Photo"/>`|
|Pie Chart||`<Icon type="Pie Chart"/>`|
|Pin||`<Icon type="Pin"/>`|
|Plus||`<Icon type="Plus"/>`|
|Printer||`<Icon type="Printer"/>`|
|Profile||`<Icon type="Profile"/>`|
|Rearrange||`<Icon type="Rearrange"/>`|
|Refresh||`<Icon type="Refresh"/>`|
|Reply||`<Icon type="Reply"/>`|
|Right Arrow||`<Icon type="Right Arrow"/>`|
|Save||`<Icon type="Save"/>`|
|Search||`<Icon type="Search"/>`|
|Settings||`<Icon type="Settings"/>`|
|Share||`<Icon type="Share"/>`|
|Shopping||`<Icon type="Shopping"/>`|
|Signal||`<Icon type="Signal"/>`|
|Signals||`<Icon type="Signals"/>`|
|Star||`<Icon type="Star"/>`|
|Tablet||`<Icon type="Tablet"/>`|
|Tag||`<Icon type="Tag"/>`|
|Tick||`<Icon type="Tick"/>`|
|Toggle||`<Icon type="Toggle"/>`|
|Trash||`<Icon type="Trash"/>`|
|Typing Comment||`<Icon type="Typing Comment"/>`|
|Up Arrow||`<Icon type="Up Arrow"/>`|
|User||`<Icon type="User"/>`|
|Users||`<Icon type="Users"/>`|
|Video Camera||`<Icon type="Video Camera"/>`|
|Video||`<Icon type="Video"/>`|
|View||`<Icon type="View"/>`|
|Volume||`<Icon type="Volume"/>`|
|Warning||`<Icon type="Warning"/>`|