Chevron direction

src/lib/components/card/tabs.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
  import type { Tab, TabEvents } from '$lib/types';
-
  import { createEventDispatcher } from 'svelte';
  import { fade } from 'svelte/transition';
  export let isCloseable = true;
@@ -17,33 +16,10 @@
  };
 </script>
 
-<style>
- .isOpen {
- transform: rotate(-90deg);
- transition-duration: 0.5s;
- }
-</style>
-
 <div class="flex cursor-default">
  <span class="text-white mr-2 font-semibold" on:click|stopPropagation={() => (isOpen = !isOpen)}>
  {#if isCloseable}
- <svg
- class="inline"
- class:isOpen
- xmlns="http:https://www.w3.org/2000/svg"
- width="12"
- height="7"
- viewBox="0 0 12 7"
- ><defs
- ><style>
- .cls-1 {
- fill: #fff;
- fill-rule: evenodd;
- }
- </style></defs
- ><path
- class="cls-1"
- d="M10.38.45,6,4.83,1.56.39h0A.84.84,0,0,0,.38,1.57h0l5,5h0a.83.83,0,0,0,.6.26H6a.83.83,0,0,0,.6-.26h0l5-5h0A.84.84,0,1,0,10.38.45Z" /></svg>
+ <i class="fas fa-chevron-right icon" class:isOpen />
  {/if}
  {title}</span>
  {#if isOpen && tabs}
@@ -64,3 +40,12 @@
  </ul>
  {/if}
 </div>
+
+<style>
+ .icon {
+ transition-duration: 0.5s;
+ }
+ .isOpen {
+ transform: rotate(90deg);
+ }
+</style>