use icons form the icon library we're switching to

Greater-London-Authority · Nov 13, 2023 · a565fa6 · a565fa6
1 parent e69182a
commit a565fa6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/packages/ui/src/lib/tooltip/Tooltip.stories.svelte b/packages/ui/src/lib/tooltip/Tooltip.stories.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-	import { ExclamationIcon } from '@rgossiaux/svelte-heroicons/solid';
+	import { ExclamationCircle } from '@steeze-ui/heroicons';
+	import { Icon } from '@steeze-ui/svelte-icon';
+
 	import { Meta, Story } from '@storybook/addon-svelte-csf';
 	import Tooltip from '../tooltip/Tooltip.svelte';
 </script>
@@ -11,12 +13,19 @@
 </Story>
 
 <Story name="Custom hint label">
-	<Tooltip hintLabel="Hover over me!" >This is some text</Tooltip>
+	<Tooltip hintLabel="Hover over me!">This is some text</Tooltip>
 </Story>
 
 <Story name="Custom hint icon">
 	<Tooltip>
-		<svelte:fragment slot="hint">I have a diffent icon <ExclamationIcon  class="w-[18px] h-[18px] ml-0.5" aria-hidden="true" /></svelte:fragment>
+		<svelte:fragment slot="hint"
+			>I have a diffent icon <Icon
+				src={ExclamationCircle}
+				theme="solid"
+				class="w-[18px] h-[18px] ml-0.5"
+				aria-hidden="true"
+			/></svelte:fragment
+		>
 		But I still work the same
 	</Tooltip>
 </Story>
diff --git a/packages/ui/src/lib/tooltip/Tooltip.svelte b/packages/ui/src/lib/tooltip/Tooltip.svelte
@@ -4,7 +4,9 @@
 	import { writable, type Writable } from 'svelte/store';
 	import { floatingContent } from './tooltip';
 
-	import { InformationCircleIcon } from '@rgossiaux/svelte-heroicons/solid';
+	import { InformationCircle } from '@steeze-ui/heroicons';
+	import { Icon } from '@steeze-ui/svelte-icon';
+
 	import { floatingRef } from '../tooltip/tooltip.js';
 
 	export let hintLabel = 'what is this?';
@@ -50,7 +52,12 @@
 >
 	<slot name="hint">
 		{hintLabel}
-		<InformationCircleIcon class="w-[18px] h-[18px] ml-0.5" aria-hidden="true" />
+		<Icon
+			src={InformationCircle}
+			theme="solid"
+			class="w-[18px] h-[18px] ml-0.5"
+			aria-hidden="true"
+		/>
 	</slot>
 </span>