@jis3r/icons 1.11.0 → 1.12.1

package/dist/components/navbar.svelte

@@ -52,7 +52,7 @@
 <header
 	class="bg-background bg-opacity-40 fixed top-0 z-50 h-[72px] w-full border-b backdrop-blur-xl"
 >
-	<nav class="container flex items-center justify-between py-4">
+	<nav class="container mx-auto flex max-w-7xl items-center justify-between py-4">
 		<a href="/" class="cursor-pointer text-base"> moving icons </a>
 		<div class="flex gap-1">
 			<Button

package/dist/icons/badge-check.svelte

@@ -22,7 +22,7 @@
 
 		setTimeout(() => {
 			isHovered = false;
-		}, 500);
+		}, 1200);
 	}
 </script>
 
@@ -42,8 +42,9 @@
 	>
 		<path
 			d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"
+			class="badge-path"
 		/>
-		<path d="M9 12l2 2 4-4" class="check-path" />
+		<path d="m9 12 2 2 4-4" class="check-path" />
 	</svg>
 </div>
 
@@ -55,26 +56,48 @@
 		overflow: visible;
 	}
 
+	.badge-path {
+		transform-origin: center;
+		transition: transform 1.2s ease-in-out;
+	}
+
 	.check-path {
-		stroke-dasharray: 9;
+		stroke-dasharray: 10;
 		stroke-dashoffset: 0;
+		opacity: 1;
 		transition:
-			stroke-dashoffset 0.125s ease-out,
-			opacity 0.125s ease-out;
+			stroke-dashoffset 1.2s ease-in-out,
+			opacity 0.01s ease-in-out;
+	}
+
+	.badge-check-icon.animate .badge-path {
+		animation: scaleBadge 1.2s ease-in-out;
 	}
 
 	.badge-check-icon.animate .check-path {
-		animation: checkAnimation 0.5s ease-out backwards;
+		animation: drawCheck 1.2s ease-in-out;
+	}
+
+	@keyframes scaleBadge {
+		0% {
+			transform: scale(1);
+		}
+		50% {
+			transform: scale(0.9);
+		}
+		100% {
+			transform: scale(1);
+		}
 	}
 
-	@keyframes checkAnimation {
+	@keyframes drawCheck {
 		0% {
-			stroke-dashoffset: 9;
-			opacity: 0;
+			stroke-dashoffset: 0;
+			opacity: 1;
 		}
-		33% {
-			stroke-dashoffset: 9;
-			opacity: 0;
+		50% {
+			stroke-dashoffset: 10;
+			opacity: 1;
 		}
 		100% {
 			stroke-dashoffset: 0;

package/dist/icons/index.js

@@ -275,6 +275,7 @@ import layoutGrid from './layout-grid.svelte';
 import layoutPanelLeft from './layout-panel-left.svelte';
 import layoutPanelTop from './layout-panel-top.svelte';
 import layoutTemplate from './layout-template.svelte';
+import lightbulb from './lightbulb.svelte';
 import lightbulbOff from './lightbulb-off.svelte';
 import link2Off from './link-2-off.svelte';
 import listCheck from './list-check.svelte';
@@ -3408,6 +3409,12 @@ let ICONS_LIST = [
 		tags: ['window', 'webpage', 'block', 'section'],
 		categories: ['layout']
 	},
+	{
+		name: 'lightbulb',
+		icon: lightbulb,
+		tags: ['idea', 'bright', 'lights'],
+		categories: ['photography']
+	},
 	{
 		name: 'lightbulb-off',
 		icon: lightbulbOff,

package/dist/icons/lightbulb.svelte

@@ -0,0 +1,142 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color]
+	 * @property {number} [size]
+	 * @property {number} [strokeWidth]
+	 * @property {boolean} [isHovered]
+	 * @property {string} [class]
+	 */
+
+	/** @type {Props} */
+	let {
+		color = 'currentColor',
+		size = 24,
+		strokeWidth = 2,
+		isHovered = false,
+		class: className = ''
+	} = $props();
+
+	function handleMouseEnter() {
+		isHovered = true;
+
+		setTimeout(() => {
+			isHovered = false;
+		}, 1100);
+	}
+</script>
+
+<div class={className} aria-label="lightbulb" role="img" onmouseenter={handleMouseEnter}>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="lightbulb-icon"
+		class:animate={isHovered}
+	>
+		<path
+			d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"
+			class="lightbulb-path1"
+		/>
+		<path d="M9 18h6" class="lightbulb-path2" />
+		<path d="M10 22h4" class="lightbulb-path3" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+
+	.lightbulb-icon {
+		overflow: visible;
+	}
+
+	.lightbulb-path1 {
+		transform-origin: bottom center;
+		transform-box: fill-box;
+		fill: transparent;
+		transition: fill 0s;
+	}
+
+	.lightbulb-path2 {
+		transform-origin: bottom center;
+		transform-box: fill-box;
+	}
+
+	.lightbulb-icon.animate .lightbulb-path1 {
+		animation:
+			lightbulb-rotate1 0.8s ease-in-out forwards,
+			lightbulb-fill-opacity 0.3s ease-in-out 0.4s forwards;
+		fill: currentColor;
+		fill-opacity: 0;
+	}
+
+	.lightbulb-icon:not(.animate) .lightbulb-path1 {
+		fill: transparent;
+	}
+
+	.lightbulb-icon.animate .lightbulb-path2 {
+		animation: lightbulb-rotate2 0.8s ease-in-out forwards;
+	}
+
+	@keyframes lightbulb-rotate1 {
+		0% {
+			transform: rotate(0deg);
+		}
+		40% {
+			transform: rotate(-20deg);
+		}
+		60% {
+			transform: rotate(15deg);
+		}
+		80% {
+			transform: rotate(-7deg);
+		}
+		100% {
+			transform: rotate(0deg);
+		}
+	}
+
+	@keyframes lightbulb-fill-opacity {
+		0% {
+			fill-opacity: 0;
+		}
+		40% {
+			fill-opacity: 1;
+		}
+		60% {
+			fill-opacity: 0;
+		}
+		80% {
+			fill-opacity: 1;
+		}
+		100% {
+			fill-opacity: 0;
+		}
+	}
+
+	@keyframes lightbulb-rotate2 {
+		0% {
+			transform: rotate(0deg);
+		}
+		40% {
+			transform: rotate(0deg);
+		}
+		60% {
+			transform: rotate(10deg);
+		}
+		80% {
+			transform: rotate(-5deg);
+		}
+		100% {
+			transform: rotate(0deg);
+		}
+	}
+</style>

package/dist/icons/lightbulb.svelte.d.ts

@@ -0,0 +1,19 @@
+export default Lightbulb;
+type Lightbulb = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Lightbulb: import("svelte").Component<{
+    color?: string;
+    size?: number;
+    strokeWidth?: number;
+    isHovered?: boolean;
+    class?: string;
+}, {}, "">;
+type Props = {
+    color?: string;
+    size?: number;
+    strokeWidth?: number;
+    isHovered?: boolean;
+    class?: string;
+};

package/dist/index.d.ts

@@ -276,6 +276,7 @@ export { default as LayoutPanelLeft } from "./icons/layout-panel-left.svelte";
 export { default as LayoutPanelTop } from "./icons/layout-panel-top.svelte";
 export { default as LayoutTemplate } from "./icons/layout-template.svelte";
 export { default as LightbulbOff } from "./icons/lightbulb-off.svelte";
+export { default as Lightbulb } from "./icons/lightbulb.svelte";
 export { default as Link2Off } from "./icons/link-2-off.svelte";
 export { default as ListCheck } from "./icons/list-check.svelte";
 export { default as ListChecks } from "./icons/list-checks.svelte";

package/dist/index.js

@@ -276,6 +276,7 @@ export { default as LayoutPanelLeft } from './icons/layout-panel-left.svelte';
 export { default as LayoutPanelTop } from './icons/layout-panel-top.svelte';
 export { default as LayoutTemplate } from './icons/layout-template.svelte';
 export { default as LightbulbOff } from './icons/lightbulb-off.svelte';
+export { default as Lightbulb } from './icons/lightbulb.svelte';
 export { default as Link2Off } from './icons/link-2-off.svelte';
 export { default as ListCheck } from './icons/list-check.svelte';
 export { default as ListChecks } from './icons/list-checks.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@jis3r/icons",
-	"version": "1.11.0",
+	"version": "1.12.1",
 	"description": "beautifully crafted, moving icons. for svelte.",
 	"keywords": [
 		"svelte",
@@ -49,7 +49,7 @@
 		"@sveltejs/adapter-auto": "^6.0.1",
 		"@sveltejs/kit": "^2.26.1",
 		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
 		"@tailwindcss/vite": "^4.1.16",
 		"@types/eslint": "^9.6.0",
 		"autoprefixer": "^10.4.20",