@selemondev/svgl-svelte 0.0.2 → 2.0.0

package/dist/components/GoogleClassroom.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 578.9 500" xml:space="preserve" width="${width}" height="${height}" ${restAttrs}><path fill="#0F9D58" d="M52.6 52.6h473.7v394.7H52.6V52.6z"/><path fill="#57BB8A" d="M394.7 263.2c16.4 0 29.6-13.3 29.6-29.6S411 204 394.7 204s-29.6 13.3-29.6 29.6 13.3 29.6 29.6 29.6zm0 19.7c-31.7 0-65.8 16.8-65.8 37.6v21.6h131.6v-21.6c0-20.8-34.1-37.6-65.8-37.6zm-210.5-19.7c16.4 0 29.6-13.3 29.6-29.6S200.5 204 184.2 204s-29.6 13.3-29.6 29.6 13.3 29.6 29.6 29.6zm0 19.7c-31.7 0-65.8 16.8-65.8 37.6v21.6H250v-21.6c0-20.8-34.1-37.6-65.8-37.6z"/><path fill="#F7F7F7" d="M289.5 236.8c21.8 0 39.5-17.7 39.4-39.5 0-21.8-17.7-39.5-39.5-39.4-21.8 0-39.4 17.7-39.4 39.5s17.7 39.4 39.5 39.4zm0 26.4c-44.4 0-92.1 23.6-92.1 52.6v26.3h184.2v-26.3c0-29.1-47.7-52.6-92.1-52.6z"/><path fill="#F1F1F1" d="M342.1 421.1h118.4v26.3H342.1v-26.3z"/><path fill="#F4B400" d="M539.5 0h-500C17.7 0 0 17.7 0 39.5v421.1C0 482.3 17.7 500 39.5 500h500c21.8 0 39.5-17.7 39.5-39.5v-421C578.9 17.7 561.3 0 539.5 0zm-13.2 447.4H52.6V52.6h473.7v394.8z"/><path opacity=".2" fill="#FFF" d="M539.5 0h-500C17.7 0 0 17.7 0 39.5v3.3C0 21 17.7 3.3 39.5 3.3h500C561.3 3.3 579 21 579 42.8v-3.3C578.9 17.7 561.3 0 539.5 0z"/><path opacity=".2" fill="#BF360C" d="M539.5 496.7h-500C17.7 496.7 0 479 0 457.2v3.3C0 482.3 17.7 500 39.5 500h500c21.8 0 39.5-17.7 39.5-39.5v-3.3c-.1 21.8-17.7 39.5-39.5 39.5z"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="154.865" y1="295.747" x2="154.865" y2="282.634" gradientTransform="matrix(12.992 0 0 -4 -1584.623 1631.087)"><stop offset="0" style="stop-color:#bf360c;stop-opacity:.2"/><stop offset="1" style="stop-color:#bf360c;stop-opacity:2.000000e-02"/></linearGradient><path fill="url(#a)" d="M460.3 447.4H341.9l52.6 52.6h118.3l-52.5-52.6z"/><path opacity=".2" fill="#263238" d="M52.6 49.3h473.7v3.3H52.6v-3.3z"/><path opacity=".2" fill="#FFF" d="M52.6 447.4h473.7v3.3H52.6v-3.3z"/><radialGradient id="b" cx="131.401" cy="367.2" r="18.197" gradientTransform="matrix(38.0002 0 0 -38 -4973.328 13965.323)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#fff;stop-opacity:.1"/><stop offset="1" style="stop-color:#fff;stop-opacity:0"/></radialGradient><path fill="url(#b)" d="M539.5 0h-500C17.7 0 0 17.7 0 39.5v421.1C0 482.3 17.7 500 39.5 500h500c21.8 0 39.5-17.7 39.5-39.5v-421C578.9 17.7 561.3 0 539.5 0z"/></svg>`;
+</script>
+
+{@html svgContent}

package/dist/components/GoogleCloud.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 -25 256 256" width="${width}" height="${height}" ${restAttrs}><path fill="#EA4335" d="m170.252 56.819 22.253-22.253 1.483-9.37C153.437-11.677 88.976-7.496 52.42 33.92 42.267 45.423 34.734 59.764 30.717 74.573l7.97-1.123 44.505-7.34 3.436-3.513c19.797-21.742 53.27-24.667 76.128-6.168l7.496.39Z"/><path fill="#4285F4" d="M224.205 73.918a100.249 100.249 0 0 0-30.217-48.722l-31.232 31.232a55.515 55.515 0 0 1 20.379 44.037v5.544c15.35 0 27.797 12.445 27.797 27.796 0 15.352-12.446 27.485-27.797 27.485h-55.671l-5.466 5.934v33.34l5.466 5.231h55.67c39.93.311 72.553-31.494 72.864-71.424a72.303 72.303 0 0 0-31.793-60.453"/><path fill="#34A853" d="M71.87 205.796h55.593V161.29H71.87a27.275 27.275 0 0 1-11.399-2.498l-7.887 2.42-22.409 22.253-1.952 7.574c12.567 9.489 27.9 14.825 43.647 14.757"/><path fill="#FBBC05" d="M71.87 61.425C31.94 61.664-.237 94.228.001 134.159a72.301 72.301 0 0 0 28.222 56.88l32.248-32.246c-13.99-6.322-20.208-22.786-13.887-36.776 6.32-13.99 22.786-20.208 36.775-13.888a27.796 27.796 0 0 1 13.887 13.888l32.248-32.248A72.224 72.224 0 0 0 71.87 61.425"/></svg>`;
+</script>
+
+{@html svgContent}

package/dist/components/GoogleColaboratory.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" style="pointer-events:none;display:block;width:100%;height:100%" viewBox="0 0 24 24" width="${width}" height="${height}"><path fill="#E8710A" d="M4.54 9.46 2.19 7.1a6.93 6.93 0 0 0 0 9.79l2.36-2.36a3.59 3.59 0 0 1-.01-5.07Z"/><path fill="#F9AB00" d="m2.19 7.1 2.35 2.36a3.59 3.59 0 0 1 5.08 0l1.71-2.93-.1-.08a6.93 6.93 0 0 0-9.04.65ZM11.34 17.46l-1.72-2.92a3.59 3.59 0 0 1-5.08 0L2.19 16.9a6.93 6.93 0 0 0 9 .65l.11-.09M12 7.1a6.93 6.93 0 0 0 0 9.79l2.36-2.36a3.59 3.59 0 1 1 5.08-5.08l2.37-2.35a6.93 6.93 0 0 0-9.81 0Z"/><path fill="#E8710A" d="m21.81 7.1-2.35 2.36a3.59 3.59 0 0 1-5.08 5.08L12 16.9a6.93 6.93 0 0 0 9.81-9.8Z"/></svg>`;
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" style="pointer-events:none;display:block;width:100%;height:100%" viewBox="0 0 24 24" width="${width}" height="${height}" ${restAttrs}><path fill="#E8710A" d="M4.54 9.46 2.19 7.1a6.93 6.93 0 0 0 0 9.79l2.36-2.36a3.59 3.59 0 0 1-.01-5.07Z"/><path fill="#F9AB00" d="m2.19 7.1 2.35 2.36a3.59 3.59 0 0 1 5.08 0l1.71-2.93-.1-.08a6.93 6.93 0 0 0-9.04.65ZM11.34 17.46l-1.72-2.92a3.59 3.59 0 0 1-5.08 0L2.19 16.9a6.93 6.93 0 0 0 9 .65l.11-.09M12 7.1a6.93 6.93 0 0 0 0 9.79l2.36-2.36a3.59 3.59 0 1 1 5.08-5.08l2.37-2.35a6.93 6.93 0 0 0-9.81 0Z"/><path fill="#E8710A" d="m21.81 7.1-2.35 2.36a3.59 3.59 0 0 1-5.08 5.08L12 16.9a6.93 6.93 0 0 0 9.81-9.8Z"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/GoogleDrive.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.3 78" width="${width}" height="${height}">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.3 78" width="${width}" height="${height}" ${restAttrs}>
   <path fill="#0066da" d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3L27.5 53H0c0 1.55.4 3.1 1.2 4.5z"/>
   <path fill="#00ac47" d="M43.65 25 29.9 1.2c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44A9.06 9.06 0 0 0 0 53h27.5z"/>
   <path fill="#ea4335" d="M73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75L86.1 57.5c.8-1.4 1.2-2.95 1.2-4.5H59.798l5.852 11.5z"/>

package/dist/components/GoogleIdx.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-8" width="${width}" height="${height}"> <rect x="28" y="156" width="88" height="24" rx="12" fill="#8964e8">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-8" width="${width}" height="${height}" ${restAttrs}> <rect x="28" y="156" width="88" height="24" rx="12" fill="#8964e8">
 </rect> <rect x="104" y="120" width="36" height="24" rx="12" fill="#17b877">
 </rect> <rect x="56" y="120" width="36" height="24" rx="12" fill="#17b877">
 </rect> <rect x="84" y="84" width="52" height="24" rx="12" fill="#ffa23e">

package/dist/components/GoogleMaps.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92.3 132.3" width="${width}" height="${height}" ${restAttrs}><path fill="#1a73e8" d="M60.2 2.2C55.8.8 51 0 46.1 0 32 0 19.3 6.4 10.8 16.5l21.8 18.3L60.2 2.2z"/><path fill="#ea4335" d="M10.8 16.5C4.1 24.5 0 34.9 0 46.1c0 8.7 1.7 15.7 4.6 22l28-33.3-21.8-18.3z"/><path fill="#4285f4" d="M46.2 28.5c9.8 0 17.7 7.9 17.7 17.7 0 4.3-1.6 8.3-4.2 11.4 0 0 13.9-16.6 27.5-32.7-5.6-10.8-15.3-19-27-22.7L32.6 34.8c3.3-3.8 8.1-6.3 13.6-6.3"/><path fill="#fbbc04" d="M46.2 63.8c-9.8 0-17.7-7.9-17.7-17.7 0-4.3 1.5-8.3 4.1-11.3l-28 33.3c4.8 10.6 12.8 19.2 21 29.9l34.1-40.5c-3.3 3.9-8.1 6.3-13.5 6.3"/><path fill="#34a853" d="M59.1 109.2c15.4-24.1 33.3-35 33.3-63 0-7.7-1.9-14.9-5.2-21.3L25.6 98c2.6 3.4 5.3 7.3 7.9 11.3 9.4 14.5 6.8 23.1 12.8 23.1s3.4-8.7 12.8-23.2"/></svg>`;
+</script>
+
+{@html svgContent}

package/dist/components/GooglePaLM.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 229" width="${width}" height="${height}"><path fill="#F9AB00" d="M128 228.542c9.895 0 17.91-8.015 17.91-17.91V55.413h-35.82v155.219c0 9.895 8.015 17.91 17.91 17.91Z"/><path fill="#5BB974" d="M199.356 112.053C180.043 92.755 151.193 88.845 128 100.307l76.669 76.67c3.164 3.163 8.612 1.91 9.955-2.344 6.746-21.357 1.657-45.64-15.268-62.58Z"/><path fill="#129EAF" d="M56.644 112.053C75.957 92.755 104.807 88.845 128 100.307l-76.669 76.67c-3.164 3.163-8.612 1.91-9.955-2.344-6.746-21.357-1.657-45.64 15.268-62.58Z"/><path fill="#AF5CF7" d="M193.67 52.548c-30.507 0-56.402 20-65.67 47.76h121.25c4.97 0 8.283-5.254 6.03-9.687-11.523-22.611-34.776-38.073-61.61-38.073Z"/><path fill="#FF8BCB" d="M140.671 20.101C119.09 41.682 114.926 74.114 128 100.307l85.743-85.743c3.523-3.522 2.15-9.582-2.582-11.119-24.148-7.836-51.52-2.313-70.49 16.656Z"/><path fill="#FA7B17" d="M115.329 20.101C136.91 41.682 141.074 74.114 128 100.307L42.257 14.564c-3.523-3.522-2.15-9.582 2.582-11.119 24.148-7.836 51.52-2.313 70.49 16.656Z"/><path fill="#4285F4" d="M62.33 52.548c30.507 0 56.402 20 65.67 47.76H6.75c-4.97 0-8.283-5.254-6.03-9.687C12.244 68.01 35.497 52.548 62.33 52.548Z"/></svg>`;
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 229" width="${width}" height="${height}" ${restAttrs}><path fill="#F9AB00" d="M128 228.542c9.895 0 17.91-8.015 17.91-17.91V55.413h-35.82v155.219c0 9.895 8.015 17.91 17.91 17.91Z"/><path fill="#5BB974" d="M199.356 112.053C180.043 92.755 151.193 88.845 128 100.307l76.669 76.67c3.164 3.163 8.612 1.91 9.955-2.344 6.746-21.357 1.657-45.64-15.268-62.58Z"/><path fill="#129EAF" d="M56.644 112.053C75.957 92.755 104.807 88.845 128 100.307l-76.669 76.67c-3.164 3.163-8.612 1.91-9.955-2.344-6.746-21.357-1.657-45.64 15.268-62.58Z"/><path fill="#AF5CF7" d="M193.67 52.548c-30.507 0-56.402 20-65.67 47.76h121.25c4.97 0 8.283-5.254 6.03-9.687-11.523-22.611-34.776-38.073-61.61-38.073Z"/><path fill="#FF8BCB" d="M140.671 20.101C119.09 41.682 114.926 74.114 128 100.307l85.743-85.743c3.523-3.522 2.15-9.582-2.582-11.119-24.148-7.836-51.52-2.313-70.49 16.656Z"/><path fill="#FA7B17" d="M115.329 20.101C136.91 41.682 141.074 74.114 128 100.307L42.257 14.564c-3.523-3.522-2.15-9.582 2.582-11.119 24.148-7.836 51.52-2.313 70.49 16.656Z"/><path fill="#4285F4" d="M62.33 52.548c30.507 0 56.402 20 65.67 47.76H6.75c-4.97 0-8.283-5.254-6.03-9.687C12.244 68.01 35.497 52.548 62.33 52.548Z"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/GooglePlay.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 466 511.98" width="${width}" height="${height}" ${restAttrs}><g fill-rule="nonzero"><path fill="#EA4335" d="M199.9 237.8 1.4 470.17c7.22 24.57 30.16 41.81 55.8 41.81 11.16 0 20.93-2.79 29.3-8.37l244.16-139.46L199.9 237.8z"/><path fill="#FBBC04" d="m433.91 205.1-104.65-60-111.61 110.22 113.01 108.83 104.64-58.6c18.14-9.77 30.7-29.3 30.7-50.23-1.4-20.93-13.95-40.46-32.09-50.22z"/><path fill="#34A853" d="M199.42 273.45 329.27 145.1 87.9 8.37C79.53 2.79 68.36 0 57.2 0 30.7 0 6.98 18.14 1.4 41.86l198.02 231.59z"/><path fill="#4285F4" d="M1.39 41.86C0 46.04 0 51.63 0 57.2v397.64c0 5.57 0 9.76 1.4 15.34l216.27-214.86L1.39 41.86z"/></g></svg>`;
+</script>
+
+{@html svgContent}

package/dist/components/Gradio.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 224" width="${width}" height="${height}"><defs><linearGradient id="a" x1="-6.452%" x2="85.236%" y1="49.784%" y2="49.784%"><stop offset="0%" stop-color="#F9D100"/><stop offset="100%" stop-color="#F97700"/></linearGradient><linearGradient id="b" x1="106.079%" x2="14.268%" y1="49.784%" y2="49.784%"><stop offset="0%" stop-color="#F9D100"/><stop offset="100%" stop-color="#F97700"/></linearGradient><linearGradient id="c" x1="-12.871%" x2="169.796%" y1="75.863%" y2="74.878%"><stop offset="0%" stop-color="#F9D100"/><stop offset="100%" stop-color="#F97700"/></linearGradient></defs><path fill="url(#a)" d="M119.871 64.78a16.346 16.346 0 0 1 16.258 0l111.654 64c10.956 6.28 10.956 22.083 0 28.363l-111.654 64a16.346 16.346 0 0 1-16.258 0l-111.654-64c-10.956-6.28-10.956-22.083 0-28.364l111.654-64Zm8.126 33.014-78.783 45.164 78.783 45.155 78.784-45.155-78.784-45.164Z"/><path fill="url(#b)" d="M119.871 2.165a16.346 16.346 0 0 1 16.258 0l111.654 64c10.956 6.28 10.956 22.083 0 28.363l-111.654 64a16.346 16.346 0 0 1-16.258 0l-111.654-64c-10.956-6.28-10.956-22.083 0-28.363l111.654-64Zm8.126 33.015L49.214 80.343l78.783 45.156 78.784-45.156-78.784-45.163Z"/><path fill="url(#c)" d="m120.19 64.755 16.174 28.412-111.93 63.723-16.175-28.412z"/></svg>`;
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 224" width="${width}" height="${height}" ${restAttrs}><defs><linearGradient id="a" x1="-6.452%" x2="85.236%" y1="49.784%" y2="49.784%"><stop offset="0%" stop-color="#F9D100"/><stop offset="100%" stop-color="#F97700"/></linearGradient><linearGradient id="b" x1="106.079%" x2="14.268%" y1="49.784%" y2="49.784%"><stop offset="0%" stop-color="#F9D100"/><stop offset="100%" stop-color="#F97700"/></linearGradient><linearGradient id="c" x1="-12.871%" x2="169.796%" y1="75.863%" y2="74.878%"><stop offset="0%" stop-color="#F9D100"/><stop offset="100%" stop-color="#F97700"/></linearGradient></defs><path fill="url(#a)" d="M119.871 64.78a16.346 16.346 0 0 1 16.258 0l111.654 64c10.956 6.28 10.956 22.083 0 28.363l-111.654 64a16.346 16.346 0 0 1-16.258 0l-111.654-64c-10.956-6.28-10.956-22.083 0-28.364l111.654-64Zm8.126 33.014-78.783 45.164 78.783 45.155 78.784-45.155-78.784-45.164Z"/><path fill="url(#b)" d="M119.871 2.165a16.346 16.346 0 0 1 16.258 0l111.654 64c10.956 6.28 10.956 22.083 0 28.363l-111.654 64a16.346 16.346 0 0 1-16.258 0l-111.654-64c-10.956-6.28-10.956-22.083 0-28.363l111.654-64Zm8.126 33.015L49.214 80.343l78.783 45.156 78.784-45.156-78.784-45.163Z"/><path fill="url(#c)" d="m120.19 64.755 16.174 28.412-111.93 63.723-16.175-28.412z"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/Grafana.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 279" width="${width}" height="${height}"><defs><linearGradient id="a" x1="49.995%" x2="49.995%" y1="122.45%" y2="31.139%"><stop offset="0%" stop-color="#FFF100"/><stop offset="100%" stop-color="#F05A28"/></linearGradient></defs><path fill="url(#a)" d="M255.59 122.775c-.46-4.675-1.226-10.04-2.759-16.017a98.01 98.01 0 0 0-7.204-19.16 106.69 106.69 0 0 0-13.412-20.54c-2.222-2.681-4.675-5.287-7.28-7.816 3.908-15.558-4.752-29.046-4.752-29.046-14.945-.92-24.448 4.675-27.973 7.204-.613-.23-1.15-.537-1.763-.767-2.529-.996-5.135-1.992-7.894-2.835a130.374 130.374 0 0 0-8.277-2.3c-2.835-.69-5.67-1.226-8.583-1.686-.537-.076-.996-.153-1.533-.23C157.646 8.738 138.946 0 138.946 0c-20.922 13.258-24.831 31.805-24.831 31.805s-.077.383-.23 1.073c-1.15.307-2.299.69-3.449.996-1.609.46-3.218 1.073-4.751 1.686a123.11 123.11 0 0 0-4.752 1.916 117.205 117.205 0 0 0-9.35 4.599c-2.989 1.686-5.9 3.525-8.737 5.441l-.766-.307c-28.97-11.036-54.643 2.223-54.643 2.223-2.376 30.809 11.572 50.198 14.331 53.724-.69 1.916-1.303 3.832-1.916 5.748-2.146 6.974-3.755 14.101-4.751 21.535-.154 1.073-.307 2.146-.384 3.219C7.894 146.916 0 173.97 0 173.97c22.302 25.674 48.359 27.283 48.359 27.283l.077-.076c3.295 5.9 7.127 11.495 11.419 16.783a111.904 111.904 0 0 0 5.671 6.362c-8.124 23.298 1.15 42.61 1.15 42.61 24.83.92 41.155-10.882 44.603-13.564a84.473 84.473 0 0 0 7.511 2.222 109.703 109.703 0 0 0 23.298 3.449c1.916.076 3.909.153 5.825.076H150.672l1.226-.076v.076c11.726 16.708 32.265 19.084 32.265 19.084 14.638-15.405 15.48-30.733 15.48-34.028v-1.38c3.066-2.145 5.979-4.445 8.738-6.974 5.824-5.288 10.959-11.342 15.25-17.857l1.15-1.839c16.554.92 28.28-10.27 28.28-10.27-2.759-17.243-12.569-25.673-14.638-27.283 0 0-.077-.076-.23-.153-.153-.077-.153-.153-.153-.153-.077-.077-.23-.154-.383-.23.076-1.073.153-2.07.23-3.142.153-1.84.153-3.756.153-5.595v-2.913l-.077-1.149-.076-1.533c0-.536-.077-.996-.154-1.456-.076-.46-.076-.996-.153-1.456l-.153-1.456-.23-1.456c-.307-1.916-.613-3.756-1.073-5.672-1.763-7.433-4.675-14.484-8.43-20.845a70.373 70.373 0 0 0-14.025-16.707c-5.365-4.752-11.42-8.584-17.704-11.42-6.36-2.835-12.952-4.675-19.543-5.518-3.295-.46-6.59-.613-9.886-.536h-2.453l-1.226.077c-.46 0-.92.076-1.303.076a51.958 51.958 0 0 0-4.981.69c-6.591 1.226-12.799 3.602-18.24 6.897-5.441 3.296-10.193 7.358-14.025 11.956a54.7 54.7 0 0 0-8.89 15.021 52.857 52.857 0 0 0-3.525 16.094c-.077 1.303-.077 2.683-.077 3.986v.996l.077 1.073c.076.613.076 1.303.153 1.916.23 2.682.766 5.288 1.456 7.74 1.456 4.982 3.755 9.503 6.59 13.335 2.836 3.832 6.285 6.975 9.887 9.504 3.602 2.452 7.51 4.215 11.343 5.364 3.832 1.15 7.664 1.61 11.266 1.61H154.58c.23 0 .46 0 .689-.077.383 0 .766-.077 1.15-.077.076 0 .23 0 .306-.076l.383-.077c.23 0 .46-.076.69-.076.46-.077.843-.154 1.303-.23.46-.077.843-.154 1.226-.307.843-.153 1.61-.46 2.376-.69 1.533-.536 3.066-1.15 4.368-1.839 1.38-.69 2.606-1.533 3.832-2.3.307-.23.69-.459.997-.766 1.226-.996 1.456-2.835.46-4.061-.844-1.073-2.376-1.38-3.603-.69l-.92.46a24.914 24.914 0 0 1-3.295 1.38c-1.15.382-2.375.689-3.602.919-.613.076-1.226.153-1.916.23-.306 0-.613.076-.996.076h-1.84c-.383 0-.766 0-1.149-.076H154.58c-.153 0-.383 0-.536-.077-.383-.077-.69-.077-1.073-.153-2.836-.383-5.671-1.226-8.354-2.453a29.275 29.275 0 0 1-7.74-5.058c-2.376-2.146-4.445-4.675-6.055-7.587-1.61-2.912-2.759-6.131-3.295-9.503-.23-1.686-.383-3.449-.307-5.135 0-.46.077-.92.077-1.38v-.613c0-.23.077-.46.077-.69.076-.919.23-1.839.383-2.758 1.303-7.358 4.981-14.562 10.653-20.003 1.456-1.38 2.988-2.606 4.598-3.755a31.705 31.705 0 0 1 5.211-2.99 35.739 35.739 0 0 1 5.672-2.068c1.915-.537 3.908-.844 5.977-1.073.997-.077 1.993-.154 3.066-.154h2.376l.843.077c2.222.153 4.368.46 6.514.996 4.292.92 8.507 2.53 12.415 4.675 7.818 4.369 14.485 11.113 18.547 19.237 2.07 4.061 3.525 8.43 4.215 12.951.153 1.15.307 2.3.383 3.45l.077.842.077.843v3.296c0 .536-.077 1.456-.077 1.992-.077 1.227-.23 2.53-.383 3.756s-.383 2.452-.613 3.678a49.548 49.548 0 0 1-.843 3.602 64.129 64.129 0 0 1-2.3 7.128 62.417 62.417 0 0 1-7.204 13.105c-5.9 8.124-13.948 14.715-23.144 18.93-4.599 2.069-9.427 3.602-14.408 4.368-2.453.46-4.982.69-7.511.766h-3.832a36.08 36.08 0 0 1-4.062-.23c-5.365-.383-10.653-1.379-15.864-2.835-5.135-1.456-10.116-3.525-14.868-5.978-9.427-5.058-17.933-11.956-24.524-20.31a79.015 79.015 0 0 1-8.584-13.334 79.197 79.197 0 0 1-5.671-14.638c-1.38-5.058-2.223-10.193-2.606-15.405l-.077-.996v-6.821c.077-2.529.307-5.211.614-7.817.306-2.606.766-5.288 1.302-7.894.537-2.605 1.15-5.211 1.916-7.817a102.856 102.856 0 0 1 5.442-14.791c4.368-9.35 10.04-17.704 16.86-24.371 1.686-1.686 3.449-3.22 5.288-4.752a78.196 78.196 0 0 1 5.748-4.138c1.916-1.303 3.985-2.453 6.055-3.526a39.773 39.773 0 0 1 3.142-1.533 11118896.038 11118896.038 0 0 1 3.219-1.379c2.146-.92 4.368-1.686 6.667-2.376.537-.153 1.15-.306 1.686-.536.537-.154 1.15-.307 1.686-.46 1.15-.307 2.3-.613 3.45-.843.536-.153 1.149-.23 1.762-.383.613-.154 1.15-.23 1.763-.384.613-.076 1.15-.23 1.762-.306l.843-.153.92-.154c.613-.076 1.15-.153 1.763-.23.69-.076 1.302-.153 1.992-.23.537-.076 1.456-.153 1.993-.23.383-.076.843-.076 1.226-.153l.843-.076.383-.077h.46c.69-.077 1.303-.077 1.993-.153l.996-.077h.767c.536 0 1.149-.076 1.685-.076a98.944 98.944 0 0 1 6.745 0c4.445.153 8.813.69 13.028 1.456 8.507 1.61 16.478 4.291 23.758 7.893 7.28 3.526 13.719 7.894 19.39 12.646.383.306.69.613 1.073.92.306.306.69.613.996.92.69.612 1.303 1.225 1.993 1.838.69.614 1.303 1.227 1.916 1.84a44.302 44.302 0 0 1 1.839 1.916c2.376 2.529 4.598 5.058 6.59 7.664a98.897 98.897 0 0 1 9.734 15.25l.46.92.46.92c.306.613.613 1.226.843 1.84.306.613.536 1.149.843 1.762.23.613.536 1.15.766 1.763.92 2.299 1.84 4.521 2.53 6.59 1.149 3.373 1.992 6.362 2.682 8.967a2.043 2.043 0 0 0 2.299 1.61c1.15-.077 1.992-.996 1.992-2.146.077-2.759 0-6.054-.383-9.81Z"/></svg>`;
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 279" width="${width}" height="${height}" ${restAttrs}><defs><linearGradient id="a" x1="49.995%" x2="49.995%" y1="122.45%" y2="31.139%"><stop offset="0%" stop-color="#FFF100"/><stop offset="100%" stop-color="#F05A28"/></linearGradient></defs><path fill="url(#a)" d="M255.59 122.775c-.46-4.675-1.226-10.04-2.759-16.017a98.01 98.01 0 0 0-7.204-19.16 106.69 106.69 0 0 0-13.412-20.54c-2.222-2.681-4.675-5.287-7.28-7.816 3.908-15.558-4.752-29.046-4.752-29.046-14.945-.92-24.448 4.675-27.973 7.204-.613-.23-1.15-.537-1.763-.767-2.529-.996-5.135-1.992-7.894-2.835a130.374 130.374 0 0 0-8.277-2.3c-2.835-.69-5.67-1.226-8.583-1.686-.537-.076-.996-.153-1.533-.23C157.646 8.738 138.946 0 138.946 0c-20.922 13.258-24.831 31.805-24.831 31.805s-.077.383-.23 1.073c-1.15.307-2.299.69-3.449.996-1.609.46-3.218 1.073-4.751 1.686a123.11 123.11 0 0 0-4.752 1.916 117.205 117.205 0 0 0-9.35 4.599c-2.989 1.686-5.9 3.525-8.737 5.441l-.766-.307c-28.97-11.036-54.643 2.223-54.643 2.223-2.376 30.809 11.572 50.198 14.331 53.724-.69 1.916-1.303 3.832-1.916 5.748-2.146 6.974-3.755 14.101-4.751 21.535-.154 1.073-.307 2.146-.384 3.219C7.894 146.916 0 173.97 0 173.97c22.302 25.674 48.359 27.283 48.359 27.283l.077-.076c3.295 5.9 7.127 11.495 11.419 16.783a111.904 111.904 0 0 0 5.671 6.362c-8.124 23.298 1.15 42.61 1.15 42.61 24.83.92 41.155-10.882 44.603-13.564a84.473 84.473 0 0 0 7.511 2.222 109.703 109.703 0 0 0 23.298 3.449c1.916.076 3.909.153 5.825.076H150.672l1.226-.076v.076c11.726 16.708 32.265 19.084 32.265 19.084 14.638-15.405 15.48-30.733 15.48-34.028v-1.38c3.066-2.145 5.979-4.445 8.738-6.974 5.824-5.288 10.959-11.342 15.25-17.857l1.15-1.839c16.554.92 28.28-10.27 28.28-10.27-2.759-17.243-12.569-25.673-14.638-27.283 0 0-.077-.076-.23-.153-.153-.077-.153-.153-.153-.153-.077-.077-.23-.154-.383-.23.076-1.073.153-2.07.23-3.142.153-1.84.153-3.756.153-5.595v-2.913l-.077-1.149-.076-1.533c0-.536-.077-.996-.154-1.456-.076-.46-.076-.996-.153-1.456l-.153-1.456-.23-1.456c-.307-1.916-.613-3.756-1.073-5.672-1.763-7.433-4.675-14.484-8.43-20.845a70.373 70.373 0 0 0-14.025-16.707c-5.365-4.752-11.42-8.584-17.704-11.42-6.36-2.835-12.952-4.675-19.543-5.518-3.295-.46-6.59-.613-9.886-.536h-2.453l-1.226.077c-.46 0-.92.076-1.303.076a51.958 51.958 0 0 0-4.981.69c-6.591 1.226-12.799 3.602-18.24 6.897-5.441 3.296-10.193 7.358-14.025 11.956a54.7 54.7 0 0 0-8.89 15.021 52.857 52.857 0 0 0-3.525 16.094c-.077 1.303-.077 2.683-.077 3.986v.996l.077 1.073c.076.613.076 1.303.153 1.916.23 2.682.766 5.288 1.456 7.74 1.456 4.982 3.755 9.503 6.59 13.335 2.836 3.832 6.285 6.975 9.887 9.504 3.602 2.452 7.51 4.215 11.343 5.364 3.832 1.15 7.664 1.61 11.266 1.61H154.58c.23 0 .46 0 .689-.077.383 0 .766-.077 1.15-.077.076 0 .23 0 .306-.076l.383-.077c.23 0 .46-.076.69-.076.46-.077.843-.154 1.303-.23.46-.077.843-.154 1.226-.307.843-.153 1.61-.46 2.376-.69 1.533-.536 3.066-1.15 4.368-1.839 1.38-.69 2.606-1.533 3.832-2.3.307-.23.69-.459.997-.766 1.226-.996 1.456-2.835.46-4.061-.844-1.073-2.376-1.38-3.603-.69l-.92.46a24.914 24.914 0 0 1-3.295 1.38c-1.15.382-2.375.689-3.602.919-.613.076-1.226.153-1.916.23-.306 0-.613.076-.996.076h-1.84c-.383 0-.766 0-1.149-.076H154.58c-.153 0-.383 0-.536-.077-.383-.077-.69-.077-1.073-.153-2.836-.383-5.671-1.226-8.354-2.453a29.275 29.275 0 0 1-7.74-5.058c-2.376-2.146-4.445-4.675-6.055-7.587-1.61-2.912-2.759-6.131-3.295-9.503-.23-1.686-.383-3.449-.307-5.135 0-.46.077-.92.077-1.38v-.613c0-.23.077-.46.077-.69.076-.919.23-1.839.383-2.758 1.303-7.358 4.981-14.562 10.653-20.003 1.456-1.38 2.988-2.606 4.598-3.755a31.705 31.705 0 0 1 5.211-2.99 35.739 35.739 0 0 1 5.672-2.068c1.915-.537 3.908-.844 5.977-1.073.997-.077 1.993-.154 3.066-.154h2.376l.843.077c2.222.153 4.368.46 6.514.996 4.292.92 8.507 2.53 12.415 4.675 7.818 4.369 14.485 11.113 18.547 19.237 2.07 4.061 3.525 8.43 4.215 12.951.153 1.15.307 2.3.383 3.45l.077.842.077.843v3.296c0 .536-.077 1.456-.077 1.992-.077 1.227-.23 2.53-.383 3.756s-.383 2.452-.613 3.678a49.548 49.548 0 0 1-.843 3.602 64.129 64.129 0 0 1-2.3 7.128 62.417 62.417 0 0 1-7.204 13.105c-5.9 8.124-13.948 14.715-23.144 18.93-4.599 2.069-9.427 3.602-14.408 4.368-2.453.46-4.982.69-7.511.766h-3.832a36.08 36.08 0 0 1-4.062-.23c-5.365-.383-10.653-1.379-15.864-2.835-5.135-1.456-10.116-3.525-14.868-5.978-9.427-5.058-17.933-11.956-24.524-20.31a79.015 79.015 0 0 1-8.584-13.334 79.197 79.197 0 0 1-5.671-14.638c-1.38-5.058-2.223-10.193-2.606-15.405l-.077-.996v-6.821c.077-2.529.307-5.211.614-7.817.306-2.606.766-5.288 1.302-7.894.537-2.605 1.15-5.211 1.916-7.817a102.856 102.856 0 0 1 5.442-14.791c4.368-9.35 10.04-17.704 16.86-24.371 1.686-1.686 3.449-3.22 5.288-4.752a78.196 78.196 0 0 1 5.748-4.138c1.916-1.303 3.985-2.453 6.055-3.526a39.773 39.773 0 0 1 3.142-1.533 11118896.038 11118896.038 0 0 1 3.219-1.379c2.146-.92 4.368-1.686 6.667-2.376.537-.153 1.15-.306 1.686-.536.537-.154 1.15-.307 1.686-.46 1.15-.307 2.3-.613 3.45-.843.536-.153 1.149-.23 1.762-.383.613-.154 1.15-.23 1.763-.384.613-.076 1.15-.23 1.762-.306l.843-.153.92-.154c.613-.076 1.15-.153 1.763-.23.69-.076 1.302-.153 1.992-.23.537-.076 1.456-.153 1.993-.23.383-.076.843-.076 1.226-.153l.843-.076.383-.077h.46c.69-.077 1.303-.077 1.993-.153l.996-.077h.767c.536 0 1.149-.076 1.685-.076a98.944 98.944 0 0 1 6.745 0c4.445.153 8.813.69 13.028 1.456 8.507 1.61 16.478 4.291 23.758 7.893 7.28 3.526 13.719 7.894 19.39 12.646.383.306.69.613 1.073.92.306.306.69.613.996.92.69.612 1.303 1.225 1.993 1.838.69.614 1.303 1.227 1.916 1.84a44.302 44.302 0 0 1 1.839 1.916c2.376 2.529 4.598 5.058 6.59 7.664a98.897 98.897 0 0 1 9.734 15.25l.46.92.46.92c.306.613.613 1.226.843 1.84.306.613.536 1.149.843 1.762.23.613.536 1.15.766 1.763.92 2.299 1.84 4.521 2.53 6.59 1.149 3.373 1.992 6.362 2.682 8.967a2.043 2.043 0 0 0 2.299 1.61c1.15-.077 1.992-.996 1.992-2.146.077-2.759 0-6.054-.383-9.81Z"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/GraphQL.svelte

@@ -1,7 +1,17 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="#e10098" width="${width}" height="${height}"><style>svg{fill:color(display-p3 0.8824 0 0.5961);}</style><path fill-rule="evenodd" clip-rule="evenodd" d="M50 6.90308L87.323 28.4515V71.5484L50 93.0968L12.677 71.5484V28.4515L50 6.90308ZM16.8647 30.8693V62.5251L44.2795 15.0414L16.8647 30.8693ZM50 13.5086L18.3975 68.2457H81.6025L50 13.5086ZM77.4148 72.4334H22.5852L50 88.2613L77.4148 72.4334ZM83.1353 62.5251L55.7205 15.0414L83.1353 30.8693V62.5251Z"/><circle cx="50" cy="9.3209" r="8.82"/><circle cx="85.2292" cy="29.6605" r="8.82"/><circle cx="85.2292" cy="70.3396" r="8.82"/><circle cx="50" cy="90.6791" r="8.82"/><circle cx="14.7659" cy="70.3396" r="8.82"/><circle cx="14.7659" cy="29.6605" r="8.82"/></svg>`;
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg id="svgl_graphql" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="#e10098" width="${width}" height="${height}" ${restAttrs}><style>#svgl_graphql{fill:color(display-p3 0.8824 0 0.5961);}</style><path fill-rule="evenodd" clip-rule="evenodd" d="M50 6.90308L87.323 28.4515V71.5484L50 93.0968L12.677 71.5484V28.4515L50 6.90308ZM16.8647 30.8693V62.5251L44.2795 15.0414L16.8647 30.8693ZM50 13.5086L18.3975 68.2457H81.6025L50 13.5086ZM77.4148 72.4334H22.5852L50 88.2613L77.4148 72.4334ZM83.1353 62.5251L55.7205 15.0414L83.1353 30.8693V62.5251Z"/><circle cx="50" cy="9.3209" r="8.82"/><circle cx="85.2292" cy="29.6605" r="8.82"/><circle cx="85.2292" cy="70.3396" r="8.82"/><circle cx="50" cy="90.6791" r="8.82"/><circle cx="14.7659" cy="70.3396" r="8.82"/><circle cx="14.7659" cy="29.6605" r="8.82"/></svg>
+`;
 </script>
 
 {@html svgContent}

package/dist/components/Grok.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" ${restAttrs}>
 <path d="M395.479 633.828L735.91 381.105C752.599 368.715 776.454 373.548 784.406 392.792C826.26 494.285 807.561 616.253 724.288 699.996C641.016 783.739 525.151 802.104 419.247 760.277L303.556 814.143C469.49 928.202 670.987 899.995 796.901 773.282C896.776 672.843 927.708 535.937 898.785 412.476L899.047 412.739C857.105 231.37 909.358 158.874 1016.4 10.6326C1018.93 7.11771 1021.47 3.60279 1024 0L883.144 141.651V141.212L395.392 633.916" fill="#0A0A0A"/>
 <path d="M325.226 695.251C206.128 580.84 226.662 403.776 328.285 301.668C403.431 226.097 526.549 195.254 634.026 240.596L749.454 186.994C728.657 171.88 702.007 155.623 671.424 144.2C533.19 86.9942 367.693 115.465 255.323 228.382C147.234 337.081 113.244 504.215 171.613 646.833C215.216 753.423 143.739 828.818 71.7385 904.916C46.2237 931.893 20.6216 958.87 0 987.429L325.139 695.339" fill="#0A0A0A"/>
 </svg>

package/dist/components/Groq.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201" width="${width}" height="${height}"><path fill="#F54F35" d="M0 0h201v201H0V0Z"/><path fill="#FEFBFB" d="m128 49 1.895 1.52C136.336 56.288 140.602 64.49 142 73c.097 1.823.148 3.648.161 5.474l.03 3.247.012 3.482.017 3.613c.01 2.522.016 5.044.02 7.565.01 3.84.041 7.68.072 11.521.007 2.455.012 4.91.016 7.364l.038 3.457c-.033 11.717-3.373 21.83-11.475 30.547-4.552 4.23-9.148 7.372-14.891 9.73l-2.387 1.055c-9.275 3.355-20.3 2.397-29.379-1.13-5.016-2.38-9.156-5.17-13.234-8.925 3.678-4.526 7.41-8.394 12-12l3.063 2.375c5.572 3.958 11.135 5.211 17.937 4.625 6.96-1.384 12.455-4.502 17-10 4.174-6.784 4.59-12.222 4.531-20.094l.012-3.473c.003-2.414-.005-4.827-.022-7.241-.02-3.68 0-7.36.026-11.04-.003-2.353-.008-4.705-.016-7.058l.025-3.312c-.098-7.996-1.732-13.21-6.681-19.47-6.786-5.458-13.105-8.211-21.914-7.792-7.327 1.188-13.278 4.7-17.777 10.601C75.472 72.012 73.86 78.07 75 85c2.191 7.547 5.019 13.948 12 18 5.848 3.061 10.892 3.523 17.438 3.688l2.794.103c2.256.082 4.512.147 6.768.209v16c-16.682.673-29.615.654-42.852-10.848-8.28-8.296-13.338-19.55-13.71-31.277.394-9.87 3.93-17.894 9.562-25.875l1.688-2.563C84.698 35.563 110.05 34.436 128 49Z"/></svg>`;
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201" width="${width}" height="${height}" ${restAttrs}><path fill="#F54F35" d="M0 0h201v201H0V0Z"/><path fill="#FEFBFB" d="m128 49 1.895 1.52C136.336 56.288 140.602 64.49 142 73c.097 1.823.148 3.648.161 5.474l.03 3.247.012 3.482.017 3.613c.01 2.522.016 5.044.02 7.565.01 3.84.041 7.68.072 11.521.007 2.455.012 4.91.016 7.364l.038 3.457c-.033 11.717-3.373 21.83-11.475 30.547-4.552 4.23-9.148 7.372-14.891 9.73l-2.387 1.055c-9.275 3.355-20.3 2.397-29.379-1.13-5.016-2.38-9.156-5.17-13.234-8.925 3.678-4.526 7.41-8.394 12-12l3.063 2.375c5.572 3.958 11.135 5.211 17.937 4.625 6.96-1.384 12.455-4.502 17-10 4.174-6.784 4.59-12.222 4.531-20.094l.012-3.473c.003-2.414-.005-4.827-.022-7.241-.02-3.68 0-7.36.026-11.04-.003-2.353-.008-4.705-.016-7.058l.025-3.312c-.098-7.996-1.732-13.21-6.681-19.47-6.786-5.458-13.105-8.211-21.914-7.792-7.327 1.188-13.278 4.7-17.777 10.601C75.472 72.012 73.86 78.07 75 85c2.191 7.547 5.019 13.948 12 18 5.848 3.061 10.892 3.523 17.438 3.688l2.794.103c2.256.082 4.512.147 6.768.209v16c-16.682.673-29.615.654-42.852-10.848-8.28-8.296-13.338-19.55-13.71-31.277.394-9.87 3.93-17.894 9.562-25.875l1.688-2.563C84.698 35.563 110.05 34.436 128 49Z"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/HCaptcha.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="${width}" height="${height}"><defs><linearGradient id="a" x1="49.979%" x2="49.979%" y1="-702.201%" y2="97.969%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="b" x1="50%" x2="50%" y1="-602.243%" y2="197.926%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="c" x1="49.979%" x2="49.979%" y1="-602.243%" y2="197.926%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="d" x1="50.021%" x2="50.021%" y1="-502.498%" y2="298.01%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="e" x1="50%" x2="50%" y1="-502.498%" y2="298.01%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="f" x1="49.979%" x2="49.979%" y1="-502.498%" y2="298.01%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="g" x1="50.021%" x2="50.021%" y1="-402.285%" y2="397.884%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="h" x1="50%" x2="50%" y1="-402.285%" y2="397.884%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="i" x1="49.979%" x2="49.979%" y1="-402.285%" y2="397.884%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="j" x1="50.021%" x2="50.021%" y1="-302.328%" y2="497.842%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="k" x1="50%" x2="50%" y1="-302.328%" y2="497.842%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="l" x1="49.979%" x2="49.979%" y1="-302.328%" y2="497.842%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="m" x1="50.021%" x2="50.021%" y1="-202.328%" y2="597.842%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="n" x1="50%" x2="50%" y1="-202.328%" y2="597.842%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="o" x1="49.979%" x2="49.979%" y1="-202.328%" y2="597.842%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="p" x1="50%" x2="50%" y1="-102.37%" y2="697.799%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="q" x1="49.979%" x2="49.979%" y1="-102.37%" y2="697.799%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="r" x1="49.979%" x2="49.979%" y1="-2.37%" y2="797.799%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient></defs><path fill="url(#a)" d="M160.007 223.993h32.007V256h-32.007z" opacity=".5"/><path fill="url(#a)" d="M128 223.993h32.007V256H128z" opacity=".7"/><path fill="url(#a)" d="M96.007 223.993h32.007V256H96.007z" opacity=".7"/><path fill="url(#a)" d="M64 223.993h32.007V256H64z" opacity=".5"/><path fill="url(#b)" d="M192 192h31.993v32.007H192z" opacity=".7"/><path fill="url(#c)" d="M160.007 192h32.007v32.007h-32.007z" opacity=".8"/><path fill="url(#c)" d="M128 192h32.007v32.007H128z"/><path fill="url(#c)" d="M96.007 192h32.007v32.007H96.007z"/><path fill="url(#c)" d="M64 192h32.007v32.007H64z" opacity=".8"/><path fill="url(#c)" d="M32.007 192h32.007v32.007H32.007z" opacity=".7"/><path fill="url(#d)" d="M223.993 160.007H256V192h-32.007z" opacity=".5"/><path fill="url(#e)" d="M192 160.007h31.993V192H192z" opacity=".8"/><path fill="url(#f)" d="M160.007 160.007h32.007V192h-32.007zM128 160.007h32.007V192H128z"/><path fill="url(#f)" d="M96.007 160.007h32.007V192H96.007zM64 160.007h32.007V192H64z"/><path fill="url(#f)" d="M32.007 160.007h32.007V192H32.007z" opacity=".8"/><path fill="url(#f)" d="M0 160.007h32.007V192H0z" opacity=".5"/><path fill="url(#g)" d="M223.993 128H256v32.007h-32.007z" opacity=".7"/><path fill="url(#h)" d="M192 128h31.993v32.007H192z"/><path fill="url(#i)" d="M160.007 128h32.007v32.007h-32.007zM128 128h32.007v32.007H128z"/><path fill="url(#i)" d="M96.007 128h32.007v32.007H96.007zM64 128h32.007v32.007H64z"/><path fill="url(#i)" d="M32.007 128h32.007v32.007H32.007z"/><path fill="url(#i)" d="M0 128h32.007v32.007H0z" opacity=".7"/><path fill="url(#j)" d="M223.993 96.007H256v32.007h-32.007z" opacity=".7"/><path fill="url(#k)" d="M192 96.007h31.993v32.007H192z"/><path fill="url(#l)" d="M160.007 96.007h32.007v32.007h-32.007zM128 96.007h32.007v32.007H128z"/><path fill="url(#l)" d="M96.007 96.007h32.007v32.007H96.007zM64 96.007h32.007v32.007H64z"/><path fill="url(#l)" d="M32.007 96.007h32.007v32.007H32.007z"/><path fill="url(#l)" d="M0 96.007h32.007v32.007H0z" opacity=".7"/><path fill="url(#m)" d="M223.993 64H256v32.007h-32.007z" opacity=".5"/><path fill="url(#n)" d="M192 64h31.993v32.007H192z" opacity=".8"/><path fill="url(#o)" d="M160.007 64h32.007v32.007h-32.007zM128 64h32.007v32.007H128z"/><path fill="url(#o)" d="M96.007 64h32.007v32.007H96.007zM64 64h32.007v32.007H64z"/><path fill="url(#o)" d="M32.007 64h32.007v32.007H32.007z" opacity=".8"/><path fill="url(#o)" d="M0 64h32.007v32.007H0z" opacity=".5"/><path fill="url(#p)" d="M192 32.007h31.993v32.007H192z" opacity=".7"/><path fill="url(#q)" d="M160.007 32.007h32.007v32.007h-32.007z" opacity=".8"/><path fill="url(#q)" d="M128 32.007h32.007v32.007H128z"/><path fill="url(#q)" d="M96.007 32.007h32.007v32.007H96.007z"/><path fill="url(#q)" d="M64 32.007h32.007v32.007H64z" opacity=".8"/><path fill="url(#q)" d="M32.007 32.007h32.007v32.007H32.007z" opacity=".7"/><path fill="url(#r)" d="M160.007 0h32.007v32.007h-32.007z" opacity=".5"/><path fill="url(#r)" d="M128 0h32.007v32.007H128z" opacity=".7"/><path fill="url(#r)" d="M96.007 0h32.007v32.007H96.007z" opacity=".7"/><path fill="url(#r)" d="M64 0h32.007v32.007H64z" opacity=".5"/><path fill="#FFF" d="m84.25 117.841 8.912-19.951c3.251-5.12 2.818-11.378-.745-14.9a9.13 9.13 0 0 0-1.57-1.26 9.847 9.847 0 0 0-8.223-.934 13.437 13.437 0 0 0-7.409 5.756s-12.19 28.445-16.755 41.285c-4.565 12.841-2.709 36.274 14.778 53.828 18.556 18.557 45.47 22.837 62.605 9.942a10.755 10.755 0 0 0 2.018-1.354l52.825-44.143c2.574-2.154 6.38-6.502 2.953-11.487-3.427-4.984-9.63-1.557-12.19.095l-30.423 22.12a1.354 1.354 0 0 1-1.964-.231 3.738 3.738 0 0 1 .298-4.47l46.636-39.578c4.063-3.63 4.592-8.9 1.354-12.516-3.237-3.616-8.249-3.44-12.299.23l-41.989 32.833a1.87 1.87 0 0 1-2.709-.352 2.587 2.587 0 0 1-.217-3.44l47.557-46.148a9.305 9.305 0 0 0 .474-13.125 8.886 8.886 0 0 0-6.461-2.709 9.481 9.481 0 0 0-6.678 2.71l-48.531 45.578c-1.165 1.165-3.44 0-3.712-1.355-.1-.493.058-1.004.42-1.354L160.4 70.556a9.17 9.17 0 1 0-12.936-12.976l-56.428 62.307c-2.018 2.018-4.998 2.113-6.42.948a2.113 2.113 0 0 1-.366-2.994Z"/></svg>`;
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="${width}" height="${height}" ${restAttrs}><defs><linearGradient id="a" x1="49.979%" x2="49.979%" y1="-702.201%" y2="97.969%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="b" x1="50%" x2="50%" y1="-602.243%" y2="197.926%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="c" x1="49.979%" x2="49.979%" y1="-602.243%" y2="197.926%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="d" x1="50.021%" x2="50.021%" y1="-502.498%" y2="298.01%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="e" x1="50%" x2="50%" y1="-502.498%" y2="298.01%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="f" x1="49.979%" x2="49.979%" y1="-502.498%" y2="298.01%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="g" x1="50.021%" x2="50.021%" y1="-402.285%" y2="397.884%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="h" x1="50%" x2="50%" y1="-402.285%" y2="397.884%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="i" x1="49.979%" x2="49.979%" y1="-402.285%" y2="397.884%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="j" x1="50.021%" x2="50.021%" y1="-302.328%" y2="497.842%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="k" x1="50%" x2="50%" y1="-302.328%" y2="497.842%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="l" x1="49.979%" x2="49.979%" y1="-302.328%" y2="497.842%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="m" x1="50.021%" x2="50.021%" y1="-202.328%" y2="597.842%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="n" x1="50%" x2="50%" y1="-202.328%" y2="597.842%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="o" x1="49.979%" x2="49.979%" y1="-202.328%" y2="597.842%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="p" x1="50%" x2="50%" y1="-102.37%" y2="697.799%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="q" x1="49.979%" x2="49.979%" y1="-102.37%" y2="697.799%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient><linearGradient id="r" x1="49.979%" x2="49.979%" y1="-2.37%" y2="797.799%"><stop offset="0%" stop-color="#00D4BF"/><stop offset="100%" stop-color="#0074BF"/></linearGradient></defs><path fill="url(#a)" d="M160.007 223.993h32.007V256h-32.007z" opacity=".5"/><path fill="url(#a)" d="M128 223.993h32.007V256H128z" opacity=".7"/><path fill="url(#a)" d="M96.007 223.993h32.007V256H96.007z" opacity=".7"/><path fill="url(#a)" d="M64 223.993h32.007V256H64z" opacity=".5"/><path fill="url(#b)" d="M192 192h31.993v32.007H192z" opacity=".7"/><path fill="url(#c)" d="M160.007 192h32.007v32.007h-32.007z" opacity=".8"/><path fill="url(#c)" d="M128 192h32.007v32.007H128z"/><path fill="url(#c)" d="M96.007 192h32.007v32.007H96.007z"/><path fill="url(#c)" d="M64 192h32.007v32.007H64z" opacity=".8"/><path fill="url(#c)" d="M32.007 192h32.007v32.007H32.007z" opacity=".7"/><path fill="url(#d)" d="M223.993 160.007H256V192h-32.007z" opacity=".5"/><path fill="url(#e)" d="M192 160.007h31.993V192H192z" opacity=".8"/><path fill="url(#f)" d="M160.007 160.007h32.007V192h-32.007zM128 160.007h32.007V192H128z"/><path fill="url(#f)" d="M96.007 160.007h32.007V192H96.007zM64 160.007h32.007V192H64z"/><path fill="url(#f)" d="M32.007 160.007h32.007V192H32.007z" opacity=".8"/><path fill="url(#f)" d="M0 160.007h32.007V192H0z" opacity=".5"/><path fill="url(#g)" d="M223.993 128H256v32.007h-32.007z" opacity=".7"/><path fill="url(#h)" d="M192 128h31.993v32.007H192z"/><path fill="url(#i)" d="M160.007 128h32.007v32.007h-32.007zM128 128h32.007v32.007H128z"/><path fill="url(#i)" d="M96.007 128h32.007v32.007H96.007zM64 128h32.007v32.007H64z"/><path fill="url(#i)" d="M32.007 128h32.007v32.007H32.007z"/><path fill="url(#i)" d="M0 128h32.007v32.007H0z" opacity=".7"/><path fill="url(#j)" d="M223.993 96.007H256v32.007h-32.007z" opacity=".7"/><path fill="url(#k)" d="M192 96.007h31.993v32.007H192z"/><path fill="url(#l)" d="M160.007 96.007h32.007v32.007h-32.007zM128 96.007h32.007v32.007H128z"/><path fill="url(#l)" d="M96.007 96.007h32.007v32.007H96.007zM64 96.007h32.007v32.007H64z"/><path fill="url(#l)" d="M32.007 96.007h32.007v32.007H32.007z"/><path fill="url(#l)" d="M0 96.007h32.007v32.007H0z" opacity=".7"/><path fill="url(#m)" d="M223.993 64H256v32.007h-32.007z" opacity=".5"/><path fill="url(#n)" d="M192 64h31.993v32.007H192z" opacity=".8"/><path fill="url(#o)" d="M160.007 64h32.007v32.007h-32.007zM128 64h32.007v32.007H128z"/><path fill="url(#o)" d="M96.007 64h32.007v32.007H96.007zM64 64h32.007v32.007H64z"/><path fill="url(#o)" d="M32.007 64h32.007v32.007H32.007z" opacity=".8"/><path fill="url(#o)" d="M0 64h32.007v32.007H0z" opacity=".5"/><path fill="url(#p)" d="M192 32.007h31.993v32.007H192z" opacity=".7"/><path fill="url(#q)" d="M160.007 32.007h32.007v32.007h-32.007z" opacity=".8"/><path fill="url(#q)" d="M128 32.007h32.007v32.007H128z"/><path fill="url(#q)" d="M96.007 32.007h32.007v32.007H96.007z"/><path fill="url(#q)" d="M64 32.007h32.007v32.007H64z" opacity=".8"/><path fill="url(#q)" d="M32.007 32.007h32.007v32.007H32.007z" opacity=".7"/><path fill="url(#r)" d="M160.007 0h32.007v32.007h-32.007z" opacity=".5"/><path fill="url(#r)" d="M128 0h32.007v32.007H128z" opacity=".7"/><path fill="url(#r)" d="M96.007 0h32.007v32.007H96.007z" opacity=".7"/><path fill="url(#r)" d="M64 0h32.007v32.007H64z" opacity=".5"/><path fill="#FFF" d="m84.25 117.841 8.912-19.951c3.251-5.12 2.818-11.378-.745-14.9a9.13 9.13 0 0 0-1.57-1.26 9.847 9.847 0 0 0-8.223-.934 13.437 13.437 0 0 0-7.409 5.756s-12.19 28.445-16.755 41.285c-4.565 12.841-2.709 36.274 14.778 53.828 18.556 18.557 45.47 22.837 62.605 9.942a10.755 10.755 0 0 0 2.018-1.354l52.825-44.143c2.574-2.154 6.38-6.502 2.953-11.487-3.427-4.984-9.63-1.557-12.19.095l-30.423 22.12a1.354 1.354 0 0 1-1.964-.231 3.738 3.738 0 0 1 .298-4.47l46.636-39.578c4.063-3.63 4.592-8.9 1.354-12.516-3.237-3.616-8.249-3.44-12.299.23l-41.989 32.833a1.87 1.87 0 0 1-2.709-.352 2.587 2.587 0 0 1-.217-3.44l47.557-46.148a9.305 9.305 0 0 0 .474-13.125 8.886 8.886 0 0 0-6.461-2.709 9.481 9.481 0 0 0-6.678 2.71l-48.531 45.578c-1.165 1.165-3.44 0-3.712-1.355-.1-.493.058-1.004.42-1.354L160.4 70.556a9.17 9.17 0 1 0-12.936-12.976l-56.428 62.307c-2.018 2.018-4.998 2.113-6.42.948a2.113 2.113 0 0 1-.366-2.994Z"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/HTML5.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 520" width="${width}" height="${height}">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 520" width="${width}" height="${height}" ${restAttrs}>
   <path fill="#e34f26" d="M41 460L0 0h451l-41 460-185 52" />
   <path fill="#ef652a" d="M226 472l149-41 35-394H226" />
   <path fill="#ecedee" d="M226 208h-75l-5-58h80V94H84l15 171h127zm0 147l-64-17-4-45h-56l7 89 117 32z"/>

package/dist/components/HackTheBox.svelte

@@ -1,10 +1,19 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
 	const svgContent = `
 <!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1024 791.27002" style="enable-background:new 0 0 1024 791.27002;" xml:space="preserve" width="${width}" height="${height}">
+	 viewBox="0 0 1024 791.27002" style="enable-background:new 0 0 1024 791.27002;" xml:space="preserve" width="${width}" height="${height}" ${restAttrs}>
 <style>
 	.st0{fill:#9FEF00;}
 </style>

package/dist/components/Hashnode.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" fill="none" width="${width}" height="${height}"><path fill="#2563EB" fill-rule="evenodd" d="M68.692 334.16c-91.59 91.589-91.59 240.085 0 331.674L334.16 931.302c91.589 91.588 240.085 91.588 331.674-.001l265.468-265.467c91.588-91.59 91.588-240.085-.001-331.674L665.834 68.692c-91.59-91.59-240.085-91.59-331.674 0L68.692 334.16Zm431.302 330.06c90.694 0 164.216-73.522 164.216-164.216s-73.522-164.216-164.216-164.216-164.216 73.522-164.216 164.216S409.3 664.22 499.994 664.22Z" clip-rule="evenodd"/></svg>`;
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" fill="none" width="${width}" height="${height}" ${restAttrs}><path fill="#2563EB" fill-rule="evenodd" d="M68.692 334.16c-91.59 91.589-91.59 240.085 0 331.674L334.16 931.302c91.589 91.588 240.085 91.588 331.674-.001l265.468-265.467c91.588-91.59 91.588-240.085-.001-331.674L665.834 68.692c-91.59-91.59-240.085-91.59-331.674 0L68.692 334.16Zm431.302 330.06c90.694 0 164.216-73.522 164.216-164.216s-73.522-164.216-164.216-164.216-164.216 73.522-164.216 164.216S409.3 664.22 499.994 664.22Z" clip-rule="evenodd"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/Haskell.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="${width}" height="${height}"><path fill="#453a62" d="M9 43H1l12-18L1 7h8l12 18z"/><path fill="#5e5086" d="M20 7h-8l12 18-12 18h8l8.16-12.24L36 43h8z"/><path fill="#8f4e8b" d="M34.338 24H47v-6H30.338zM40.338 33H47v-6H36.338z"/></svg>`;
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="${width}" height="${height}" ${restAttrs}><path fill="#453a62" d="M9 43H1l12-18L1 7h8l12 18z"/><path fill="#5e5086" d="M20 7h-8l12 18-12 18h8l8.16-12.24L36 43h8z"/><path fill="#8f4e8b" d="M34.338 24H47v-6H30.338zM40.338 33H47v-6H36.338z"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/HeadlessUI.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="${width}" height="${height}"><defs><linearGradient x1="35.871%" y1="7.224%" x2="60.314%" y2="115.988%" id="a"><stop stop-color="#66E3FF" offset="0%"/><stop stop-color="#7064F9" offset="100%"/></linearGradient><linearGradient x1="39.172%" y1="0%" x2="55.05%" y2="99.181%" id="b"><stop stop-color="#66E3FF" offset="0%"/><stop stop-color="#7064F9" offset="100%"/></linearGradient></defs><path d="m50.699 159.089 156.225-52.153c-3.122-19.523-5.346-32.565-7.924-42.518-2.777-10.706-4.978-13.57-5.842-14.563a30.468 30.468 0 0 0-10.973-7.969c-1.216-.52-4.625-1.728-15.654-1.064-11.669.704-26.987 3.088-51.245 6.929-24.25 3.84-39.56 6.313-50.87 9.241-10.7 2.777-13.573 4.985-14.566 5.85a30.581 30.581 0 0 0-7.963 10.97c-.52 1.215-1.729 4.624-1.064 15.658.704 11.665 3.089 26.988 6.93 51.24 1.073 6.8 2.041 12.882 2.946 18.379Z" fill="url(#a)"/><path d="M7.625 147.063c-7.427-46.92-11.149-70.38-3.098-89.214a71.092 71.092 0 0 1 18.6-25.605c15.423-13.466 38.88-17.178 85.796-24.611C155.854.19 179.313-3.521 198.16 4.528a71.085 71.085 0 0 1 25.595 18.595c13.477 15.426 17.19 38.886 24.618 85.814 7.435 46.92 11.149 70.387 3.097 89.214a71.076 71.076 0 0 1-18.591 25.604c-15.423 13.474-38.889 17.187-85.812 24.62-46.916 7.433-70.382 11.146-89.213 3.096a71.093 71.093 0 0 1-25.595-18.595C18.781 217.45 15.068 193.99 7.633 147.063h-.008Zm82.762 83.325c12.565-.76 28.748-3.296 52.702-7.09 23.962-3.792 40.12-6.384 52.318-9.545 11.805-3.064 17.247-6.049 20.76-9.121a45.696 45.696 0 0 0 11.95-16.459c1.84-4.288 3-10.385 2.264-22.563-.76-12.562-3.297-28.749-7.09-52.705-3.794-23.955-6.38-40.126-9.54-52.312-3.066-11.81-6.059-17.25-9.124-20.763a45.699 45.699 0 0 0-16.455-11.954c-4.29-1.84-10.388-3-22.57-2.265-12.565.76-28.74 3.297-52.701 7.09-23.954 3.8-40.121 6.385-52.31 9.545-11.813 3.065-17.247 6.057-20.76 9.122a45.704 45.704 0 0 0-11.958 16.458c-1.833 4.289-2.993 10.386-2.257 22.564.76 12.57 3.29 28.748 7.091 52.704 3.794 23.956 6.379 40.127 9.54 52.313 3.065 11.81 6.05 17.25 9.124 20.763a45.707 45.707 0 0 0 16.455 11.954c4.29 1.84 10.38 3 22.57 2.264h-.009Z" fill="url(#b)"/></svg>`;
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="${width}" height="${height}" ${restAttrs}><defs><linearGradient x1="35.871%" y1="7.224%" x2="60.314%" y2="115.988%" id="a"><stop stop-color="#66E3FF" offset="0%"/><stop stop-color="#7064F9" offset="100%"/></linearGradient><linearGradient x1="39.172%" y1="0%" x2="55.05%" y2="99.181%" id="b"><stop stop-color="#66E3FF" offset="0%"/><stop stop-color="#7064F9" offset="100%"/></linearGradient></defs><path d="m50.699 159.089 156.225-52.153c-3.122-19.523-5.346-32.565-7.924-42.518-2.777-10.706-4.978-13.57-5.842-14.563a30.468 30.468 0 0 0-10.973-7.969c-1.216-.52-4.625-1.728-15.654-1.064-11.669.704-26.987 3.088-51.245 6.929-24.25 3.84-39.56 6.313-50.87 9.241-10.7 2.777-13.573 4.985-14.566 5.85a30.581 30.581 0 0 0-7.963 10.97c-.52 1.215-1.729 4.624-1.064 15.658.704 11.665 3.089 26.988 6.93 51.24 1.073 6.8 2.041 12.882 2.946 18.379Z" fill="url(#a)"/><path d="M7.625 147.063c-7.427-46.92-11.149-70.38-3.098-89.214a71.092 71.092 0 0 1 18.6-25.605c15.423-13.466 38.88-17.178 85.796-24.611C155.854.19 179.313-3.521 198.16 4.528a71.085 71.085 0 0 1 25.595 18.595c13.477 15.426 17.19 38.886 24.618 85.814 7.435 46.92 11.149 70.387 3.097 89.214a71.076 71.076 0 0 1-18.591 25.604c-15.423 13.474-38.889 17.187-85.812 24.62-46.916 7.433-70.382 11.146-89.213 3.096a71.093 71.093 0 0 1-25.595-18.595C18.781 217.45 15.068 193.99 7.633 147.063h-.008Zm82.762 83.325c12.565-.76 28.748-3.296 52.702-7.09 23.962-3.792 40.12-6.384 52.318-9.545 11.805-3.064 17.247-6.049 20.76-9.121a45.696 45.696 0 0 0 11.95-16.459c1.84-4.288 3-10.385 2.264-22.563-.76-12.562-3.297-28.749-7.09-52.705-3.794-23.955-6.38-40.126-9.54-52.312-3.066-11.81-6.059-17.25-9.124-20.763a45.699 45.699 0 0 0-16.455-11.954c-4.29-1.84-10.388-3-22.57-2.265-12.565.76-28.74 3.297-52.701 7.09-23.954 3.8-40.121 6.385-52.31 9.545-11.813 3.065-17.247 6.057-20.76 9.122a45.704 45.704 0 0 0-11.958 16.458c-1.833 4.289-2.993 10.386-2.257 22.564.76 12.57 3.29 28.748 7.091 52.704 3.794 23.956 6.379 40.127 9.54 52.313 3.065 11.81 6.05 17.25 9.124 20.763a45.707 45.707 0 0 0 16.455 11.954c4.29 1.84 10.38 3 22.57 2.264h-.009Z" fill="url(#b)"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/Heptabase.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg viewBox="0 0 824 824" fill="none" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" ${restAttrs}>
+<rect width="824" height="824" rx="184" fill="white"/>
+<circle cx="606" cy="582" r="50" fill="#2E2E2E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M216 237.833C216 212.52 236.52 192 261.833 192C287.146 192 307.667 212.52 307.667 237.833V512.833C307.667 538.146 287.146 558.667 261.833 558.667C236.52 558.667 216 538.146 216 512.833V237.833ZM417.668 311.166C417.668 285.853 438.188 265.333 463.501 265.333C488.814 265.333 509.335 285.853 509.335 311.166V586.166C509.335 611.479 488.814 632 463.501 632C438.188 632 417.668 611.479 417.668 586.166V480.75C417.668 466.916 409.226 454.483 396.367 449.38L392.535 447.86C371.664 439.577 348.346 439.992 327.782 449.011C315.561 454.371 307.668 466.452 307.668 479.796V344.203C307.668 357.547 315.561 369.628 327.782 374.988C348.346 384.007 371.664 384.422 392.535 376.14L396.367 374.619C409.226 369.516 417.668 357.084 417.668 343.25V311.166Z" fill="#2E2E2E"/>
+</svg>
+`;
+</script>
+
+{@html svgContent}

package/dist/components/HeroUI.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg viewBox="0 0 74 74" xmlns="http://www.w3.org/2000/svg" fill="none" width="${width}" height="${height}"><path fill="#111" d="M54.35.083H19.566C8.76.083 0 8.843 0 19.649v34.783C0 65.239 8.76 74 19.566 74H54.35c10.806 0 19.566-8.76 19.566-19.566V19.648C73.916 8.843 65.156.083 54.35.083Z"/><path fill="#fff" d="M50.638 52.566V21.201h3.877v31.365h-3.877ZM31.731 53.22c-2.425 0-4.567-.501-6.425-1.503a11.087 11.087 0 0 1-4.378-4.204c-1.046-1.815-1.569-3.942-1.569-6.382V21.223l3.921-.022v19.604c0 1.48.247 2.773.74 3.877.509 1.089 1.177 1.996 2.005 2.722a8.61 8.61 0 0 0 2.722 1.634 9.039 9.039 0 0 0 2.984.523 8.773 8.773 0 0 0 3.006-.545 8.5 8.5 0 0 0 2.723-1.612c.827-.726 1.488-1.64 1.982-2.744.493-1.104.74-2.389.74-3.855V21.2h3.921v19.93c0 2.425-.53 4.545-1.59 6.36a10.893 10.893 0 0 1-4.356 4.226c-1.859 1.002-4 1.503-6.426 1.503Z"/></svg>`;
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg viewBox="0 0 74 74" xmlns="http://www.w3.org/2000/svg" fill="none" width="${width}" height="${height}" ${restAttrs}><path fill="#111" d="M54.35.083H19.566C8.76.083 0 8.843 0 19.649v34.783C0 65.239 8.76 74 19.566 74H54.35c10.806 0 19.566-8.76 19.566-19.566V19.648C73.916 8.843 65.156.083 54.35.083Z"/><path fill="#fff" d="M50.638 52.566V21.201h3.877v31.365h-3.877ZM31.731 53.22c-2.425 0-4.567-.501-6.425-1.503a11.087 11.087 0 0 1-4.378-4.204c-1.046-1.815-1.569-3.942-1.569-6.382V21.223l3.921-.022v19.604c0 1.48.247 2.773.74 3.877.509 1.089 1.177 1.996 2.005 2.722a8.61 8.61 0 0 0 2.722 1.634 9.039 9.039 0 0 0 2.984.523 8.773 8.773 0 0 0 3.006-.545 8.5 8.5 0 0 0 2.723-1.612c.827-.726 1.488-1.64 1.982-2.744.493-1.104.74-2.389.74-3.855V21.2h3.921v19.93c0 2.425-.53 4.545-1.59 6.36a10.893 10.893 0 0 1-4.356 4.226c-1.859 1.002-4 1.503-6.426 1.503Z"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/Heroku.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 284.4" width="${width}" height="${height}">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 284.4" width="${width}" height="${height}" ${restAttrs}>
   <path fill="#430098" d="M230 0c14 0 26 11 26 25v234c0 14-11 25-25 25H26c-14 0-26-11-26-25V26C0 12 11 0 25 0h1zm0 14H26c-7 0-12 5-12 11v234c0 6 5 11 11 11h205c7 0 12-5 12-11V26c0-7-5-12-12-12zM64 185l32 28-32 29zM92 43v80c15-4 34-9 54-9 17 0 28 7 34 12 12 13 12 28 12 30v86h-28v-85c-1-7-4-15-18-15-29 0-61 14-62 15l-20 9V43zm100 0c-2 16-8 31-21 46h-29c11-15 18-30 22-46z"/>
 </svg>
 `;

package/dist/components/HomeAssistant.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="${width}" height="${height}"><path fill="#F2F4F9" d="M240 224.762c0 8.25-6.75 15-15 15H15c-8.25 0-15-6.75-15-15v-90c0-8.25 4.77-19.769 10.61-25.609l98.78-98.78c5.83-5.83 15.38-5.83 21.21 0l98.79 98.789c5.83 5.83 10.61 17.36 10.61 25.61v90-.01Z"/><path fill="#18BCF2" d="m229.39 109.153-98.78-98.78c-5.83-5.83-15.38-5.83-21.21 0l-98.79 98.78C4.78 114.983 0 126.512 0 134.762v90c0 8.25 6.75 15 15 15h92.27l-40.63-40.63c-2.09.72-4.32 1.13-6.64 1.13-11.3 0-20.5-9.2-20.5-20.5s9.2-20.5 20.5-20.5 20.5 9.2 20.5 20.5c0 2.33-.41 4.56-1.13 6.65l31.63 31.63v-115.88c-6.8-3.34-11.5-10.32-11.5-18.39 0-11.3 9.2-20.5 20.5-20.5s20.5 9.2 20.5 20.5c0 8.07-4.7 15.05-11.5 18.39v81.27l31.46-31.46c-.62-1.96-.96-4.04-.96-6.2 0-11.3 9.2-20.5 20.5-20.5s20.5 9.2 20.5 20.5-9.2 20.5-20.5 20.5c-2.5 0-4.88-.47-7.09-1.29L129 208.892v30.88h96c8.25 0 15-6.75 15-15v-90c0-8.25-4.77-19.77-10.61-25.61v-.009Z"/></svg>`;
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface Props extends HTMLAttributes<SVGElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 50, height = 50, ...rest }: Props = $props();
+	const restAttrs = Object.entries(rest)
+		.map(([k, v]) => `${k}="${v}"`)
+		.join(' ');
+	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="${width}" height="${height}" ${restAttrs}><path fill="#F2F4F9" d="M240 224.762c0 8.25-6.75 15-15 15H15c-8.25 0-15-6.75-15-15v-90c0-8.25 4.77-19.769 10.61-25.609l98.78-98.78c5.83-5.83 15.38-5.83 21.21 0l98.79 98.789c5.83 5.83 10.61 17.36 10.61 25.61v90-.01Z"/><path fill="#18BCF2" d="m229.39 109.153-98.78-98.78c-5.83-5.83-15.38-5.83-21.21 0l-98.79 98.78C4.78 114.983 0 126.512 0 134.762v90c0 8.25 6.75 15 15 15h92.27l-40.63-40.63c-2.09.72-4.32 1.13-6.64 1.13-11.3 0-20.5-9.2-20.5-20.5s9.2-20.5 20.5-20.5 20.5 9.2 20.5 20.5c0 2.33-.41 4.56-1.13 6.65l31.63 31.63v-115.88c-6.8-3.34-11.5-10.32-11.5-18.39 0-11.3 9.2-20.5 20.5-20.5s20.5 9.2 20.5 20.5c0 8.07-4.7 15.05-11.5 18.39v81.27l31.46-31.46c-.62-1.96-.96-4.04-.96-6.2 0-11.3 9.2-20.5 20.5-20.5s20.5 9.2 20.5 20.5-9.2 20.5-20.5 20.5c-2.5 0-4.88-.47-7.09-1.29L129 208.892v30.88h96c8.25 0 15-6.75 15-15v-90c0-8.25-4.77-19.77-10.61-25.61v-.009Z"/></svg>`;
 </script>
 
 {@html svgContent}