mertani-web-toolkit 0.1.68 → 0.1.70

package/dist/components/Icon/Icon.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { iconMap } from '../../icons/index.js';
 	import type { TIconName } from '../../icons/index.js';
+	import * as lucideIcons from 'lucide-svelte';
+	import IconifyIcon from '@iconify/svelte';
 
 	interface IconProps {
 		name: TIconName;
@@ -14,7 +16,36 @@
 
 	const { name, width, height, color, style, onclick, opacity }: IconProps = $props();
 
-	const IconComponent = $derived(iconMap[name]);
+	const IconComponent = $derived(iconMap[name as keyof typeof iconMap]);
+
+	// cek apakah ada di lucide
+	// lucide pakai PascalCase: "arrow-right" → "ArrowRight"
+	const lucideName = $derived(
+		name
+			.split('-')
+			.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+			.join('')
+	);
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const LucideIcon = $derived((lucideIcons as any)[lucideName] ?? null);
+
+	// heuristic: jika ada colon ":" biasanya itu iconify set
+	const isIconify = $derived(name.includes(':'));
+
+	const sizeValue = $derived(() => {
+		if (typeof width === 'number') return width;
+		if (typeof width === 'string') {
+			const parsed = parseInt(width);
+			if (!isNaN(parsed)) return parsed;
+		}
+		if (typeof height === 'number') return height;
+		if (typeof height === 'string') {
+			const parsed = parseInt(height);
+			if (!isNaN(parsed)) return parsed;
+		}
+		return 24;
+	});
 
 	const iconWidth = $derived(
 		width !== undefined ? (typeof width === 'number' ? `${width}px` : width) : 'auto'
@@ -56,7 +87,7 @@
 </script>
 
 {#if IconComponent}
-	{@const Component = IconComponent as any}
+	{@const Component = IconComponent}
 	<div
 		class="icon-wrapper"
 		class:icon-clickable={onclick !== undefined}
@@ -74,6 +105,39 @@
 			<Component />
 		</div>
 	</div>
+{:else if LucideIcon}
+	<div
+		class="icon-wrapper"
+		class:icon-clickable={onclick !== undefined}
+		style={combinedStyles()}
+		onclick={onclick ? handleClick : undefined}
+		role={onclick ? 'button' : undefined}
+		onkeydown={(e) => {
+			if (onclick && (e.key === 'Enter' || e.key === ' ')) {
+				e.preventDefault();
+				handleClick();
+			}
+		}}
+	>
+		<!-- svelte-ignore svelte_component_deprecated -->
+		<svelte:component this={LucideIcon} size={sizeValue()} color={iconColor} />
+	</div>
+{:else if isIconify}
+	<div
+		class="icon-wrapper"
+		class:icon-clickable={onclick !== undefined}
+		style={combinedStyles()}
+		onclick={onclick ? handleClick : undefined}
+		role={onclick ? 'button' : undefined}
+		onkeydown={(e) => {
+			if (onclick && (e.key === 'Enter' || e.key === ' ')) {
+				e.preventDefault();
+				handleClick();
+			}
+		}}
+	>
+		<IconifyIcon icon={name} width={sizeValue()} height={sizeValue()} style="color: {iconColor}" />
+	</div>
 {:else}
 	<span class="icon-error">Icon "{name}" tidak ditemukan</span>
 {/if}

package/dist/icons/index.js

@@ -259,8 +259,8 @@ export const iconMap = {
     berawan: Berawan,
     'berawan-tebal': BerawanTebal,
     'udara-kabut': UdaraKabut,
-    'kabut': Kabut,
-    'asap': Asap,
+    kabut: Kabut,
+    asap: Asap,
     'hujan-ringan': HujanRingan,
     'hujan-sedang': HujanSedang,
     'hujan-lebat': HujanLebat,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mertani-web-toolkit",
-	"version": "0.1.68",
+	"version": "0.1.70",
 	"homepage": "https://storybook.mertani.com/",
 	"scripts": {
 		"dev": "vite dev",
@@ -79,8 +79,10 @@
 		"svelte"
 	],
 	"dependencies": {
+		"@iconify/svelte": "^5.2.1",
 		"leaflet.markercluster": "^1.5.3",
 		"leaflet-velocity": "^1.5.0",
+		"lucide-svelte": "^1.0.1",
 		"tailwind-merge": "^3.4.0",
 		"topojson-client": "^3.1.0"
 	}