From 771cf1d66e872e8ea242752ca7aea1ccd5f8aefb Mon Sep 17 00:00:00 2001
From: Eric Fennis <eric.fennis@gmail.com>
Date: Sat, 18 Jul 2020 01:01:56 +0200
Subject: [PATCH] Add introduction readme

---
 README.md | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/README.md b/README.md
index e75506259..44b13526a 100644
--- a/README.md
+++ b/README.md
@@ -13,12 +13,64 @@ Featherity is a fork of [Feather Icons](https://github.com/feathericons/feather)
 * [Contributing](#contributing)
 * [License](#license)
 
+## Installation
+``` bash
+npm install featherity
+#or
+yarn add featherity
+```
+
 ## Usage
 
 At its core, Featherity is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use Feather icons in all the same ways you can use SVGs (e.g. `img`, `background-image`, `inline`, `object`, `embed`, `iframe`). Here's a helpful article detailing the many ways SVGs can be used on the web: [SVG on the Web – Implementation Options](https://svgontheweb.com/#implementation)
 
 The following are additional ways you can use Featherity.
 
+### ESModule
+
+``` js
+import { Camera } from 'featherity';
+// Returns HTMLElement
+
+// Usage
+document.appendChild(Camera);
+```
+
+### React
+
+``` js
+import { Camera } from 'featherity/react';
+// Returns ReactComponent
+
+// Usage
+const App = () => {
+  return <Camera color="red" size={48}/>
+};
+
+export default App;
+```
+
+### Vue
+
+``` vue
+<template>
+  <div id="app">
+    <Camera color="red" :size="48"/>
+  </div>
+</template>
+
+<script>
+import { Camera } from 'featherity/vue';
+
+export default {
+  name: "App",
+  components: {
+    Camera
+  }
+};
+</script>
+```
+
 ### Figma
 
 You can use the components from [this Figma file](https://www.figma.com/file/g0UipfQlRfGrntKPxZknM7/Featherity).