69 lines
1.6 KiB
Svelte
69 lines
1.6 KiB
Svelte
|
<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="telescope"
|
||
|
|
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="telescope-icon" class:animate={isHovered}>
|
||
|
|
<path d="m10.065 12.493-6.18 1.318a.934.934 0 0 1-1.108-.702l-.537-2.15a1.07 1.07 0 0 1 .691-1.265l13.504-4.44" />
|
||
|
|
<path d="m13.56 11.747 4.332-.924" />
|
||
|
|
<path
|
||
|
|
d="M16.485 5.94a2 2 0 0 1 1.455-2.425l1.09-.272a1 1 0 0 1 1.212.727l1.515 6.06a1 1 0 0 1-.727 1.213l-1.09.272a2 2 0 0 1-2.425-1.455z"
|
||
|
|
/>
|
||
|
|
<path d="m6.158 8.633 1.114 4.456" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<path d="m16 21-3.105-6.21" />
|
||
|
|
<path d="m8 21 3.105-6.21" />
|
||
|
|
<circle cx="12" cy="13" r="2" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
div {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.telescope-icon {
|
||
|
|
transform-origin: center;
|
||
|
|
transition: transform 0.3s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.telescope-icon.animate {
|
||
|
|
transform: rotate(-15deg);
|
||
|
|
}
|
||
|
|
</style>
|