docs: update README.md

Author: xiaoluoboding

README.md

@@ -1,14 +1,26 @@
 # Vuepress Plugin HeroPattern
 
+<p align="center">
+  <a href="https://github.com/xiaoluoboding/vuepress-plugin-hero-pattern">
+    <img src="./assets/images/logo.png">
+  </a>
+</p>
+
+<p align="left">
+    <a href="https://www.npmjs.com/package/vuepress-plugin-hero-pattern"><img src="https://img.shields.io/npm/v/vuepress-plugin-hero-pattern.svg?maxAge=2592000"></a>
+    <a href="https://www.npmjs.com/package/vuepress-plugin-hero-pattern"><img src="https://img.shields.io/npm/dt/vuepress-plugin-hero-pattern.svg"></a>
+    <a href="https://raw.githubusercontent.com/vueblocks/vuepress-plugin-hero-pattern/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg"></a>
+</p>
+
 Register a global `<HeroPattern />` component for VuePress.
 
-This component generate a seemless SVG background pattern.
+This component generate a seemless SVG background pattern as a background image.
 
-> This plugin is a adaptor of [hero-pattern](http://www.heropatterns.com/) for VuePress
+> This plugin is a VuePress implementation of [Hero Patterns](http://www.heropatterns.com/), All 87 unstyled svg icons is optimized with svgo.
 
 ## See Demo on CodeSandbox
 
-[![Edit vuepress-plugin-hero-pattern](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/musing-surf-twidv?fontsize=14&hidenavigation=1&theme=dark)
+[![Edit vuepress-plugin-hero-pattern](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vuepress-plugin-hero-pattern-o1ebr?fontsize=14&hidenavigation=1&theme=dark)
 
 ## Installation
 
@@ -34,17 +46,37 @@ module.exports = {
 
 ## Usage
 
-> Only background image, you must give the width & height of the element
+### Default
+
+I pick `line-to-motion` as the preset pattern.
+
+> Only background image, you must give the height of the element
+
+```vue
+<HeroPattern style="height: 160px;" />
+```
+
+### Pick a Pattern
+
+Hero Pattern provide 87 kinds of pattern you can choose, check [pattern list](https://github.com/xiaoluoboding/vuepress-plugin-hero-pattern/tree/master/assets/icons)
 
 ```vue
-<HeroPattern style="width: 240px; height: 80px;" />
+<HeroPattern
+  style="height: 160px;"
+  pattern="glamorous"
+  fill-color="#FAF5FF"
+  background-color="#553C9A"
+  fill-opacity=".66"
+/>
 ```
 
-> With the custom slot, in the case, you can let the slot element control the pattern's height
- ÷
+### With the custom slot
+
+> In the case, you can let the slot element control the pattern's height
+
 ```vue
 <hero-pattern>
-  <div style="padding: 64px; font-size: 2rem; color: white;">
+  <div style="padding: 64px; font-size: 2rem; font-weight: bold; color: white;">
     All Posts
   </div>
 </hero-pattern>
@@ -54,7 +86,7 @@ module.exports = {
 
 | Props | Description | Type | Default |
 | :---: | :---------: | :--: | :-----: |
-| pattern | 87 kinds of patterns that Hero Patterns supported, check [pattern list]() | String | `line-to-motion` |
+| pattern | 87 kinds of patterns that Hero Patterns supported, check [pattern list](https://github.com/xiaoluoboding/vuepress-plugin-hero-pattern/tree/master/assets/icons) | String | `line-to-motion` |
 | fillColor | Controls the foreground color of the generated image. | String | `#9c92ac` |
 | fillOpacity | Controls the foreground opacity of the generated image. | String | `0.4` |
 | backgroundColor | Controls the background color of the generated image. | String | `#dfdbe5` |