docs: update docs :D

NamesMT · NamesMT · commit 53b92aa5764c · 2024-04-05T04:08:58.000Z
diff --git a/README.md b/README.md
@@ -27,7 +27,7 @@
 </details>
 
 ## NOTE!!
-`vue-modern-cropper` uses `cropperjs@next` (v2), which is not yet stable release and is missing a lot of documentations, if you use the package in the current time, prepare to dive into `cropperjs@next` source code / type defs to figure out the APIs.
+`vue-modern-cropper` uses `cropperjs@next` (v2), which is not yet stable release, you can check it's documentation [HERE](https://fengyuanchen.github.io/cropperjs/v2/api/)
 
 Feel free to submit PRs to add helper functions.
 
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Vue Modern Cropper</title>
 </head>
diff --git a/public/favicon.svg b/public/favicon.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+  <g fill="none" stroke="#327959" stroke-linecap="round" stroke-linejoin="round" stroke-width="3">
+    <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
+    <path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2"></path>
+    <path d="M14 17a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-6 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m1 0l6-6m0 6l-6-6"></path>
+  </g>
+</svg>
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.vue b/src/App.vue
@@ -57,7 +57,7 @@ onMounted(() => {
       <nav class="h-20 py-4 flex-between text-primary">
         <div class="font-semibold text-xl flex-center gap-2">
           <Logo class="h-6 w-6" />
-          Vue Modern Cropper
+          <span class="text-#327959">Vue</span>Modern Cropper
         </div>
         <div class="flex-center gap-4">
           <button class="!bg-transparent opacity-50 hover:opacity-100 transition" @click="(e) => toggleDarkmode()">
@@ -106,7 +106,8 @@ onMounted(() => {
         <Highlight :autodetect="false" language="javascript" :code="demoCode0" />
       </main>
 
-      <div class="my-2">
+      <div class="my-2 text-primary">
+        Check out cropperjs@next document: <a href="https://fengyuanchen.github.io/cropperjs/v2/api/" class="text-#3399ff">https://fengyuanchen.github.io/cropperjs/v2/api/</a>
         <ModernCropper :src="srcImg" class="h-40"/>
       </div>
 
diff --git a/src/components/Logo.vue b/src/components/Logo.vue
@@ -1,9 +1,10 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
-	<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-		<path d="M14 3v4a1 1 0 0 0 1 1h4" />
-		<path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2" />
-		<path d="M14 17a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-6 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m1 0l6-6m0 6l-6-6" />
-	</g>
+  <g fill="none" stroke="#327959" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+    <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
+    <path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2"></path>
+    <path d="M14 17a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-6 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m1 0l6-6m0 6l-6-6"></path>
+  </g>
 </svg>
+
 </template>
