@jis3r/icons 1.0.0

package/dist/icons/cloud-upload.svelte

@@ -0,0 +1,67 @@
+<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="cloud-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"
+	>
+		<g class:animate={isHovered}>
+			<path d="M12 13v8" />
+			<path d="m8 17 4-4 4 4" />
+		</g>
+		<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	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/cloud-upload.svelte.d.ts

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

package/dist/icons/cog.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;
+	}
+
+	function handleMouseLeave() {
+		isHovered = false;
+	}
+</script>
+
+<div
+	class={className}
+	aria-label="cog"
+	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"
+		class="cog-icon"
+		class:animate={isHovered}
+	>
+		<path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" />
+		<path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
+		<path d="M12 2v2" />
+		<path d="M12 22v-2" />
+		<path d="m17 20.66-1-1.73" />
+		<path d="M11 10.27 7 3.34" />
+		<path d="m20.66 17-1.73-1" />
+		<path d="m3.34 7 1.73 1" />
+		<path d="M14 12h8" />
+		<path d="M2 12h2" />
+		<path d="m20.66 7-1.73 1" />
+		<path d="m3.34 17 1.73-1" />
+		<path d="m17 3.34-1 1.73" />
+		<path d="m11 13.73-4 6.93" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.cog-icon {
+		transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+	}
+
+	.cog-icon.animate {
+		transform: rotate(180deg);
+	}
+</style>

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

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

package/dist/icons/compass.svelte

@@ -0,0 +1,68 @@
+<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="compass"
+	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"
+		class="compass-icon"
+	>
+		<circle cx="12" cy="12" r="10" />
+		<polygon
+			points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"
+			class:animate={isHovered}
+		/>
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.compass-icon polygon {
+		transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+		transform-origin: center;
+	}
+
+	.compass-icon polygon.animate {
+		transform: rotate(360deg);
+	}
+</style>

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

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

package/dist/icons/contrast.svelte

@@ -0,0 +1,71 @@
+<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="contrast"
+	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"
+		class="contrast-icon"
+		class:animate={isHovered}
+	>
+		<circle cx="12" cy="12" r="10" />
+		<path class="right" d="M12 18a6 6 0 0 0 0-12v12z" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.contrast-icon {
+		overflow: visible;
+	}
+
+	.right {
+		transition: transform 0.3s ease;
+		transform-origin: center;
+	}
+
+	/* Hover state */
+	.contrast-icon.animate .right {
+		transform: rotate(-180deg);
+	}
+</style>

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

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

package/dist/icons/copy-check.svelte

@@ -0,0 +1,79 @@
+<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;
+		}, 500);
+	}
+</script>
+
+<div class={className} aria-label="copy-check" 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="copy-check-icon"
+		class:animate={isHovered}
+	>
+		<path d="m12 15 2 2 4-4" class="check-path" />
+		<rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+		<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.copy-check-icon {
+		overflow: visible;
+	}
+	.check-path {
+		stroke-dasharray: 9;
+		stroke-dashoffset: 0;
+		transition:
+			stroke-dashoffset 0.125s ease-out,
+			opacity 0.125s ease-out;
+	}
+	.copy-check-icon.animate .check-path {
+		animation: checkAnimation 0.5s ease-out backwards;
+	}
+	@keyframes checkAnimation {
+		0% {
+			stroke-dashoffset: 9;
+			opacity: 0;
+		}
+		33% {
+			stroke-dashoffset: 9;
+			opacity: 0;
+		}
+		100% {
+			stroke-dashoffset: 0;
+			opacity: 1;
+		}
+	}
+</style>

package/dist/icons/copy-check.svelte.d.ts

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

package/dist/icons/copy.svelte

@@ -0,0 +1,85 @@
+<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="copy"
+	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"
+	>
+		<rect
+			width="14"
+			height="14"
+			x="8"
+			y="8"
+			rx="2"
+			ry="2"
+			class="copy-rect"
+			class:animate={isHovered}
+		/>
+		<path
+			d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+			class="copy-path"
+			class:animate={isHovered}
+		/>
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.copy-rect,
+	.copy-path {
+		transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+	}
+
+	.copy-rect.animate {
+		transform: translate(-3px, -3px);
+	}
+
+	.copy-path.animate {
+		transform: translate(3px, 3px);
+	}
+
+	svg {
+		overflow: visible;
+	}
+</style>

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

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

package/dist/icons/cpu.svelte

@@ -0,0 +1,109 @@
+<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;
+		}, 1000);
+	}
+</script>
+
+<div class={className} aria-label="cpu" 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="cpu-icon"
+		class:animate={isHovered}
+	>
+		<rect width="16" height="16" x="4" y="4" rx="2" />
+		<rect width="6" height="6" x="9" y="9" rx="1" />
+		<path d="M15 2v2" class="vertical-line" />
+		<path d="M15 20v2" class="vertical-line" />
+		<path d="M2 15h2" class="horizontal-line" />
+		<path d="M2 9h2" class="horizontal-line" />
+		<path d="M20 15h2" class="horizontal-line" />
+		<path d="M20 9h2" class="horizontal-line" />
+		<path d="M9 2v2" class="vertical-line" />
+		<path d="M9 20v2" class="vertical-line" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.cpu-icon {
+		overflow: visible;
+	}
+
+	.vertical-line,
+	.horizontal-line {
+		transition:
+			transform 0.5s ease-in-out,
+			opacity 0.5s ease-in-out;
+		transform-origin: center;
+	}
+
+	.animate .vertical-line {
+		animation: scaleYAnimation 0.5s ease-in-out 2;
+	}
+
+	.animate .horizontal-line {
+		animation: scaleXAnimation 0.5s ease-in-out 2;
+	}
+
+	@keyframes scaleYAnimation {
+		0% {
+			transform: scaleY(1);
+			opacity: 1;
+		}
+		50% {
+			transform: scaleY(1.1);
+			opacity: 0.8;
+		}
+		100% {
+			transform: scaleY(1);
+			opacity: 1;
+		}
+	}
+
+	@keyframes scaleXAnimation {
+		0% {
+			transform: scaleX(1);
+			opacity: 1;
+		}
+		50% {
+			transform: scaleX(1.1);
+			opacity: 0.8;
+		}
+		100% {
+			transform: scaleX(1);
+			opacity: 1;
+		}
+	}
+</style>