@jis3r/icons 1.20.0 → 1.24.0

package/dist/icons/gallery-vertical.svelte

@@ -0,0 +1,100 @@
+<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() {
+		if (isHovered) return;
+		isHovered = true;
+
+		setTimeout(() => {
+			isHovered = false;
+		}, 800);
+	}
+</script>
+
+<div class={className} aria-label="gallery-vertical" 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="gallery-vertical-icon"
+		class:animate={isHovered}
+	>
+		<path d="M3 2h18" class="gallery-path gallery-path-1" />
+		<rect width="18" height="12" x="3" y="6" rx="2" class="gallery-rect" />
+		<path d="M3 22h18" class="gallery-path gallery-path-2" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+
+	.gallery-vertical-icon {
+		overflow: visible;
+	}
+
+	.gallery-path {
+		opacity: 1;
+		transform: scale(1) translateY(0);
+		transform-origin: center;
+	}
+
+	.gallery-rect {
+		opacity: 1;
+		transform: scale(1);
+		transform-origin: center;
+	}
+
+	.gallery-vertical-icon.animate .gallery-path-1 {
+		animation: slideInTop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
+	}
+
+	.gallery-vertical-icon.animate .gallery-path-2 {
+		animation: slideInBottom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
+	}
+
+	@keyframes slideInTop {
+		0% {
+			opacity: 0;
+			transform: scale(0.8) translateY(4px);
+		}
+		100% {
+			opacity: 1;
+			transform: scale(1) translateY(0);
+		}
+	}
+
+	@keyframes slideInBottom {
+		0% {
+			opacity: 0;
+			transform: scale(0.8) translateY(-4px);
+		}
+		100% {
+			opacity: 1;
+			transform: scale(1) translateY(0);
+		}
+	}
+</style>

package/dist/icons/gallery-vertical.svelte.d.ts

@@ -0,0 +1,19 @@
+export default GalleryVertical;
+type GalleryVertical = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const GalleryVertical: 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/icons/index.js

@@ -245,6 +245,7 @@ import frame from './frame.svelte';
 import galleryHorizontal from './gallery-horizontal.svelte';
 import galleryHorizontalEnd from './gallery-horizontal-end.svelte';
 import galleryThumbnails from './gallery-thumbnails.svelte';
+import galleryVertical from './gallery-vertical.svelte';
 import galleryVerticalEnd from './gallery-vertical-end.svelte';
 import gauge from './gauge.svelte';
 import gavel from './gavel.svelte';
@@ -361,6 +362,7 @@ import phoneOff from './phone-off.svelte';
 import pickaxe from './pickaxe.svelte';
 import pinOff from './pin-off.svelte';
 import plane from './plane.svelte';
+import play from './play.svelte';
 import plus from './plus.svelte';
 import pointerOff from './pointer-off.svelte';
 import powerOff from './power-off.svelte';
@@ -416,6 +418,7 @@ import slidersHorizontal from './sliders-horizontal.svelte';
 import slidersVertical from './sliders-vertical.svelte';
 import smartphoneNfc from './smartphone-nfc.svelte';
 import snowflake from './snowflake.svelte';
+import sparkle from './sparkle.svelte';
 import sparkles from './sparkles.svelte';
 import speech from './speech.svelte';
 import spellCheck from './spell-check.svelte';
@@ -477,6 +480,7 @@ import unfoldHorizontal from './unfold-horizontal.svelte';
 import unfoldVertical from './unfold-vertical.svelte';
 import unplug from './unplug.svelte';
 import upload from './upload.svelte';
+import user from './user.svelte';
 import userCheck from './user-check.svelte';
 import userCog from './user-cog.svelte';
 import userPen from './user-pen.svelte';
@@ -3160,6 +3164,12 @@ let ICONS_LIST = [
 		tags: ['carousel', 'pictures', 'images', 'album', 'portfolio', 'preview'],
 		categories: ['layout', 'design', 'development', 'photography', 'multimedia']
 	},
+	{
+		name: 'gallery-vertical',
+		icon: galleryVertical,
+		tags: ['carousel', 'pictures', 'images', 'scroll', 'swipe', 'album', 'portfolio'],
+		categories: ['layout', 'design', 'development', 'photography', 'multimedia']
+	},
 	{
 		name: 'gallery-vertical-end',
 		icon: galleryVerticalEnd,
@@ -4266,6 +4276,12 @@ let ICONS_LIST = [
 		tags: ['plane', 'trip', 'airplane'],
 		categories: ['transportation', 'travel']
 	},
+	{
+		name: 'play',
+		icon: play,
+		tags: ['music', 'audio', 'video', 'start', 'run'],
+		categories: ['arrows', 'multimedia']
+	},
 	{
 		name: 'plus',
 		icon: plus,
@@ -5029,6 +5045,22 @@ let ICONS_LIST = [
 		tags: ['cold', 'weather', 'freeze', 'snow', 'winter'],
 		categories: ['weather', 'seasons']
 	},
+	{
+		name: 'sparkle',
+		icon: sparkle,
+		tags: [
+			'star',
+			'effect',
+			'filter',
+			'night',
+			'magic',
+			'shiny',
+			'glitter',
+			'twinkle',
+			'celebration'
+		],
+		categories: ['shapes']
+	},
 	{
 		name: 'sparkles',
 		icon: sparkles,
@@ -5589,6 +5621,12 @@ let ICONS_LIST = [
 		tags: ['file'],
 		categories: ['arrows', 'files']
 	},
+	{
+		name: 'user',
+		icon: user,
+		tags: ['person', 'account', 'contact'],
+		categories: ['account']
+	},
 	{
 		name: 'user-check',
 		icon: userCheck,

package/dist/icons/play.svelte

@@ -0,0 +1,62 @@
+<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;
+	}
+
+	function handleMouseLeave() {
+		isHovered = false;
+	}
+</script>
+
+<div
+	class={className}
+	aria-label="play"
+	role="img"
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+>
+	<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"
+	>
+		<polygon points="6 3 20 12 6 21 6 3" class:animate={isHovered} />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	polygon {
+		transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+	}
+
+	polygon.animate {
+		transform: translateX(3px);
+	}
+</style>

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

@@ -0,0 +1,19 @@
+export default Play;
+type Play = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Play: 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/icons/sparkle.svelte

@@ -0,0 +1,77 @@
+<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;
+		}, 600);
+	}
+</script>
+
+<div class={className} aria-label="sparkle" 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="sparkle-icon"
+		class:animate={isHovered}
+	>
+		<path
+			d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
+			class="sparkle-path"
+		/>
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.sparkle-icon {
+		overflow: visible;
+		transform-origin: center;
+	}
+
+	.sparkle-icon.animate {
+		animation: sparkleScale 0.6s ease-in-out forwards;
+	}
+
+	@keyframes sparkleScale {
+		0% {
+			transform: scale(1);
+		}
+		33% {
+			transform: scale(0.9);
+		}
+		66% {
+			transform: scale(1.2);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+</style>

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

@@ -0,0 +1,19 @@
+export default Sparkle;
+type Sparkle = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Sparkle: 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/icons/user.svelte

@@ -0,0 +1,95 @@
+<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;
+		}, 600);
+	}
+</script>
+
+<div class={className} aria-label="user" 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="user-icon"
+		class:animate={isHovered}
+	>
+		<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" class="user-path" />
+		<circle cx="12" cy="7" r="4" class="user-circle" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+
+	.user-path,
+	.user-circle {
+		transition: transform 0.6s ease-in-out;
+	}
+
+	.user-icon.animate .user-path {
+		animation: pathBounce 0.6s ease-in-out;
+	}
+
+	.user-icon.animate .user-circle {
+		animation: circleBounce 0.6s ease-in-out;
+	}
+
+	@keyframes pathBounce {
+		0% {
+			transform: translateY(0);
+		}
+		33% {
+			transform: translateY(2px);
+		}
+		66% {
+			transform: translateY(-2px);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes circleBounce {
+		0% {
+			transform: translateY(0);
+		}
+		33% {
+			transform: translateY(4px);
+		}
+		66% {
+			transform: translateY(-2px);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
+</style>

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

@@ -0,0 +1,19 @@
+export default User;
+type User = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const User: 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

@@ -246,6 +246,7 @@ export { default as GalleryHorizontalEnd } from "./icons/gallery-horizontal-end.
 export { default as GalleryHorizontal } from "./icons/gallery-horizontal.svelte";
 export { default as GalleryThumbnails } from "./icons/gallery-thumbnails.svelte";
 export { default as GalleryVerticalEnd } from "./icons/gallery-vertical-end.svelte";
+export { default as GalleryVertical } from "./icons/gallery-vertical.svelte";
 export { default as Gauge } from "./icons/gauge.svelte";
 export { default as Gavel } from "./icons/gavel.svelte";
 export { default as Grid2x2Check } from "./icons/grid-2x2-check.svelte";
@@ -361,6 +362,7 @@ export { default as PhoneOff } from "./icons/phone-off.svelte";
 export { default as Pickaxe } from "./icons/pickaxe.svelte";
 export { default as PinOff } from "./icons/pin-off.svelte";
 export { default as Plane } from "./icons/plane.svelte";
+export { default as Play } from "./icons/play.svelte";
 export { default as Plus } from "./icons/plus.svelte";
 export { default as PointerOff } from "./icons/pointer-off.svelte";
 export { default as PowerOff } from "./icons/power-off.svelte";
@@ -416,6 +418,7 @@ export { default as SlidersHorizontal } from "./icons/sliders-horizontal.svelte"
 export { default as SlidersVertical } from "./icons/sliders-vertical.svelte";
 export { default as SmartphoneNfc } from "./icons/smartphone-nfc.svelte";
 export { default as Snowflake } from "./icons/snowflake.svelte";
+export { default as Sparkle } from "./icons/sparkle.svelte";
 export { default as Sparkles } from "./icons/sparkles.svelte";
 export { default as Speech } from "./icons/speech.svelte";
 export { default as SpellCheck } from "./icons/spell-check.svelte";
@@ -483,6 +486,7 @@ export { default as UserPen } from "./icons/user-pen.svelte";
 export { default as UserRoundCheck } from "./icons/user-round-check.svelte";
 export { default as UserRoundCog } from "./icons/user-round-cog.svelte";
 export { default as UserRoundPen } from "./icons/user-round-pen.svelte";
+export { default as User } from "./icons/user.svelte";
 export { default as UsersRound } from "./icons/users-round.svelte";
 export { default as Users } from "./icons/users.svelte";
 export { default as Vault } from "./icons/vault.svelte";

package/dist/index.js

@@ -246,6 +246,7 @@ export { default as GalleryHorizontalEnd } from './icons/gallery-horizontal-end.
 export { default as GalleryHorizontal } from './icons/gallery-horizontal.svelte';
 export { default as GalleryThumbnails } from './icons/gallery-thumbnails.svelte';
 export { default as GalleryVerticalEnd } from './icons/gallery-vertical-end.svelte';
+export { default as GalleryVertical } from './icons/gallery-vertical.svelte';
 export { default as Gauge } from './icons/gauge.svelte';
 export { default as Gavel } from './icons/gavel.svelte';
 export { default as Grid2x2Check } from './icons/grid-2x2-check.svelte';
@@ -361,6 +362,7 @@ export { default as PhoneOff } from './icons/phone-off.svelte';
 export { default as Pickaxe } from './icons/pickaxe.svelte';
 export { default as PinOff } from './icons/pin-off.svelte';
 export { default as Plane } from './icons/plane.svelte';
+export { default as Play } from './icons/play.svelte';
 export { default as Plus } from './icons/plus.svelte';
 export { default as PointerOff } from './icons/pointer-off.svelte';
 export { default as PowerOff } from './icons/power-off.svelte';
@@ -416,6 +418,7 @@ export { default as SlidersHorizontal } from './icons/sliders-horizontal.svelte'
 export { default as SlidersVertical } from './icons/sliders-vertical.svelte';
 export { default as SmartphoneNfc } from './icons/smartphone-nfc.svelte';
 export { default as Snowflake } from './icons/snowflake.svelte';
+export { default as Sparkle } from './icons/sparkle.svelte';
 export { default as Sparkles } from './icons/sparkles.svelte';
 export { default as Speech } from './icons/speech.svelte';
 export { default as SpellCheck } from './icons/spell-check.svelte';
@@ -483,6 +486,7 @@ export { default as UserPen } from './icons/user-pen.svelte';
 export { default as UserRoundCheck } from './icons/user-round-check.svelte';
 export { default as UserRoundCog } from './icons/user-round-cog.svelte';
 export { default as UserRoundPen } from './icons/user-round-pen.svelte';
+export { default as User } from './icons/user.svelte';
 export { default as UsersRound } from './icons/users-round.svelte';
 export { default as Users } from './icons/users.svelte';
 export { default as Vault } from './icons/vault.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@jis3r/icons",
-	"version": "1.20.0",
+	"version": "1.24.0",
 	"description": "beautifully crafted, moving icons. for svelte.",
 	"keywords": [
 		"svelte",