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://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>