fix(Divider): removed dependency on material icons

docs(divider): updated examples

src/lib/components/divider/Icon.svelte

@@ -1,22 +1,48 @@
 <script lang="ts">
-	import type { MaterialIcon } from '../../types';
 	import { twMerge } from 'tailwind-merge';
 	import { get_current_component } from 'svelte/internal';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
 	export let use: ActionArray = [];
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	export let icon: MaterialIcon;
+	export let data = '';
+	export let viewBox = extractViewBox(data);
+
+	export let size = '24px';
+	export let width = size;
+	export let height = size;
+
+	export let color = 'currentColor';
+	export let stroke: string | undefined = undefined;
+	export let fill = color;
+
+	$: elements = data.replace(/<svg ([^>]*)>/, '').replace('</svg>', '');
+
+	function extractViewBox(svg: string) {
+		const regex = /viewBox="([\d\- ]+)"/;
+		const res = regex.exec(svg);
+		if (!res) return '0 0 24 24'; // default value
+		return res[1];
+	}
 
 	const defaultClass =
-		'material-icons px-2 bg-light-surface dark:bg-dark-surface text-light-content dark:text-dark-content';
+		'px-2 bg-light-surface dark:bg-dark-surface text-light-content dark:text-dark-content';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<span
-	class={finalClass}
-	use:useActions={use}
-	use:forwardEvents
-	{...exclude($$props, ['use', 'class'])}>{icon}</span
->
+<span class={finalClass} style={$$props.style}>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		{width}
+		{height}
+		{viewBox}
+		{stroke}
+		{fill}
+		use:useActions={use}
+		use:forwardEvents
+		{...exclude($$props, ['use', 'class', 'fill', 'viewBox', 'width', 'height', 'stroke', 'style'])}
+	>
+		{@html elements}
+	</svg>
+</span>

src/routes/divider/+page.svelte

@@ -2,6 +2,8 @@
 	import { Button, Card, Col, Divider } from '../../lib';
 	import { example, props, slots, iconProps, labelSlots } from './examples';
 	import { PropsTable, SlotsTable, CodeBlock } from '../../docs';
+
+	import { plus_circle } from '../../docs/icons';
 </script>
 
 <Col class="col-24 md:col-12">
@@ -11,7 +13,7 @@
 				<Divider.Label slot="label"><h3>Divider</h3></Divider.Label>
 			</Divider>
 			<Divider>
-				<Divider.Icon slot="icon" icon="add" />
+				<Divider.Icon slot="icon" data={plus_circle} />
 			</Divider>
 			<Divider position="left">
 				<Divider.Label slot="label">Divider</Divider.Label>

src/routes/divider/examples.ts

@@ -30,9 +30,51 @@ export const slots: Slot[] = [
 export const iconProps: Prop[] = [
 	{
 		id: '1',
-		prop: 'icon',
-		type: '<a class="link" href="/types#MaterialIcon">MaterialIcon</a>',
+		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'
 	}
 ];
 
@@ -47,6 +89,8 @@ export const labelSlots: Slot[] = [
 export const example = `
 <script lang="ts">
 	import { Divider, Button } from 'stwui';
+
+	const plus_circle = "svg-path";
 </script>
 
 <Divider>
@@ -55,7 +99,7 @@ export const example = `
    </Divider.Label>
 </Divider>
 <Divider>
-   <Divider.Icon slot="icon" icon="add" />
+   <Divider.Icon slot="icon" data={plus_circle} />
 </Divider>
 <Divider position="left">
    <Divider.Label slot="label">Divider</Divider.Label>