@jis3r/icons 1.15.0 → 1.16.0

package/dist/icons/accessibility.svelte

@@ -0,0 +1,132 @@
+<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) {
+			isHovered = true;
+			setTimeout(() => {
+				isHovered = false;
+			}, 1400);
+		}
+	}
+</script>
+
+<div class={className} aria-label="accessibility" 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="accessibility-icon"
+		class:animate={isHovered}
+	>
+		<circle cx="16" cy="4" r="1" class="accessibility-circle" />
+		<g class="accessibility-group1">
+			<path d="M18,19l1-7-6,1" />
+			<path d="M8,5l5.5,3-2.4,3.5" />
+			<path d="M8 5 L5 8" class="accessibility-path3" />
+		</g>
+		<g class="accessibility-group2">
+			<path d="M4.2,14.5c-.8,2.6.7,5.4,3.3,6.2,1.2.4,2.4.3,3.6-.2" />
+			<path d="M13.8,17.5c.8-2.6-.7-5.4-3.3-6.2-1.2-.4-2.4-.3-3.6.2" />
+		</g>
+		<path d="M13,13.1c-.5-.7-1.1-1.2-1.9-1.6" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.accessibility-icon {
+		overflow: visible;
+	}
+
+	.accessibility-circle {
+		transition: transform 0.3s ease;
+	}
+
+	.accessibility-group1 {
+		transform-origin: center;
+		transition: transform 0.3s ease;
+	}
+
+	.accessibility-group2 {
+		transform-origin: 9px 16px;
+		transition: transform 0.3s ease;
+	}
+
+	.accessibility-path3 {
+		transform-origin: 8px 5px;
+		transition: transform 0.3s ease;
+	}
+
+	.accessibility-icon.animate .accessibility-group1 {
+		animation: group1Rotate 0.8s ease-in-out;
+	}
+
+	.accessibility-icon.animate .accessibility-group2 {
+		animation: group2Rotate 1s ease-in-out 0.4s;
+	}
+
+	.accessibility-icon.animate .accessibility-path3 {
+		animation: path3Rotate 0.4s ease-in-out 0.2s;
+	}
+
+	@keyframes group1Rotate {
+		0% {
+			transform: rotate(0deg);
+		}
+		25% {
+			transform: rotate(5deg);
+		}
+		50% {
+			transform: rotate(-5deg);
+		}
+		100% {
+			transform: rotate(0deg);
+		}
+	}
+
+	@keyframes group2Rotate {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes path3Rotate {
+		0% {
+			transform: rotate(0deg);
+		}
+		50% {
+			transform: rotate(-60deg);
+		}
+		100% {
+			transform: rotate(0deg);
+		}
+	}
+</style>

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

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

@@ -1,3 +1,4 @@
+import accessibility from './accessibility.svelte';
 import activity from './activity.svelte';
 import airplay from './airplay.svelte';
 import alarmClock from './alarm-clock.svelte';
@@ -501,6 +502,12 @@ import x from './x.svelte';
 import zapOff from './zap-off.svelte';
 
 let ICONS_LIST = [
+	{
+		name: 'accessibility',
+		icon: accessibility,
+		tags: ['disability', 'disabled', 'dda', 'wheelchair'],
+		categories: ['accessibility', 'medical']
+	},
 	{
 		name: 'activity',
 		icon: activity,

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { default as Accessibility } from "./icons/accessibility.svelte";
 export { default as Activity } from "./icons/activity.svelte";
 export { default as Airplay } from "./icons/airplay.svelte";
 export { default as AlarmClockCheck } from "./icons/alarm-clock-check.svelte";

package/dist/index.js

@@ -1,3 +1,4 @@
+export { default as Accessibility } from './icons/accessibility.svelte';
 export { default as Activity } from './icons/activity.svelte';
 export { default as Airplay } from './icons/airplay.svelte';
 export { default as AlarmClockCheck } from './icons/alarm-clock-check.svelte';

package/package.json

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