@jis3r/icons 1.0.0

package/dist/icons/hard-drive-upload.svelte

@@ -0,0 +1,73 @@
+<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}
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+	aria-label="hard-drive-upload"
+	role="img"
+>
+	<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="hard-drive-upload"
+	>
+		<g class:animate={isHovered}>
+			<path d="m16 6-4-4-4 4" />
+			<path d="M12 2v8" />
+		</g>
+		<rect width="20" height="8" x="2" y="14" rx="2" />
+		<path d="M6 18h.01" />
+		<path d="M10 18h.01" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.hard-drive-upload {
+		overflow: visible;
+	}
+	g.animate path {
+		transform: translateY(-2px);
+		transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+	}
+	g path {
+		transform: translateY(0);
+		transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+	}
+</style>

package/dist/icons/hard-drive-upload.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  HardDriveUploadProps */
+/** @typedef {typeof __propDef.events}  HardDriveUploadEvents */
+/** @typedef {typeof __propDef.slots}  HardDriveUploadSlots */
+export default class HardDriveUpload extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type HardDriveUploadProps = typeof __propDef.props;
+export type HardDriveUploadEvents = typeof __propDef.events;
+export type HardDriveUploadSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/icons/headphone-off.svelte

@@ -0,0 +1,84 @@
+<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="headphone-off" 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="headphone-off"
+		class:animate={isHovered}
+	>
+		<path d="M21 14h-1.343" />
+		<path d="M9.128 3.47A9 9 0 0 1 21 12v3.343" />
+		<path d="m2 2 20 20" />
+		<path d="M20.414 20.414A2 2 0 0 1 19 21h-1a2 2 0 0 1-2-2v-3" />
+		<path d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 2.636-6.364" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.headphone-off {
+		overflow: visible;
+		transform: translateX(0);
+		transition: transform 0.6s ease-in-out;
+	}
+
+	.headphone-off.animate {
+		animation: groupShake 0.6s ease-in-out;
+	}
+
+	@keyframes groupShake {
+		0% {
+			transform: translateX(0);
+		}
+		16.67% {
+			transform: translateX(-7%);
+		}
+		33.33% {
+			transform: translateX(7%);
+		}
+		50% {
+			transform: translateX(-7%);
+		}
+		66.67% {
+			transform: translateX(7%);
+		}
+		100% {
+			transform: translateX(0);
+		}
+	}
+</style>

package/dist/icons/headphone-off.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  HeadphoneOffProps */
+/** @typedef {typeof __propDef.events}  HeadphoneOffEvents */
+/** @typedef {typeof __propDef.slots}  HeadphoneOffSlots */
+export default class HeadphoneOff extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type HeadphoneOffProps = typeof __propDef.props;
+export type HeadphoneOffEvents = typeof __propDef.events;
+export type HeadphoneOffSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/icons/heart-off.svelte

@@ -0,0 +1,88 @@
+<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="heart-off" 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="heart-off"
+		class:animate={isHovered}
+	>
+		<path d="M2 2l20 20" />
+		<path d="M16.5 16.5 12 21l-7-7c-1.5-1.45-3-3.2-3-5.5a5.5 5.5 0 0 1 2.14-4.35" />
+		<path
+			d="M8.76 3.1c1.15.22 2.13.78 3.24 1.9 1.5-1.5 2.74-2 4.5-2A5.5 5.5 0 0 1 22 8.5c0 2.12-1.3 3.78-2.67 5.17"
+		/>
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.heart-off {
+		overflow: visible;
+	}
+
+	.heart-off {
+		overflow: visible;
+		transform: translateX(0);
+		transition: transform 0.6s ease-in-out;
+	}
+
+	.heart-off.animate {
+		animation: groupShake 0.6s ease-in-out;
+	}
+
+	@keyframes groupShake {
+		0% {
+			transform: translateX(0);
+		}
+		16.67% {
+			transform: translateX(-7%);
+		}
+		33.33% {
+			transform: translateX(7%);
+		}
+		50% {
+			transform: translateX(-7%);
+		}
+		66.67% {
+			transform: translateX(7%);
+		}
+		100% {
+			transform: translateX(0);
+		}
+	}
+</style>

package/dist/icons/heart-off.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  HeartOffProps */
+/** @typedef {typeof __propDef.events}  HeartOffEvents */
+/** @typedef {typeof __propDef.slots}  HeartOffSlots */
+export default class HeartOff extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type HeartOffProps = typeof __propDef.props;
+export type HeartOffEvents = typeof __propDef.events;
+export type HeartOffSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/icons/heart.svelte

@@ -0,0 +1,89 @@
+<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;
+		}, 1200);
+	}
+</script>
+
+<div class={className} aria-label="heart" 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="heart-icon"
+		class:animate={isHovered}
+	>
+		<path
+			d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
+			class="heart-path"
+		/>
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.heart-icon {
+		overflow: visible;
+	}
+
+	.heart-path {
+		transform-origin: center;
+		transition: transform 0.3s ease;
+	}
+
+	.heart-icon.animate .heart-path {
+		animation: heartBeat 1.2s ease-in-out;
+	}
+
+	@keyframes heartBeat {
+		0% {
+			transform: scale(1);
+		}
+		16.67% {
+			transform: scale(1.1);
+		}
+		33.33% {
+			transform: scale(1);
+		}
+		50% {
+			transform: scale(1.1);
+		}
+		66.67% {
+			transform: scale(1);
+		}
+		83.33% {
+			transform: scale(1.1);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+</style>

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  HeartProps */
+/** @typedef {typeof __propDef.events}  HeartEvents */
+/** @typedef {typeof __propDef.slots}  HeartSlots */
+export default class Heart extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type HeartProps = typeof __propDef.props;
+export type HeartEvents = typeof __propDef.events;
+export type HeartSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/icons/history.svelte

@@ -0,0 +1,86 @@
+<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="history"
+	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"
+	>
+		<g class="arrow" class:animate={isHovered}>
+			<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+			<path d="M3 3v5h5" />
+		</g>
+		<line x1="12" y1="12" x2="12" y2="7" class="hour-hand" class:animate={isHovered} />
+		<line x1="12" y1="12" x2="16" y2="14" class="minute-hand" class:animate={isHovered} />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.arrow {
+		transform-origin: center;
+		transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.arrow.animate {
+		transform: rotate(-50deg);
+	}
+
+	.hour-hand {
+		transform-origin: 50% 50%;
+		transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.hour-hand.animate {
+		transform: rotate(-360deg);
+	}
+
+	.minute-hand {
+		transform-origin: 50% 50%;
+		transition: transform 0.5s ease-in-out;
+	}
+
+	.minute-hand.animate {
+		transform: rotate(-45deg);
+	}
+</style>

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  HistoryProps */
+/** @typedef {typeof __propDef.events}  HistoryEvents */
+/** @typedef {typeof __propDef.slots}  HistorySlots */
+export default class History extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type HistoryProps = typeof __propDef.props;
+export type HistoryEvents = typeof __propDef.events;
+export type HistorySlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/icons/hop-off.svelte

@@ -0,0 +1,97 @@
+<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="hop-off" 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="hop-off"
+		class:animate={isHovered}
+	>
+		<path d="M10.82 16.12c1.69.6 3.91.79 5.18.85.28.01.53-.09.7-.27" />
+		<path d="M11.14 20.57c.52.24 2.44 1.12 4.08 1.37.46.06.86-.25.9-.71.12-1.52-.3-3.43-.5-4.28" />
+		<path d="M16.13 21.05c1.65.63 3.68.84 4.87.91a.9.9 0 0 0 .7-.26" />
+		<path d="M17.99 5.52a20.83 20.83 0 0 1 3.15 4.5.8.8 0 0 1-.68 1.13c-1.17.1-2.5.02-3.9-.25" />
+		<path d="M20.57 11.14c.24.52 1.12 2.44 1.37 4.08.04.3-.08.59-.31.75" />
+		<path
+			d="M4.93 4.93a10 10 0 0 0-.67 13.4c.35.43.96.4 1.17-.12.69-1.71 1.07-5.07 1.07-6.71 1.34.45 3.1.9 4.88.62a.85.85 0 0 0 .48-.24"
+		/>
+		<path
+			d="M5.52 17.99c1.05.95 2.91 2.42 4.5 3.15a.8.8 0 0 0 1.13-.68c.2-2.34-.33-5.3-1.57-8.28"
+		/>
+		<path d="M8.35 2.68a10 10 0 0 1 9.98 1.58c.43.35.4.96-.12 1.17-1.5.6-4.3.98-6.07 1.05" />
+		<path d="M2 2L22 22" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.hop-off {
+		overflow: visible;
+	}
+
+	.hop-off {
+		overflow: visible;
+		transform: translateX(0);
+		transition: transform 0.6s ease-in-out;
+	}
+
+	.hop-off.animate {
+		animation: groupShake 0.6s ease-in-out;
+	}
+
+	@keyframes groupShake {
+		0% {
+			transform: translateX(0);
+		}
+		16.67% {
+			transform: translateX(-7%);
+		}
+		33.33% {
+			transform: translateX(7%);
+		}
+		50% {
+			transform: translateX(-7%);
+		}
+		66.67% {
+			transform: translateX(7%);
+		}
+		100% {
+			transform: translateX(0);
+		}
+	}
+</style>

package/dist/icons/hop-off.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  HopOffProps */
+/** @typedef {typeof __propDef.events}  HopOffEvents */
+/** @typedef {typeof __propDef.slots}  HopOffSlots */
+export default class HopOff extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type HopOffProps = typeof __propDef.props;
+export type HopOffEvents = typeof __propDef.events;
+export type HopOffSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};