feat: add icons and change to currentColor on tools (#6)

* feat: add icons and change to currentColor on tools
* fix: fix icons not in one group

.svgo.yaml

@@ -21,3 +21,5 @@ plugins:
   - removeEmptyAttrs: true
   - removeHiddenElems: true
   - collapseGroups: true
+  - convertColors:
+        currentColor: true

README.md

@@ -9,8 +9,10 @@
   A fun-themed simple open source icon by the folks at <a href="https://natatoko.com">Natatoko</a>. This icons provide 2 icons variant: 24x24 and 20x20. Practically, this icons are used on our web application, but feel free to use it on your project!
 </p>
 
+---
+
 <div align="center">
-  <img src="https://user-images.githubusercontent.com/4648648/96118486-c47a2080-0f15-11eb-8899-59ce1acc32b1.png">
+  <img src="https://user-images.githubusercontent.com/4648648/96269199-404a9a80-0ff4-11eb-9039-c71f1225c721.png">
 </div>
 
 ## Installation
@@ -19,7 +21,6 @@ Install with [npm](npmjs.com/).
 
 ```bash
 npm install nataicons --save
-
 ```
 
 ## Usage
@@ -29,18 +30,8 @@ npm install nataicons --save
 Copy the SVGs you want to use from `icons/24x24` or `icons/20x20` inside `node_modules/nataicons` and inline them in your HTML.
 
 ```html
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  fill="none"
-  viewBox="0 0 24 24"
->
-  <path
-    fill="currentColor"
-    fill-rule="evenodd"
-    d="M3.22 1.375a1 1 0 111.56 1.25l-2 2.5a1 1 0 11-1.56-1.25l2-2.5zm16.155-.156a1 1 0 011.406.156l2 2.5a1 1 0 11-1.562 1.25l-2-2.5a1 1 0 01.156-1.406zM4 12a8 8 0 1116 0 8 8 0 01-16 0zm8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 5.5a1 1 0 10-2 0v4.032l-2.64 2.2a1 1 0 101.28 1.536l3-2.5A1 1 0 0013 12V7.5z"
-  />
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.5 14l8.515-11v6.5H21L12.015 21v-7H3.5z"/>
 </svg>
 ```
 
@@ -57,14 +48,16 @@ Copy the SVGs you want to use from `icons/24x24` or `icons/20x20` inside `node_m
 ### Vue
 
 1.  Import the icon
-    The Vue component located inside the package, so to import the component make sure to type the package name like this `nataicons/vue`.
+
+The Vue component located inside the package, so to import the component make sure to type the package name `nataicons/vue`.
 
 ```js
 import { Home24, Inbox24, Folder24, ... } from "nataicons/vue"
 ```
 
 2. Use the icon on your project
-   By default, each icon size will be on 24x24 and 20x20 depends on the variant. You can set a custom `size`: Multiple based sizing followed by an `x` or set a `px` directly by passing an integer.
+
+By default, each icon size will be on 24x24 and 20x20 depends on the variant. You can set a custom `size`: Multiple based sizing followed by an `x` or set a `px` directly by passing an integer.
 
 ```js
 // Multiple based sizing
@@ -74,11 +67,28 @@ import { Home24, Inbox24, Folder24, ... } from "nataicons/vue"
 <Home24 size="20" class="custom-class" />
 ```
 
+### React
+
+1.  Import the icon
+
+Same like Vue, to use the React components type the package `nataicons/react` on your project.
+
+```js
+import { Home24, Inbox24, Folder24, ... } from "nataicons/react"
+```
+
+2. Use the icon on your project
+
+```js
+<Home24 class="custom-class" />
+```
+
 ## Inspiration
 
 1. [vue-hero-icons](https://github.com/matschik/vue-hero-icons)
 2. [radix-icons](https://github.com/modulz/radix-icons)
+3. [heroicons](https://github.com/tailwindlabs/heroicons)
 
 ## License
 
-Nataicons is licensed under the [MIT License](https://github.com/afnizarnur/nataicons/blob/dev/LICENSE). In short, you are free to use this icons in any personal, open-source or commercial work. Attribution is optional but appreciated.
+Nataicons is licensed under the [MIT License](https://github.com/afnizarnur/nataicons/blob/dev/LICENSE). In short, you are free to use this icons in any personal, open-source or commercial work. Attribution is optional but appreciated.