From 715e432c6dfb4a1b9aefe5c2ed2758dbe8f60870 Mon Sep 17 00:00:00 2001
From: ryantanrk <ryantanrk@gmail.com>
Date: Tue, 1 Mar 2022 23:38:48 +0800
Subject: [PATCH] fix: select icon

---
 components/icon/src/Icon.svelte     |   2 +-
 components/select/src/Select.svelte |  11 +
 stories/Icon.stories.svelte         | 332 ++++++++++++++++++++++++++--
 stories/Introduction.stories.mdx    |   6 +-
 4 files changed, 328 insertions(+), 23 deletions(-)

diff --git a/components/icon/src/Icon.svelte b/components/icon/src/Icon.svelte
index ffb705d7..f772ed2c 100644
--- a/components/icon/src/Icon.svelte
+++ b/components/icon/src/Icon.svelte
@@ -15,7 +15,7 @@
 >
   <slot>
     <svg {...$$restProps}>
-      <use xlink:href={useHref} />
+      <use href={useHref} />
     </svg>
   </slot>
 </i>
diff --git a/components/select/src/Select.svelte b/components/select/src/Select.svelte
index 5d3d9531..dba4bf32 100644
--- a/components/select/src/Select.svelte
+++ b/components/select/src/Select.svelte
@@ -57,6 +57,9 @@
     outline: none;
     box-sizing: border-box;
     appearance: none;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon' viewBox='0 0 24 24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M6 9l6 6 6-6' /%3E%3C/svg%3E")
+      no-repeat;
+    background-position: 98% 50%;
 
     @media (min-width: $sm) {
       width: auto;
@@ -75,4 +78,12 @@
       display: none;
     }
   }
+
+  .icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 24px;
+    height: 24px;
+  }
 </style>
diff --git a/stories/Icon.stories.svelte b/stories/Icon.stories.svelte
index a48786a2..c3d506b4 100644
--- a/stories/Icon.stories.svelte
+++ b/stories/Icon.stories.svelte
@@ -17,27 +17,317 @@
 
 <Template let:args>
   {@html `
-  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-    <symbol id="ticket" viewBox="0 0 44 44">
-      <g fill="none" fill-rule="evenodd">
-        <g fill="#FC4451">
-          <path
-            d="m33.254 20.874-6.065 6.065a1 1 0 0 1-1.414-1.414l5.657-5.657-1.395-1.395a3.43 3.43 0 0 1-4.066-.581 3.436 3.436 0 0 1-.585-4.07l-1.441-1.441-7.93 7.93a1 1 0 0 1-1.414-1.415l8.338-8.338a1.425 1.425 0 0 1 2.011 0l2.46 2.46a1 1 0 0 1 0 1.414c-.582.582-.582 1.488-.025 2.046a1.43 1.43 0 0 0 2.022 0c.39-.39 1.048-.415 1.439-.025l2.408 2.409a1.424 1.424 0 0 1 0 2.012"
-          />
-          <path
-            d="M30.845 17.867c-1.361 1.362-3.537 1.362-4.874.025a3.433 3.433 0 0 1 0-4.85 1.015 1.015 0 0 1 1.427-.012.986.986 0 0 1 .012 1.402l-.024.024a1.43 1.43 0 0 0 0 2.022 1.43 1.43 0 0 0 2.02 0 1.015 1.015 0 0 1 1.427-.013.986.986 0 0 1 .012 1.402M27.189 26.939l-6.065 6.065a1.424 1.424 0 0 1-2.012 0l-2.409-2.409a1 1 0 0 1 0-1.414c.582-.582.582-1.488.025-2.046a1.43 1.43 0 0 0-2.022 0c-.39.39-1.048.415-1.438.025l-2.46-2.46a1.424 1.424 0 0 1 0-2.012l1.67-1.669a1 1 0 0 1 1.414 1.414l-1.261 1.261 1.446 1.447a3.43 3.43 0 0 1 4.065.58 3.435 3.435 0 0 1 .585 4.07l1.391 1.39 5.657-5.656a1 1 0 0 1 1.414 1.414"
-          />
-          <path
-            d="M18.142 30.57c-.39.391-1.036.404-1.427.013a.986.986 0 0 1-.012-1.402c.582-.582.582-1.488.025-2.045a1.43 1.43 0 0 0-2.021 0c-.39.39-1.036.402-1.427.012a.986.986 0 0 1-.012-1.402l.024-.025a3.433 3.433 0 0 1 4.85 0 3.433 3.433 0 0 1 0 4.85M23.31 19.818l-3.242 3.243a1 1 0 0 1-1.414-1.415l3.242-3.242a1 1 0 0 1 1.415 1.414"
-          />
-          <path
-            d="m23.31 19.818-3.242 3.243a1 1 0 0 1-1.414-1.415l3.242-3.242a1 1 0 0 1 1.415 1.414M25.409 21.916l-3.243 3.243a1 1 0 0 1-1.414-1.414l3.243-3.243a1 1 0 0 1 1.414 1.414"
-          />
-        </g>
-      </g>
-    </symbol>
-  </svg>
-  `}
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol id="profile" viewBox="0 -6 32 44">
+    <g fill="none" fill-rule="evenodd">
+      <path
+        d="M16 8.105a4.03 4.03 0 0 1 4.026 4.026A4.03 4.03 0 0 1 16 16.157a4.03 4.03 0 0 1-4.025-4.026A4.03 4.03 0 0 1 16 8.105m4.117 8.557a6.11 6.11 0 0 0 2.014-4.53C22.131 8.75 19.381 6 16 6c-3.38 0-6.13 2.75-6.13 6.131 0 1.796.78 3.408 2.014 4.53C8.463 17.865 6 21.12 6 24.947a1.053 1.053 0 0 0 2.105 0 6.693 6.693 0 0 1 6.686-6.685h2.419a6.692 6.692 0 0 1 6.685 6.685 1.053 1.053 0 0 0 2.105 0c0-3.826-2.463-7.082-5.883-8.285"
+        fill="#FC4451"
+      />
+    </g>
+  </symbol>
+
+  <symbol id="search" viewBox="0 0 44 44">
+    <g fill="none" fill-rule="evenodd">
+      <g fill="#FC4451" fill-rule="nonzero">
+        <path
+          d="M19.576 10.75a8.806 8.806 0 0 0-6.624 2.993 8.826 8.826 0 1 0 6.624-2.993zm0 2.5a6.325 6.325 0 1 1 0 12.651 6.326 6.326 0 1 1 0-12.65z"
+        />
+        <path
+          d="M25.605 25.625a1.25 1.25 0 0 1 1.666-.092l.101.092 5.492 5.491a1.25 1.25 0 0 1-1.666 1.86l-.102-.092-5.491-5.492a1.25 1.25 0 0 1 0-1.767z"
+        />
+      </g>
+    </g>
+  </symbol>
+
+  <symbol id="ticket" viewBox="0 0 44 44">
+    <g fill="none" fill-rule="evenodd">
+      <g fill="#FC4451">
+        <path
+          d="m33.254 20.874-6.065 6.065a1 1 0 0 1-1.414-1.414l5.657-5.657-1.395-1.395a3.43 3.43 0 0 1-4.066-.581 3.436 3.436 0 0 1-.585-4.07l-1.441-1.441-7.93 7.93a1 1 0 0 1-1.414-1.415l8.338-8.338a1.425 1.425 0 0 1 2.011 0l2.46 2.46a1 1 0 0 1 0 1.414c-.582.582-.582 1.488-.025 2.046a1.43 1.43 0 0 0 2.022 0c.39-.39 1.048-.415 1.439-.025l2.408 2.409a1.424 1.424 0 0 1 0 2.012"
+        />
+        <path
+          d="M30.845 17.867c-1.361 1.362-3.537 1.362-4.874.025a3.433 3.433 0 0 1 0-4.85 1.015 1.015 0 0 1 1.427-.012.986.986 0 0 1 .012 1.402l-.024.024a1.43 1.43 0 0 0 0 2.022 1.43 1.43 0 0 0 2.02 0 1.015 1.015 0 0 1 1.427-.013.986.986 0 0 1 .012 1.402M27.189 26.939l-6.065 6.065a1.424 1.424 0 0 1-2.012 0l-2.409-2.409a1 1 0 0 1 0-1.414c.582-.582.582-1.488.025-2.046a1.43 1.43 0 0 0-2.022 0c-.39.39-1.048.415-1.438.025l-2.46-2.46a1.424 1.424 0 0 1 0-2.012l1.67-1.669a1 1 0 0 1 1.414 1.414l-1.261 1.261 1.446 1.447a3.43 3.43 0 0 1 4.065.58 3.435 3.435 0 0 1 .585 4.07l1.391 1.39 5.657-5.656a1 1 0 0 1 1.414 1.414"
+        />
+        <path
+          d="M18.142 30.57c-.39.391-1.036.404-1.427.013a.986.986 0 0 1-.012-1.402c.582-.582.582-1.488.025-2.045a1.43 1.43 0 0 0-2.021 0c-.39.39-1.036.402-1.427.012a.986.986 0 0 1-.012-1.402l.024-.025a3.433 3.433 0 0 1 4.85 0 3.433 3.433 0 0 1 0 4.85M23.31 19.818l-3.242 3.243a1 1 0 0 1-1.414-1.415l3.242-3.242a1 1 0 0 1 1.415 1.414"
+        />
+        <path
+          d="m23.31 19.818-3.242 3.243a1 1 0 0 1-1.414-1.415l3.242-3.242a1 1 0 0 1 1.415 1.414M25.409 21.916l-3.243 3.243a1 1 0 0 1-1.414-1.414l3.243-3.243a1 1 0 0 1 1.414 1.414"
+        />
+      </g>
+    </g>
+  </symbol>
+
+  <symbol id="logout" viewBox="0 0 44 44">
+    <g fill="none" fill-rule="evenodd">
+      <g fill="#FC4451">
+        <path
+          d="M29.51 31.39H22.07c-.55 0-.996-.47-.996-1.049s.446-1.047.996-1.047h7.442a.513.513 0 0 0 .498-.524V14.62a.512.512 0 0 0-.498-.524h-7.442c-.55 0-.996-.47-.996-1.048 0-.578.446-1.048.996-1.048h7.442C30.883 12 32 13.176 32 14.62v14.15c0 1.444-1.117 2.62-2.49 2.62"
+        />
+        <path
+          d="M18.035 28.713a.964.964 0 0 1-.703-.307 1.085 1.085 0 0 1 0-1.482l4.967-5.229-4.967-5.23a1.085 1.085 0 0 1 0-1.481.96.96 0 0 1 1.407 0l5.672 5.97c.39.41.39 1.073 0 1.482l-5.672 5.97a.965.965 0 0 1-.704.307"
+        />
+        <path
+          d="M23.467 22.743H12.996c-.55 0-.996-.47-.996-1.048 0-.58.446-1.048.996-1.048h10.47c.55 0 .997.469.997 1.048 0 .578-.446 1.048-.996 1.048"
+        />
+        <path
+          d="M29.51 31.39H22.07c-.55 0-.996-.47-.996-1.049s.446-1.047.996-1.047h7.442a.513.513 0 0 0 .498-.524V14.62a.512.512 0 0 0-.498-.524h-7.442c-.55 0-.996-.47-.996-1.048 0-.578.446-1.048.996-1.048h7.442C30.883 12 32 13.176 32 14.62v14.15c0 1.444-1.117 2.62-2.49 2.62"
+        />
+        <path
+          d="M18.035 28.713a.964.964 0 0 1-.703-.307 1.085 1.085 0 0 1 0-1.482l4.967-5.229-4.967-5.23a1.085 1.085 0 0 1 0-1.481.96.96 0 0 1 1.407 0l5.672 5.97c.39.41.39 1.073 0 1.482l-5.672 5.97a.965.965 0 0 1-.704.307"
+        />
+        <path
+          d="M23.467 22.743H12.996c-.55 0-.996-.47-.996-1.048 0-.58.446-1.048.996-1.048h10.47c.55 0 .997.469.997 1.048 0 .578-.446 1.048-.996 1.048"
+        />
+      </g>
+    </g>
+  </symbol>
+
+  <symbol id="cart" viewBox="0 0 44 44">
+    <g fill="none" fill-rule="evenodd">
+      <g fill="#FC4451">
+        <path
+          d="M29.24 25.675H18.981a2.211 2.211 0 0 1-2.2-2.015l-3.106-10.402h-2.546a1.129 1.129 0 1 1 0-2.258h3.386c.499 0 .939.328 1.082.806l3.387 11.338c.03.105.047.214.047.323l10.21-.05c0-.104-.036-.158-.008-.258l1.85-6.515h-8.666a1.129 1.129 0 1 1 0-2.257h10.16a1.13 1.13 0 0 1 1.086 1.437l-2.222 7.827a2.21 2.21 0 0 1-2.2 2.024M15.644 30.19a2.258 2.258 0 1 1 4.516 0 2.258 2.258 0 0 1-4.516 0M28.062 30.19a2.258 2.258 0 1 1 4.515 0 2.258 2.258 0 0 1-4.515 0"
+        />
+      </g>
+    </g>
+  </symbol>
+
+  <symbol id="unfavour" viewBox="0 0 32 32">
+    <g fill="none" fill-rule="evenodd">
+      <path
+        fill="#FC4451"
+        d="M10.36 8.34c-.254 0-.499.022-.731.063-1.342.236-2.895 1.2-3.229 3.196-.692 4.13 4.056 9.064 9.248 12.285 4.942-3.058 10.126-7.951 9.255-12.245-.345-1.697-1.674-2.969-3.389-3.24-1.928-.303-3.74.688-4.85 2.656-.207.366-.595.593-1.016.593-.421 0-.809-.227-1.017-.593-1.135-2.012-2.838-2.715-4.27-2.715m5.287 18.074c-.206 0-.411-.054-.594-.163-5.656-3.345-11.918-9.29-10.955-15.037.44-2.634 2.453-4.639 5.127-5.11 2.42-.426 4.763.466 6.422 2.363 1.62-1.85 3.889-2.742 6.23-2.372 2.687.425 4.771 2.418 5.311 5.08 1.149 5.66-4.901 11.5-10.947 15.076-.183.109-.389.163-.594.163"
+        transform="translate(-600.000000, -642.000000) translate(600.000000, 642.000000)"
+      />
+    </g>
+  </symbol>
+
+  <symbol id="favour" viewBox="0 0 32 32">
+    <g fill="none" fill-rule="evenodd">
+      <path
+        fill="#FC4451"
+        d="M15.648 26.414c-.206 0-.411-.054-.594-.163-5.656-3.345-11.918-9.29-10.955-15.037.44-2.634 2.453-4.639 5.127-5.11 2.42-.426 4.763.466 6.422 2.363 1.62-1.85 3.889-2.742 6.23-2.372 2.687.425 4.771 2.418 5.311 5.08 1.149 5.66-4.901 11.5-10.947 15.076-.183.109-.389.163-.594.163"
+        transform="translate(-600.000000, -642.000000) translate(600.000000, 642.000000)"
+      />
+    </g>
+  </symbol>
+
+  <symbol
+    id="star"
+    viewBox="0 0 24 24"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <polygon
+      points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+    />
+  </symbol>
+
+  <symbol id="email" viewBox="0 0 44 44">
+    <g fill="none" fill-rule="evenodd">
+      <path
+        d="M13.6 28.777c-.662 0-1.2-.538-1.2-1.2V15.855l8.842 7.21a1.195 1.195 0 0 0 1.515.003l8.843-7.181v11.69c0 .662-.538 1.2-1.2 1.2H13.6zM29.15 14.4h.473l-7.621 6.189-7.59-6.189H29.15zM31 12H13c-1.654 0-3 1.346-3 3v12.577c0 1.986 1.615 3.6 3.6 3.6h16.8c1.985 0 3.6-1.614 3.6-3.6V15c0-1.654-1.346-3-3-3z"
+        fill="#FC4451"
+      />
+    </g>
+  </symbol>
+
+  <symbol id="edit" viewBox="0 0 44 44">
+    <g fill="none" fill-rule="evenodd">
+      <g fill="#FC4451">
+        <path
+          d="m15.265 25.912-.906 3.729 3.73-.906 11.327-11.327a2 2 0 0 0 0-2.823c-.754-.754-2.069-.755-2.823 0L15.265 25.912zM13 32a.998.998 0 0 1-.972-1.236l1.36-5.597c.044-.178.135-.34.265-.47L25.179 13.17A3.968 3.968 0 0 1 28.004 12c1.068 0 2.071.416 2.826 1.17a4 4 0 0 1 0 5.652L19.304 30.348c-.13.13-.293.22-.471.264l-5.597 1.36A.994.994 0 0 1 13 32z"
+        />
+        <path
+          d="M27.983 19.919a.996.996 0 0 1-.707-.293l-2.308-2.308a.999.999 0 1 1 1.414-1.414l2.308 2.308a1 1 0 0 1-.707 1.707M15.127 31.483a.997.997 0 0 1-.709-.294l-1.608-1.616a1 1 0 0 1 1.418-1.41l1.608 1.615a1 1 0 0 1-.709 1.705M31 32H20.481a1 1 0 0 1 0-2H31a1 1 0 0 1 0 2"
+        />
+      </g>
+    </g>
+  </symbol>
+
+  <symbol id="gender" viewBox="0 0 44 44">
+    <g fill="none" fill-rule="evenodd">
+      <path
+        d="M11.406 16.375a4.974 4.974 0 0 1 4.969-4.969c2.714 0 4.922 2.23 4.922 4.969a4.927 4.927 0 0 1-4.922 4.922c-2.74 0-4.969-2.208-4.969-4.922m11.297 0c0-3.515-2.839-6.375-6.328-6.375C12.876 10 10 12.877 10 16.375c0 3.253 2.486 5.94 5.672 6.29v4.257h-2.11a.703.703 0 0 0 0 1.406h2.11v2.11a.703.703 0 0 0 1.406 0v-2.11h2.11a.703.703 0 0 0 0-1.406h-2.11v-4.258a6.337 6.337 0 0 0 5.625-6.289M27.625 32.594c-2.714 0-4.922-2.23-4.922-4.969a4.927 4.927 0 0 1 4.922-4.922c2.74 0 4.969 2.208 4.969 4.922a4.974 4.974 0 0 1-4.969 4.969m.703-11.258V15.26l1.612 1.612a.703.703 0 1 0 .995-.994l-2.813-2.813a.703.703 0 0 0-.994 0l-2.813 2.813a.703.703 0 1 0 .995.994l1.612-1.612v6.076a6.337 6.337 0 0 0-5.625 6.289c0 3.515 2.839 6.375 6.328 6.375C31.124 34 34 31.123 34 27.625c0-3.253-2.486-5.94-5.672-6.29"
+        stroke="#FC4451"
+        stroke-width=".5"
+        fill="#FC4451"
+      />
+    </g>
+  </symbol>
+
+  <symbol id="phone" viewBox="0 0 44 44">
+    <g fill="none" fill-rule="evenodd">
+      <mask id="b" fill="#fff">
+        <use xlink:href="#a" />
+      </mask>
+      <path
+        d="M15.628 12.4c-.32 0-.642.122-.887.366-3.116 3.118-3.116 8.19 0 11.306l5.19 5.191c3.116 3.117 8.186 3.117 11.303 0a1.25 1.25 0 0 0 .367-.887c0-.335-.13-.65-.367-.887l-1.667-1.669c-.475-.474-1.301-.473-1.775 0l-.901.903a4.272 4.272 0 0 1-6.037 0l-3.574-3.574a4.274 4.274 0 0 1 0-6.037l.903-.903a1.257 1.257 0 0 0 0-1.775l-1.667-1.668a1.254 1.254 0 0 0-.888-.366M25.582 34a10.36 10.36 0 0 1-7.348-3.04l-5.19-5.19A10.326 10.326 0 0 1 10 18.42c0-2.777 1.08-5.387 3.043-7.35a3.658 3.658 0 0 1 5.17 0l1.667 1.667c.69.69 1.07 1.608 1.07 2.584 0 .977-.38 1.895-1.07 2.585l-.903.903a1.87 1.87 0 0 0 0 2.643l3.574 3.574c.73.727 1.914.728 2.642 0l.903-.903a3.658 3.658 0 0 1 5.168 0l1.667 1.668a3.66 3.66 0 0 1 0 5.17A10.36 10.36 0 0 1 25.582 34"
+        fill="#FC4451"
+        mask="url(#b)"
+      />
+    </g>
+  </symbol>
+
+  <symbol id="dob" viewBox="0 0 44 44">
+    <g fill="none" fill-rule="evenodd">
+      <path
+        d="M29.455 26.91a2.082 2.082 0 0 1-1.473-.623l-2.324-2.323-2.334 2.323c-.808.808-2.215.808-3.022 0l-2.324-2.323-2.334 2.323c-.382.393-.906.611-1.462.622v-3.818c0-.6.49-1.091 1.09-1.091h13.092c.6 0 1.09.49 1.09 1.09v3.82zm0 4.908H14.182v-3.273a3.757 3.757 0 0 0 2.618-1.101l1.19-1.168 1.166 1.168c1.43 1.429 3.917 1.418 5.335 0l1.178-1.168 1.167 1.168a3.757 3.757 0 0 0 2.619 1.101v3.273zm-1.091-12h-5.455v-2.182h-2.182v2.182h-5.454A3.268 3.268 0 0 0 12 23.091v9.818c0 .6.49 1.091 1.09 1.091h17.455c.6 0 1.091-.49 1.091-1.09v-9.82a3.268 3.268 0 0 0-3.272-3.272zm-6.546-3.273c1.211 0 2.182-.981 2.182-2.181 0-.415-.11-.797-.316-1.124L21.818 10l-1.865 3.24c-.208.327-.317.71-.317 1.124 0 1.2.982 2.181 2.182 2.181z"
+        fill="#FC4451"
+      />
+    </g>
+  </symbol>
+
+  <symbol id="location" viewBox="0 0 44 44">
+    <g fill="none" fill-rule="evenodd">
+      <g fill="#FC4451">
+        <path
+          d="M21.94 12.4a3.139 3.139 0 0 0-3.135 3.135 3.139 3.139 0 0 0 3.135 3.135 3.139 3.139 0 0 0 3.135-3.135A3.139 3.139 0 0 0 21.94 12.4m0 8.67a5.541 5.541 0 0 1-5.535-5.535A5.541 5.541 0 0 1 21.94 10a5.541 5.541 0 0 1 5.535 5.535 5.541 5.541 0 0 1-5.535 5.535"
+        />
+        <path
+          d="M21.94 29.13a1.2 1.2 0 0 1-1.2-1.2v-7.795a1.2 1.2 0 0 1 2.4 0v7.796a1.2 1.2 0 0 1-1.2 1.2"
+        />
+        <path
+          d="M21.94 34C16.366 34 12 31.428 12 28.146c0-1.4.806-2.74 2.27-3.775a1.2 1.2 0 1 1 1.385 1.96c-.468.332-1.255 1.008-1.255 1.815 0 1.63 3.225 3.454 7.54 3.454 4.315 0 7.54-1.824 7.54-3.454 0-.799-.753-1.462-1.203-1.786a1.2 1.2 0 1 1 1.34-1.988c.003 0 .036.02.066.042 1.417 1.023 2.197 2.348 2.197 3.732 0 3.282-4.366 5.854-9.94 5.854"
+        />
+      </g>
+    </g>
+  </symbol>
+
+  <symbol
+    id="filter"
+    viewBox="0 0 24 24"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <line x1="4" y1="21" x2="4" y2="14" />
+    <line x1="4" y1="10" x2="4" y2="3" />
+    <line x1="12" y1="21" x2="12" y2="12" />
+    <line x1="12" y1="8" x2="12" y2="3" />
+    <line x1="20" y1="21" x2="20" y2="16" />
+    <line x1="20" y1="12" x2="20" y2="3" />
+    <line x1="1" y1="14" x2="7" y2="14" />
+    <line x1="9" y1="8" x2="15" y2="8" />
+    <line x1="17" y1="16" x2="23" y2="16" />
+  </symbol>
+
+  <symbol id="filter2" viewBox="0 0 44 44">
+    <g fill="none" fill-rule="evenodd">
+      <path
+        fill="#FC4451"
+        d="M19.407 32c-.198 0-.393-.058-.562-.172-.274-.186-.438-.497-.438-.828v-7.974c0-.273-.115-.538-.314-.727l-4.154-3.925c-.597-.565-.939-1.36-.939-2.181V13c0-.552.447-1 1-1 .552 0 1 .448 1 1v3.193c0 .274.114.538.313.727l4.155 3.926c.596.565.939 1.36.939 2.18v6.5l2.747-1.095V23.03c0-.825.345-1.622.946-2.187l4.178-3.924c.2-.189.316-.454.316-.73V14h-11.41c-.553 0-1-.448-1-1s.447-1 1-1h12.41c.552 0 1 .448 1 1v3.19c0 .824-.345 1.621-.947 2.186l-4.178 3.925c-.2.189-.315.454-.315.729v6.08c0 .41-.25.777-.63.929l-4.748 1.89c-.119.048-.244.071-.37.071"
+        transform="translate(-150.000000, -247.000000) translate(150.000000, 247.000000)"
+      />
+    </g>
+  </symbol>
+
+  <symbol id="purchase-success" viewBox="0 0 81 81">
+    <g fill="none" fill-rule="evenodd">
+      <g
+        transform="translate(-147.000000, -182.000000) translate(147.000000, 182.000000) translate(5.451923, 10.903846)"
+      >
+        <path
+          fill="#FC4451"
+          fill-rule="nonzero"
+          d="M24.274.438C11.11.438.438 11.11.438 24.274c0 13.164 10.672 23.836 23.836 23.836 13.164 0 23.836-10.672 23.836-23.836C48.11 11.11 37.438.438 24.274.438zm0 3.797c11.067 0 20.04 8.972 20.04 20.039 0 11.067-8.973 20.04-20.04 20.04-11.067 0-20.039-8.973-20.039-20.04 0-11.067 8.972-20.039 20.039-20.039z"
+        />
+        <path
+          fill="#FC4451"
+          d="M26.2 22.975h-2.71c-1.196 0-2.17-.973-2.17-2.169 0-1.196.974-2.168 2.17-2.168h5.422c1.048 0 1.898-.85 1.898-1.899 0-1.048-.85-1.898-1.898-1.898h-2.169v-2.169c0-1.048-.85-1.898-1.898-1.898-1.049 0-1.899.85-1.899 1.898v2.195c-3.035.275-5.422 2.833-5.422 5.94 0 3.289 2.676 5.965 5.965 5.965h2.712c1.195 0 2.168.972 2.168 2.168 0 1.196-.972 2.168-2.168 2.168h-5.423c-1.048 0-1.898.85-1.898 1.899 0 1.048.85 1.898 1.898 1.898h2.168v2.169c0 1.048.85 1.898 1.899 1.898 1.048 0 1.898-.85 1.898-1.898v-2.195c3.036-.275 5.423-2.833 5.423-5.94 0-3.288-2.676-5.964-5.965-5.964"
+        />
+        <circle cx="47.055" cy="43.68" r="12.656" fill="#FFF" />
+        <path
+          fill="#FC4451"
+          d="M47.504 46.212c-.433 0-.866-.163-1.197-.488l-6.35-6.236c-.66-.649-.66-1.702 0-2.352.66-.649 1.733-.649 2.394 0l5.153 5.061L65.26 24.761c.66-.65 1.733-.65 2.393 0 .661.65.661 1.703 0 2.352L48.701 45.724c-.331.325-.763.488-1.197.488"
+        />
+        <path
+          fill="#FC4451"
+          d="M46.212 31.036c-5.577 0-10.113 4.536-10.113 10.112 0 5.576 4.536 10.114 10.113 10.114 5.576 0 10.112-4.538 10.112-10.114 0-5.576-4.536-10.112-10.112-10.112m0 23.613c-7.445 0-13.5-6.056-13.5-13.5s6.055-13.5 13.5-13.5c7.444 0 13.5 6.056 13.5 13.5s-6.056 13.5-13.5 13.5"
+        />
+      </g>
+    </g>
+  </symbol>
+
+  <symbol
+    id="arrow-down"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M6 9l6 6 6-6" />
+  </symbol>
+
+  <symbol id="report-success" viewBox="0 0 95 113">
+    <defs>
+      <filter
+        id="a"
+        width="204.7%"
+        height="1199.1%"
+        x="-52.4%"
+        y="-549.6%"
+        filterUnits="objectBoundingBox"
+      >
+        <feGaussianBlur in="SourceGraphic" stdDeviation="8.898" />
+      </filter>
+      <filter
+        id="b"
+        width="151.2%"
+        height="229.7%"
+        x="-25.6%"
+        y="-32.4%"
+        filterUnits="objectBoundingBox"
+      >
+        <feOffset dy="16" in="SourceAlpha" result="shadowOffsetOuter1" />
+        <feColorMatrix
+          in="shadowOffsetOuter1"
+          values="0 0 0 0 0.105882353 0 0 0 0 0.207843137 0 0 0 0 0.329411765 0 0 0 0.272192029 0"
+        />
+      </filter>
+      <path
+        id="c"
+        d="M0 19.11C7.376 14.061 11.243 7.774 11.6.245c1.937-.29 5.678.072 15.065 1.707.874.153.951 1.542.232 4.17 3.164 1.163 4.614 2.27 4.35 3.323-2.294 9.128-5.328 13.29-9.908 15.245-5.254.668-12.366-1.192-21.339-5.582z"
+      />
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+      <path
+        fill="#1B3554"
+        d="M7.81 41.286h50.969v4.857H7.81z"
+        filter="url(#a)"
+        transform="translate(15 42)"
+      />
+      <path fill="#E0E5EC" d="M23.221 42H74.19v31.976H23.221z" />
+      <path fill="#CFD4DC" d="M23.221 42v48.571H15v-29.37zM74.19 42v48.167H82V61.201z" />
+      <path fill="#EDF1F6" d="M15 61.024h67V91a2 2 0 01-2 2H17a2 2 0 01-2-2V61.024z" />
+      <g>
+        <path
+          fill="#FC4451"
+          d="M37.496 30.765c1.93 6.23-1.666 13.382-6.636 18.819 5.082 1.891
+          14.155 4.247 21.39 5.432.344.056 1.362-.216 1.69-.205 1.995.065
+          2.896-1.504 3.577-2.033 2.605-3.642 5.284-6.385
+          6.182-11.105.46-2.42.627-4.45.528-5.297-2.796-1.952-8.697-1.054-26.73-5.61z"
+        />
+        <path
+          fill="#D12934"
+          d="M54.6 50.668c1.144 1.387-.39 4.607-2.891 4.285 2.66.315 4.2-.504 5.336-1.368 1.137-.865 6.47-4.872 7.163-17.192-1.01 10.37-4.085 15.16-9.608 14.274z"
+        />
+      </g>
+      <g transform="rotate(18 21.05 117.614)">
+        <path
+          fill="#D1A939"
+          d="M26.891 2.057a27.402 27.402 0 012.579 2.892c1.48 1.943 1.921 4.63 1.818 4.698-.56.37-3.77-1.766-4.397-3.5-.376-1.04-.376-2.403 0-4.09z"
+        />
+        <use fill="#000" filter="url(#b)" xlink:href="#c" />
+        <use fill="#EFC653" xlink:href="#c" />
+      </g>
+    </g>
+  </symbol>
+</svg>
+`}
 
   <Icon {...args} />
 </Template>
diff --git a/stories/Introduction.stories.mdx b/stories/Introduction.stories.mdx
index e6c377a4..9c301bce 100644
--- a/stories/Introduction.stories.mdx
+++ b/stories/Introduction.stories.mdx
@@ -1,3 +1,7 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Example/Introduction" />
\ No newline at end of file
+<Meta title="Example/Introduction" />
+
+# responsive-ui
+
+WeTix responsive-ui component set
\ No newline at end of file