Replace SVG

src/components/Deselect.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
-    <path d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"/>
-  </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+        <path d="M1.3 1.3l7.4 7.4M8.7 1.3L1.3 8.7"/>
+    </svg>
 </template>

src/components/OpenIndicator.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="10">
-    <path d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z"/>
-  </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="9" viewBox="0 0 14 9" fill="none">
+        <path d="M1.5 1.5L7 7l5.5-5.5"/>
+    </svg>
 </template>

src/scss/global/_variables.scss

@@ -1,6 +1,6 @@
 $vs-colors: (
-        lightest: rgba(60, 60, 60, 0.26),
-        light: rgba(60, 60, 60, 0.5),
+        lightest: rgba(60, 60, 60, .26),
+        light: rgba(60, 60, 60, .5),
         dark: #333,
         darkest: rgba(0, 0, 0, .15),
 ) !default;
@@ -28,6 +28,9 @@ $vs-border-color: map_get($vs-colors, 'lightest') !default;
 //  Component Controls: Clear, Open Indicator
 $vs-controls-color: map_get($vs-colors, 'light') !default;
 $vs-controls-size: 1 !default;
+$vs-controls-width: 2.625 !default;
+$vs-controls-linecap: round !default;
+$vs-controls-miterlimit: 10 !default;
 $vs-controls-deselect-text-shadow: 0 1px 0 #fff;
 
 //  Selected

src/scss/modules/_clear.scss

@@ -1,7 +1,15 @@
 /* Clear Button */
 
+$clear-color: $vs-controls-color;
+$clear-width: $vs-controls-width;
+$clear-linecap: $vs-controls-linecap;
+$clear-miterlimit: $vs-controls-miterlimit;
+
 .vs__clear {
-  fill: $vs-controls-color;
+  stroke: $clear-color;
+  stroke-width: $clear-width;
+  stroke-linecap: $clear-linecap;
+  stroke-miterlimit: $clear-miterlimit;
   padding: 0;
   border: 0;
   background-color: transparent;

src/scss/modules/_open-indicator.scss

@@ -8,9 +8,15 @@ $transition-duration: 150ms;
 
 $open-indicator-color: $vs-controls-color;
 $open-indicator-size: $vs-controls-size;
+$open-indicator-width: $vs-controls-width;
+$open-indicator-linecap: $vs-controls-linecap;
+$open-indicator-miterlimit: $vs-controls-miterlimit;
 
 .vs__open-indicator {
-  fill: $open-indicator-color;
+  stroke: $open-indicator-color;
+  stroke-width: $open-indicator-width;
+  stroke-linecap: $open-indicator-linecap;
+  stroke-miterlimit: $open-indicator-miterlimit;
   transform: scale($open-indicator-size);
   transition: transform $transition-duration $transition-timing-function;
   transition-timing-function: $transition-timing-function;
@@ -19,7 +25,7 @@ $open-indicator-size: $vs-controls-size;
 //  Open State
 
 .vs--open .vs__open-indicator {
-  transform: rotate(180deg) scale($open-indicator-size);
+  transform: rotate(180deg) scale($open-indicator-size) translateY(1px);
 }
 
 //  Loading State

src/scss/modules/_selected.scss

@@ -20,7 +20,10 @@
   border: 0;
   cursor: pointer;
   background: none;
-  fill: $vs-controls-color;
+  stroke: $vs-controls-color;
+  stroke-width: $vs-controls-width;
+  stroke-linecap: $vs-controls-linecap;
+  stroke-miterlimit: $vs-controls-miterlimit;
   text-shadow: $vs-controls-deselect-text-shadow;
 }