diff --git a/packages/ui/src/lib/tooltip/Tooltip.stories.svelte b/packages/ui/src/lib/tooltip/Tooltip.stories.svelte index a09559bd..e9cf8d46 100644 --- 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 index 276a6b58..da8b8f4d 100644 --- 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>