fix(Input): removed dependency on material icons

docs(input): updated examples

src/lib/components/input/Leading.svelte

@@ -32,5 +32,6 @@
 	use:forwardEvents
 	{...exclude($$props, ['use', 'class'])}
 >
+	<slot name="icon" />
 	<slot />
 </span>

src/lib/components/input/Trailing.svelte

@@ -32,5 +32,6 @@
 	use:forwardEvents
 	{...exclude($$props, ['use', 'class'])}
 >
+	<slot name="icon" />
 	<slot />
 </span>

src/lib/components/input/index.ts

@@ -1,18 +1,30 @@
 import OriginalInput from './Input.svelte';
 import Label from './Label.svelte';
-import Leading from './Leading.svelte';
-import Trailing from './Trailing.svelte';
+import OriginalLeading from './Leading.svelte';
+import OriginalTrailing from './Trailing.svelte';
+import Icon from '../icon/Icon.svelte';
 
 const Input = OriginalInput as InputStatic;
 Input.Label = Label;
-Input.Leading = Leading;
-Input.Trailing = Trailing;
+Input.Leading = OriginalLeading as LeadingStatic;
+Input.Trailing = OriginalTrailing as TrailingStatic;
+Input.Leading.Icon = Icon;
+Input.Trailing.Icon = Icon;
 
 export default Input;
 
 export interface InputStatic {
 	new (...args: ConstructorParameters<typeof OriginalInput>): OriginalInput;
 	Label: typeof Label;
-	Leading: typeof Leading;
-	Trailing: typeof Trailing;
+	Leading: LeadingStatic;
+	Trailing: TrailingStatic;
+}
+
+export interface LeadingStatic {
+	new (...args: ConstructorParameters<typeof OriginalLeading>): OriginalLeading;
+	Icon: typeof Icon;
+}
+export interface TrailingStatic {
+	new (...args: ConstructorParameters<typeof OriginalTrailing>): OriginalTrailing;
+	Icon: typeof Icon;
 }

src/routes/input/+page.svelte

@@ -1,6 +1,14 @@
 <script lang="ts">
 	import { Card, Col, Icon, Input } from '../../lib';
-	import { example, props, slots, labelSlots, leadingSlots, trailingSlots } from './examples';
+	import {
+		example,
+		props,
+		slots,
+		labelSlots,
+		leadingSlots,
+		trailingSlots,
+		iconProps
+	} from './examples';
 	import { PropsTable, SlotsTable, UpdatedComponent, CodeBlock } from '../../docs';
 	import { email, phone, lock } from '../../docs/icons';
 </script>
@@ -17,10 +25,10 @@
 			<Input name="input-2" allowClear>
 				<Input.Label slot="label">Label</Input.Label>
 				<Input.Leading slot="leading">
-					<Icon data={email} />
+					<Input.Leading.Icon slot="icon" data={email} />
 				</Input.Leading>
 				<Input.Trailing slot="trailing">
-					<Icon data={phone} />
+					<Input.Trailing.Icon slot="icon" data={phone} />
 				</Input.Trailing>
 			</Input>
 			<br />
@@ -31,17 +39,17 @@
 			>
 				<Input.Label slot="label">Label</Input.Label>
 				<Input.Leading slot="leading">
-					<Icon data={email} />
+					<Input.Leading.Icon slot="icon" data={email} />
 				</Input.Leading>
 				<Input.Trailing slot="trailing">
-					<Icon data={phone} />
+					<Input.Trailing.Icon slot="icon" data={phone} />
 				</Input.Trailing>
 			</Input>
 			<br />
 			<Input type="password" name="input-4" showPasswordToggle>
 				<Input.Label slot="label">Password</Input.Label>
 				<Input.Leading slot="leading">
-					<Icon data={lock} />
+					<Input.Leading.Icon slot="icon" data={lock} />
 				</Input.Leading>
 			</Input>
 
@@ -68,6 +76,14 @@
 	<SlotsTable component="Input.Leading" slots={leadingSlots} />
 </Col>
 
+<Col class="col-24">
+	<PropsTable component="Input.Leading.Icon" props={iconProps} />
+</Col>
+
 <Col class="col-24">
 	<SlotsTable component="Input.Trailing" slots={trailingSlots} />
 </Col>
+
+<Col class="col-24">
+	<PropsTable component="Input.Trailing.Icon" props={iconProps} />
+</Col>

src/routes/input/examples.ts

@@ -106,6 +106,11 @@ export const leadingSlots: Slot[] = [
 		id: '1',
 		slot: 'default',
 		component: ''
+	},
+	{
+		id: '2',
+		slot: 'icon',
+		component: '<Input.Leading.Icon slot="icon" />'
 	}
 ];
 
@@ -114,12 +119,68 @@ export const trailingSlots: Slot[] = [
 		id: '1',
 		slot: 'default',
 		component: ''
+	},
+	{
+		id: '2',
+		slot: 'icon',
+		component: '<Input.Trailing.Icon slot="icon" />'
+	}
+];
+
+export const iconProps: Prop[] = [
+	{
+		id: '1',
+		prop: 'data',
+		type: '<a href="/types#IconData" class="link">string (IconData)</a>',
+		default: ''
+	},
+	{
+		id: '2',
+		prop: 'viewBox',
+		type: 'string',
+		default: '0 0 24 24'
+	},
+	{
+		id: '3',
+		prop: 'size',
+		type: 'string',
+		default: '24px'
+	},
+	{
+		id: '4',
+		prop: 'width',
+		type: 'string',
+		default: '24px'
+	},
+	{
+		id: '5',
+		prop: 'height',
+		type: 'string',
+		default: '24px'
+	},
+	{
+		id: '6',
+		prop: 'color',
+		type: 'string',
+		default: 'currentColor'
+	},
+	{
+		id: '7',
+		prop: 'stroke',
+		type: 'string | undefined',
+		default: ''
+	},
+	{
+		id: '8',
+		prop: 'fill',
+		type: 'string',
+		default: 'currentColor'
 	}
 ];
 
 export const example = `
 <script lang="ts">
-	import { Input, Icon } from 'stwui';
+	import { Input } from 'stwui';
 
 	const email = "svg-path";
 	const phone = "svg-path";
@@ -131,10 +192,10 @@ export const example = `
 <Input name="input-2" allowClear>
 	<Input.Label slot="label">Label</Input.Label>
 	<Input.Leading slot="leading">
-		<Icon data={email} />
+		<Input.Leading.Icon slot="icon" data={email} />
 	</Input.Leading>
 	<Input.Trailing slot="trailing">
-		<Icon data={phone} />
+		<Input.Trailing.Icon slot="icon" data={phone} />
 	</Input.Trailing>
 </Input>
 
@@ -145,16 +206,16 @@ export const example = `
 >
 	<Input.Label slot="label">Label</Input.Label>
 	<Input.Leading slot="leading">
-		<Icon data={email} />
+		<Input.LeadingIcon slot="icon" data={email} />
 	</Input.Leading>
 	<Input.Trailing slot="trailing">
-		<Icon data={phone} />
+		<Input.Trailing.Icon slot="icon" data={phone} />
 	</Input.Trailing>
 </Input>
 
 <Input type="password" name="input-4" showPasswordToggle>
 	<Input.Label slot="label">Password</Input.Label>
 	<Input.Leading slot="leading">
-		<Icon data={lock} />
+		<Input.Leading.Icon slot="icon" data={lock} />
 	</Input.Leading>
 </Input>`;