From f1b6bf9f9e0c141b876496bb830ab74808f4b850 Mon Sep 17 00:00:00 2001
From: Craig Howell <howell.craig@gmail.com>
Date: Tue, 18 Oct 2022 14:55:46 -0400
Subject: [PATCH] fix(Divider): removed dependency on material icons
 docs(divider): updated examples

---
 src/lib/components/divider/Icon.svelte | 44 ++++++++++++++++++-----
 src/routes/divider/+page.svelte        |  4 ++-
 src/routes/divider/examples.ts         | 50 ++++++++++++++++++++++++--
 3 files changed, 85 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/divider/Icon.svelte b/src/lib/components/divider/Icon.svelte
index fb2dda56..28e65df1 100644
--- a/src/lib/components/divider/Icon.svelte
+++ b/src/lib/components/divider/Icon.svelte
@@ -1,5 +1,4 @@
 <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';
@@ -7,16 +6,43 @@
 	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>
diff --git a/src/routes/divider/+page.svelte b/src/routes/divider/+page.svelte
index b1792597..7213d04a 100644
--- a/src/routes/divider/+page.svelte
+++ b/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>
diff --git a/src/routes/divider/examples.ts b/src/routes/divider/examples.ts
index 449ce733..c4dc7f54 100644
--- a/src/routes/divider/examples.ts
+++ b/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>