fix(Toggle): removed dependency on material icons

fix(Toggle): swapped out Icon docs(toggle): updated icon example docs: updated theme switch
N00nDay · Oct 19, 2022 · 47755f0 · 47755f0
1 parent 44bdde2
commit 47755f0
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 60 deletions.
diff --git a/src/lib/components/toggle/LeftIcon.svelte b/src/lib/components/toggle/LeftIcon.svelte
diff --git a/src/lib/components/toggle/RightIcon.svelte b/src/lib/components/toggle/RightIcon.svelte
diff --git a/src/lib/components/toggle/Toggle.svelte b/src/lib/components/toggle/Toggle.svelte
@@ -53,8 +53,16 @@
 				class:translate-x-0={!on}
 			/>
 			<input type="checkbox" class="hidden" {name} id={name} checked={on} />
-			<slot name="left-icon" />
-			<slot name="right-icon" />
+			{#if $$slots['left-icon']}
+				<span class="text-sm absolute left-0.5 flex items-center justify-center h-4 w-4">
+					<slot name="left-icon" />
+				</span>
+			{/if}
+			{#if $$slots['right-icon']}
+				<span class="text-sm absolute right-0.5 flex items-center justify-center h-4 w-4">
+					<slot name="right-icon" />
+				</span>
+			{/if}
 		</button>
 	</div>
 	<slot name="content-right" />

diff --git a/src/lib/components/toggle/index.ts b/src/lib/components/toggle/index.ts
@@ -3,14 +3,13 @@ import OriginalContentLeft from './ContentLeft.svelte';
 import OriginalContentRight from './ContentRight.svelte';
 import Label from './Label.svelte';
 import Description from './Description.svelte';
-import LeftIcon from './LeftIcon.svelte';
-import RightIcon from './RightIcon.svelte';
+import Icon from '../icon/Icon.svelte';
 
 const Toggle = OriginalToggle as ToggleStatic;
 Toggle.ContentLeft = OriginalContentLeft as ContentLeftStatic;
 Toggle.ContentRight = OriginalContentRight as ContentRightStatic;
-Toggle.LeftIcon = LeftIcon;
-Toggle.RightIcon = RightIcon;
+Toggle.LeftIcon = Icon;
+Toggle.RightIcon = Icon;
 Toggle.ContentLeft.Label = Label;
 Toggle.ContentLeft.Description = Description;
 Toggle.ContentRight.Label = Label;
@@ -22,8 +21,8 @@ export interface ToggleStatic {
 	new (...args: ConstructorParameters<typeof OriginalToggle>): OriginalToggle;
 	ContentLeft: ContentLeftStatic;
 	ContentRight: ContentRightStatic;
-	LeftIcon: typeof LeftIcon;
-	RightIcon: typeof RightIcon;
+	LeftIcon: typeof Icon;
+	RightIcon: typeof Icon;
 }
 
 export interface ContentLeftStatic {

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -103,12 +103,8 @@
 
 			<Layout.Header.Extra slot="extra">
 				<Toggle name="toggle" bind:on={darkTheme}>
-					<Toggle.LeftIcon slot="left-icon">
-						<Icon data={brightness_5} />
-					</Toggle.LeftIcon>
-					<Toggle.RightIcon slot="right-icon">
-						<Icon data={brightness_4} />
-					</Toggle.RightIcon>
+					<Toggle.LeftIcon slot="left-icon" data={brightness_5} />
+					<Toggle.RightIcon slot="right-icon" data={brightness_4} />
 				</Toggle>
 
 				<Search />

diff --git a/src/routes/toggle/+page.svelte b/src/routes/toggle/+page.svelte
@@ -67,12 +67,8 @@
 		<Card.Header slot="header">with Left and Right icons</Card.Header>
 		<Card.Content slot="content" class="p-4">
 			<Toggle name="toggle">
-				<Toggle.LeftIcon slot="left-icon">
-					<Icon data={brightness_5} />
-				</Toggle.LeftIcon>
-				<Toggle.RightIcon slot="right-icon">
-					<Icon data={brightness_4} />
-				</Toggle.RightIcon>
+				<Toggle.LeftIcon slot="left-icon" data={brightness_5} class="text-white" />
+				<Toggle.RightIcon slot="right-icon" data={brightness_4} />
 			</Toggle>
 
 			<br />