fix(Icon): allow icon packages to be easily used

N00nDay · Nov 20, 2023 · d26db97 · d26db97
1 parent 81f266b
commit d26db97
Show file tree

Hide file tree

Showing 13 changed files with 217 additions and 28 deletions.
diff --git a/src/lib/components/breadcrumbs/Crumb.svelte b/src/lib/components/breadcrumbs/Crumb.svelte
@@ -25,7 +25,7 @@
 		{:else}
 			<Divider />
 		{/if}
-		<a {href} class="flex items-center">
+		<a {href} class="flex items-center {$$slots.icon ? 'pl-3' : ''}">
 			<slot name="icon" />
 			<slot name="label" />
 			<slot />

diff --git a/src/lib/components/button-group/Icon.svelte b/src/lib/components/button-group/Icon.svelte
@@ -25,9 +25,13 @@
 		if (!res) return '0 0 24 24'; // default value
 		return res[1];
 	}
+
+	const defaultClass = 'stwui-button-group-button-icon';
+	$: finalClass = [defaultClass, $$props.class].join(' ');
 </script>
 
 <svg
+	class={finalClass}
 	xmlns="http://www.w3.org/2000/svg"
 	{width}
 	{height}
@@ -46,9 +50,24 @@
 		'height',
 		'stroke',
 		'size',
-		'color'
+		'color',
+		'class'
 	])}
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-	{@html elements}
+	{#if $$slots.icon}
+		<slot name="icon" />
+	{:else if $$slots.leading}
+		<slot name="leading" />
+	{:else if $$slots.trailing}
+		<slot name="trailing" />
+	{:else}
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html elements}
+	{/if}
 </svg>
+
+<style>
+	:global(.stwui-button-group-button-icon svg) {
+		stroke: currentColor;
+	}
+</style>
diff --git a/src/lib/components/button/Icon.svelte b/src/lib/components/button/Icon.svelte
@@ -25,9 +25,13 @@
 		if (!res) return '0 0 24 24'; // default value
 		return res[1];
 	}
+
+	const defaultClass = 'stwui-button-icon';
+	$: finalClass = [defaultClass, $$props.class].join(' ');
 </script>
 
 <svg
+	class={finalClass}
 	xmlns="http://www.w3.org/2000/svg"
 	{width}
 	{height}
@@ -46,9 +50,24 @@
 		'height',
 		'stroke',
 		'size',
-		'color'
+		'color',
+		'class'
 	])}
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-	{@html elements}
+	{#if $$slots.icon}
+		<slot name="icon" />
+	{:else if $$slots.leading}
+		<slot name="leading" />
+	{:else if $$slots.trailing}
+		<slot name="trailing" />
+	{:else}
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html elements}
+	{/if}
 </svg>
+
+<style>
+	:global(.stwui-button-icon svg) {
+		stroke: currentColor;
+	}
+</style>
diff --git a/src/lib/components/divider/Icon.svelte b/src/lib/components/divider/Icon.svelte
@@ -51,7 +51,21 @@
 			'style'
 		])}
 	>
-		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-		{@html elements}
+		{#if $$slots.icon}
+			<slot name="icon" />
+		{:else if $$slots.leading}
+			<slot name="leading" />
+		{:else if $$slots.trailing}
+			<slot name="trailing" />
+		{:else}
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			{@html elements}
+		{/if}
 	</svg>
 </span>
+
+<style>
+	:global(.stwui-divider-icon svg) {
+		stroke: currentColor;
+	}
+</style>
diff --git a/src/lib/components/empty/Icon.svelte b/src/lib/components/empty/Icon.svelte
@@ -51,7 +51,21 @@
 			'stroke'
 		])}
 	>
-		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-		{@html elements}
+		{#if $$slots.icon}
+			<slot name="icon" />
+		{:else if $$slots.leading}
+			<slot name="leading" />
+		{:else if $$slots.trailing}
+			<slot name="trailing" />
+		{:else}
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			{@html elements}
+		{/if}
 	</svg>
 </span>
+
+<style>
+	:global(.stwui-empty-icon svg) {
+		stroke: currentColor;
+	}
+</style>
diff --git a/src/lib/components/feed/Icon.svelte b/src/lib/components/feed/Icon.svelte
@@ -51,7 +51,21 @@
 			'stroke'
 		])}
 	>
-		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-		{@html elements}
+		{#if $$slots.icon}
+			<slot name="icon" />
+		{:else if $$slots.leading}
+			<slot name="leading" />
+		{:else if $$slots.trailing}
+			<slot name="trailing" />
+		{:else}
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			{@html elements}
+		{/if}
 	</svg>
 </span>
+
+<style>
+	:global(.stwui-feed-item-leading-icon svg) {
+		stroke: currentColor;
+	}
+</style>
diff --git a/src/lib/components/file-picker/Icon.svelte b/src/lib/components/file-picker/Icon.svelte
@@ -57,7 +57,21 @@
 			'stroke'
 		])}
 	>
-		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-		{@html elements}
+		{#if $$slots.icon}
+			<slot name="icon" />
+		{:else if $$slots.leading}
+			<slot name="leading" />
+		{:else if $$slots.trailing}
+			<slot name="trailing" />
+		{:else}
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			{@html elements}
+		{/if}
 	</svg>
 </span>
+
+<style>
+	:global(.stwui-file-picker-icon svg) {
+		stroke: currentColor;
+	}
+</style>
diff --git a/src/lib/components/icon/Icon.svelte b/src/lib/components/icon/Icon.svelte
@@ -22,10 +22,13 @@
 		if (!res) return '0 0 24 24'; // default value
 		return res[1];
 	}
+
+	const defaultClass = 'stwui-icon';
+	$: finalClass = [defaultClass, $$props.class].join(' ');
 </script>
 
 <svg
-	class="stwui-icon"
+	class={finalClass}
 	xmlns="http://www.w3.org/2000/svg"
 	{width}
 	{height}
@@ -37,6 +40,20 @@
 	use:forwardEvents
 	{...exclude($$props, ['use', 'data', 'fill', 'viewBox', 'width', 'height', 'stroke'])}
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-	{@html elements}
+	{#if $$slots.icon}
+		<slot name="icon" />
+	{:else if $$slots.leading}
+		<slot name="leading" />
+	{:else if $$slots.trailing}
+		<slot name="trailing" />
+	{:else}
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html elements}
+	{/if}
 </svg>
+
+<style>
+	:global(.stwui-icon svg) {
+		stroke: currentColor;
+	}
+</style>
diff --git a/src/lib/components/lightbox/Control.svelte b/src/lib/components/lightbox/Control.svelte
@@ -47,7 +47,21 @@
 	])}
 >
 	<svg xmlns="http://www.w3.org/2000/svg" {width} {height} {viewBox} {stroke} {fill} {color}>
-		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-		{@html elements}
+		{#if $$slots.icon}
+			<slot name="icon" />
+		{:else if $$slots.leading}
+			<slot name="leading" />
+		{:else if $$slots.trailing}
+			<slot name="trailing" />
+		{:else}
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			{@html elements}
+		{/if}
 	</svg>
 </span>
+
+<style>
+	:global(.stwui-lightbox-control svg) {
+		stroke: currentColor;
+	}
+</style>
diff --git a/src/lib/components/menu/Icon.svelte b/src/lib/components/menu/Icon.svelte
@@ -47,7 +47,21 @@
 	])}
 >
 	<svg xmlns="http://www.w3.org/2000/svg" {width} {height} {viewBox} {stroke} {fill} {color}>
-		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-		{@html elements}
+		{#if $$slots.icon}
+			<slot name="icon" />
+		{:else if $$slots.leading}
+			<slot name="leading" />
+		{:else if $$slots.trailing}
+			<slot name="trailing" />
+		{:else}
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			{@html elements}
+		{/if}
 	</svg>
 </span>
+
+<style>
+	:global(.stwui-item-icon svg) {
+		stroke: currentColor;
+	}
+</style>
diff --git a/src/lib/components/post/Icon.svelte b/src/lib/components/post/Icon.svelte
@@ -22,9 +22,13 @@
 		if (!res) return '0 0 24 24'; // default value
 		return res[1];
 	}
+
+	const defaultClass = 'stwui-post-icon';
+	$: finalClass = [defaultClass, $$props.class].join(' ');
 </script>
 
 <svg
+	class={finalClass}
 	xmlns="http://www.w3.org/2000/svg"
 	{width}
 	{height}
@@ -46,6 +50,20 @@
 		'data'
 	])}
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-	{@html elements}
+	{#if $$slots.icon}
+		<slot name="icon" />
+	{:else if $$slots.leading}
+		<slot name="leading" />
+	{:else if $$slots.trailing}
+		<slot name="trailing" />
+	{:else}
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html elements}
+	{/if}
 </svg>
+
+<style>
+	:global(.stwui-post-icon svg) {
+		stroke: currentColor;
+	}
+</style>
diff --git a/src/lib/components/statistic/Icon.svelte b/src/lib/components/statistic/Icon.svelte
@@ -46,7 +46,21 @@
 	])}
 >
 	<svg xmlns="http://www.w3.org/2000/svg" {width} {height} {viewBox} {stroke} {fill} {color}>
-		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-		{@html elements}
+		{#if $$slots.icon}
+			<slot name="icon" />
+		{:else if $$slots.leading}
+			<slot name="leading" />
+		{:else if $$slots.trailing}
+			<slot name="trailing" />
+		{:else}
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			{@html elements}
+		{/if}
 	</svg>
 </dd>
+
+<style>
+	:global(.stwui-statistic-icon svg) {
+		stroke: currentColor;
+	}
+</style>
diff --git a/src/lib/components/statistic/TrendIcon.svelte b/src/lib/components/statistic/TrendIcon.svelte
@@ -22,9 +22,13 @@
 		if (!res) return '0 0 24 24'; // default value
 		return res[1];
 	}
+
+	const defaultClass = 'stwui-trend-icon';
+	$: finalClass = [defaultClass, $$props.class].join(' ');
 </script>
 
 <svg
+	class={finalClass}
 	xmlns="http://www.w3.org/2000/svg"
 	{width}
 	{height}
@@ -46,6 +50,20 @@
 		'data'
 	])}
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-	{@html elements}
+	{#if $$slots.icon}
+		<slot name="icon" />
+	{:else if $$slots.leading}
+		<slot name="leading" />
+	{:else if $$slots.trailing}
+		<slot name="trailing" />
+	{:else}
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html elements}
+	{/if}
 </svg>
+
+<style>
+	:global(.stwui-trend-icon svg) {
+		stroke: currentColor;
+	}
+</style>