@selemondev/svgl-svelte 0.0.2 → 2.0.0

package/dist/components/WebGL.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" xml:space="preserve" baseProfile="tiny" viewBox="0 0 1200 500" width="${width}" height="${height}" ${restAttrs}><g fill="#900"><path d="M1113.5 323.6h-7.3v19.1h-6.4v-19.1h-7.4v-5.5h21.1v5.5zM1116.4 318.1h9.4l4.3 16.4 4.3-16.4h9.4v24.6h-6V324h-.1l-5.1 18.7h-4.9l-5.2-18.7h-.1v18.7h-6v-24.6z"/></g><g fill="#900"><path d="M859.4 341.3c-9 3.8-18 5.7-27.1 5.7-14.4 0-27.4-2.5-38.9-7.5s-21.2-11.9-29.1-20.7c-7.9-8.8-14-19.1-18.2-31-4.2-11.9-6.3-24.7-6.3-38.4 0-14.1 2.1-27.1 6.3-39.2 4.2-12.1 10.2-22.6 18.1-31.5 7.9-9 17.6-16 29.1-21.1 11.5-5.1 24.4-7.7 38.9-7.7 9.7 0 19 1.5 28 4.4 9 2.9 17.2 7.2 24.5 12.8 7.3 5.6 13.3 12.6 18 20.9 4.7 8.3 7.6 17.8 8.7 28.5H872c-2.5-10.5-7.2-18.4-14.2-23.7-7-5.3-15.5-7.9-25.6-7.9-9.3 0-17.2 1.8-23.7 5.4-6.5 3.6-11.8 8.4-15.8 14.5s-7 13-8.8 20.7c-1.8 7.7-2.8 15.7-2.8 24 0 7.9.9 15.6 2.8 23.1 1.8 7.5 4.8 14.2 8.8 20.2 4 6 9.3 10.8 15.8 14.4 6.5 3.6 14.4 5.4 23.7 5.4 13.7 0 24.3-3.5 31.8-10.4s11.8-16.9 13.1-30.1h-41.6V241h78.9v101.7h-26.3l-4.2-21.3c-7.3 9.5-15.5 16.1-24.5 19.9zM981.5 154.6v153.1h91.7v34.9h-133v-188h41.3z"/><path d="M786.3 366c-63.1 38.4-157.7 60.2-263.2 60.2C333 426.2 179 347.1 179 249.4c0-97.6 154.1-176.8 344.1-176.8 105.9 0 200.8 22.3 263.9 60.9C718.2 68.8 594.6 23.4 453.4 23.3 237 23.3 61.6 124.5 61.6 249.4c0 124.9 175.4 226.2 391.7 226.2 140.7 0 263.9-45.3 333-109.6z"/></g><g fill="#900"><path d="m439.6 139.9-36.3 157-43.8-157h-33.2l-43.8 157-36.3-157h-34.3l53.8 204.7h32.2l45.3-160.8 44.7 160.8h32.3l55.7-204.7zM566.5 226.1c-5-7.1-11.3-12.5-18.7-16.2-7.6-3.8-16.4-5.7-26.2-5.7-11 0-20.9 2-29.5 5.9-8.1 3.7-15 9.2-20.6 16.3-10.3 13.1-15.7 31.6-15.7 53.5 0 9.7 1.4 18.9 4.1 27.1 2.7 8.3 6.8 15.6 12 21.7 11 12.8 26.7 19.6 45.4 19.6 9.8 0 17.8-1 24.5-3.1 5.8-1.8 9.7-4.2 12.9-6.3 4.1-2.7 7.8-6 11.2-9.8 2.8-3.3 5.3-6.9 7.5-10.8 3.8-7 5.7-13.6 6.1-17l.3-2.3h-26.7l-.1 1.9c-.7 8.7-12.1 24.2-32.4 24.2-29 0-35.9-21-36.4-39.5h97.2v-2.1c0-11.9-1.2-22.8-3.6-32.3-2.7-9.9-6.4-18.3-11.3-25.1zm-48 2.1c21.5 0 33 11.6 35.1 35.4H484c1.1-19.3 16.4-35.4 34.5-35.4zM715.7 245.7c-2.6-8.3-6.4-15.6-11.3-21.7-5.1-6.3-11.3-11.2-18.4-14.6-7.4-3.5-15.7-5.3-24.7-5.3-8.3.1-15.8 1.9-22.4 5.4-5.5 2.8-10.4 6.8-14.6 11.8v-62.8h-26.6v186H623v-12.7c2.2 2.9 5.1 6 8.9 8.7 7.2 5.2 16.1 7.8 26.4 7.8 11.1 0 21.1-2.5 29.5-7.4 7.5-4.4 13.9-10.7 18.9-18.7 4.4-7 7.7-15.3 9.9-24.6 1.9-8 2.9-16.8 2.9-25.4.1-9.3-1.2-18.3-3.8-26.5zm-23.9 30.2c0 14.6-2.9 26.8-8.5 35.4-5.9 9.1-14.5 13.7-25.5 13.7-15.9 0-34.5-11.1-34.5-42.5 0-15 1.9-26.6 5.7-35.4 5.5-12.7 14.8-18.8 28.3-18.8 14.4 0 24.1 5.6 29.5 17.3 4.4 9.6 5 21.3 5 30.3z"/></g></svg>`;
+</script>
+
+{@html svgContent}

package/dist/components/WebKit.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 283" width="${width}" height="${height}"><defs><linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#34AADC"/><stop offset="100%" stop-color="#007AFF"/></linearGradient></defs><path fill="#FF9D00" d="M242.794 157.204c17.608 13.732 17.608 36.323 0 50.166l-82.85 65.116c-17.609 13.732-46.28 13.732-63.888 0l-82.85-65.006c-17.608-13.732-17.608-36.323 0-50.166l82.85-65.116c17.609-13.732 46.28-13.732 63.888 0l82.85 65.006Z"/><path fill-opacity=".1" d="M96.255 231.842 13.038 166.44C4.648 159.867 0 151.065 0 141.706c0-9.36 4.648-18.161 13.038-24.735l83.217-65.513c8.39-6.574 19.727-10.25 31.745-10.25s23.242 3.676 31.745 10.25l83.217 65.402c8.39 6.573 13.038 15.375 13.038 24.734 0 9.36-4.648 18.161-13.038 24.735l-83.217 65.402c-8.503 6.685-19.727 10.362-31.745 10.362s-23.242-3.677-31.745-10.25Z"/><path fill="#FC0" d="M96.255 231.842 13.038 166.44C4.648 159.867 0 151.065 0 141.706c0-9.36 4.648-18.161 13.038-24.735l83.217-65.513c8.39-6.574 19.727-10.25 31.745-10.25s23.242 3.676 31.745 10.25l83.217 65.402c8.39 6.573 13.038 15.375 13.038 24.734 0 9.36-4.648 18.161-13.038 24.735l-83.217 65.402c-8.503 6.685-19.727 10.362-31.745 10.362s-23.242-3.677-31.745-10.25Z"/><path fill-opacity=".1" d="m96.255 190.635-83.217-65.402C4.648 118.659 0 109.857 0 100.498s4.648-18.16 13.038-24.734L96.255 10.25C104.645 3.677 115.982 0 128 0s23.242 3.677 31.745 10.25l83.217 65.402C251.352 82.226 256 91.028 256 100.387s-4.648 18.161-13.038 24.735l-83.217 65.402c-8.503 6.685-19.727 10.361-31.745 10.361s-23.242-3.676-31.745-10.25Z"/><path fill="url(#a)" d="m96.255 190.635-83.217-65.402C4.648 118.659 0 109.857 0 100.498s4.648-18.16 13.038-24.734L96.255 10.25C104.645 3.677 115.982 0 128 0s23.242 3.677 31.745 10.25l83.217 65.402C251.352 82.226 256 91.028 256 100.387s-4.648 18.161-13.038 24.735l-83.217 65.402c-8.503 6.685-19.727 10.361-31.745 10.361s-23.242-3.676-31.745-10.25Z"/><path fill="#FFF" d="M128.287 163.176c42.524 0 76.996-28.178 76.996-62.937 0-34.76-34.472-62.938-76.996-62.938-42.523 0-76.995 28.178-76.995 62.938 0 34.76 34.472 62.937 76.995 62.937Zm0 6.48c-46.9 0-84.921-31.08-84.921-69.417 0-38.338 38.02-69.417 84.921-69.417s84.922 31.079 84.922 69.417c0 38.337-38.02 69.416-84.922 69.416Z"/><path fill="#8CC8F6" d="M133.962 126.953c4.257-.557 8.406-1.744 12.204-3.56l24.237 9.963-12.696-19.02c6.678-8.602 6.678-19.498 0-28.1l12.696-19.02-22.843 9.39-.656 10.043c9.338 7.832 9.1 20.2-.604 27.76-2.476 1.98-5.319 3.37-8.305 4.358l-4.033 8.186Zm-11.33-53.35c-7.03.913-12.299 3.575-12.299 3.575l-24.215-9.962 12.696 19.02c-6.678 8.602-6.678 19.498 0 28.1l-12.696 19.02 23.467-9.646.5-9.407c-9.817-7.809-9.738-20.301.16-28.144 2.302-2.061 7.508-4.244 8.289-4.36l4.099-8.197Z"/><path fill="#FFF" d="m116.64 98.162-3.226 57.174 26.118-53.025 3.74-57.066-26.633 52.917Zm-.338 46.185 20.92-42.446-18.332-3.345-2.588 45.791Z"/></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 283" width="${width}" height="${height}" ${restAttrs}><defs><linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#34AADC"/><stop offset="100%" stop-color="#007AFF"/></linearGradient></defs><path fill="#FF9D00" d="M242.794 157.204c17.608 13.732 17.608 36.323 0 50.166l-82.85 65.116c-17.609 13.732-46.28 13.732-63.888 0l-82.85-65.006c-17.608-13.732-17.608-36.323 0-50.166l82.85-65.116c17.609-13.732 46.28-13.732 63.888 0l82.85 65.006Z"/><path fill-opacity=".1" d="M96.255 231.842 13.038 166.44C4.648 159.867 0 151.065 0 141.706c0-9.36 4.648-18.161 13.038-24.735l83.217-65.513c8.39-6.574 19.727-10.25 31.745-10.25s23.242 3.676 31.745 10.25l83.217 65.402c8.39 6.573 13.038 15.375 13.038 24.734 0 9.36-4.648 18.161-13.038 24.735l-83.217 65.402c-8.503 6.685-19.727 10.362-31.745 10.362s-23.242-3.677-31.745-10.25Z"/><path fill="#FC0" d="M96.255 231.842 13.038 166.44C4.648 159.867 0 151.065 0 141.706c0-9.36 4.648-18.161 13.038-24.735l83.217-65.513c8.39-6.574 19.727-10.25 31.745-10.25s23.242 3.676 31.745 10.25l83.217 65.402c8.39 6.573 13.038 15.375 13.038 24.734 0 9.36-4.648 18.161-13.038 24.735l-83.217 65.402c-8.503 6.685-19.727 10.362-31.745 10.362s-23.242-3.677-31.745-10.25Z"/><path fill-opacity=".1" d="m96.255 190.635-83.217-65.402C4.648 118.659 0 109.857 0 100.498s4.648-18.16 13.038-24.734L96.255 10.25C104.645 3.677 115.982 0 128 0s23.242 3.677 31.745 10.25l83.217 65.402C251.352 82.226 256 91.028 256 100.387s-4.648 18.161-13.038 24.735l-83.217 65.402c-8.503 6.685-19.727 10.361-31.745 10.361s-23.242-3.676-31.745-10.25Z"/><path fill="url(#a)" d="m96.255 190.635-83.217-65.402C4.648 118.659 0 109.857 0 100.498s4.648-18.16 13.038-24.734L96.255 10.25C104.645 3.677 115.982 0 128 0s23.242 3.677 31.745 10.25l83.217 65.402C251.352 82.226 256 91.028 256 100.387s-4.648 18.161-13.038 24.735l-83.217 65.402c-8.503 6.685-19.727 10.361-31.745 10.361s-23.242-3.676-31.745-10.25Z"/><path fill="#FFF" d="M128.287 163.176c42.524 0 76.996-28.178 76.996-62.937 0-34.76-34.472-62.938-76.996-62.938-42.523 0-76.995 28.178-76.995 62.938 0 34.76 34.472 62.937 76.995 62.937Zm0 6.48c-46.9 0-84.921-31.08-84.921-69.417 0-38.338 38.02-69.417 84.921-69.417s84.922 31.079 84.922 69.417c0 38.337-38.02 69.416-84.922 69.416Z"/><path fill="#8CC8F6" d="M133.962 126.953c4.257-.557 8.406-1.744 12.204-3.56l24.237 9.963-12.696-19.02c6.678-8.602 6.678-19.498 0-28.1l12.696-19.02-22.843 9.39-.656 10.043c9.338 7.832 9.1 20.2-.604 27.76-2.476 1.98-5.319 3.37-8.305 4.358l-4.033 8.186Zm-11.33-53.35c-7.03.913-12.299 3.575-12.299 3.575l-24.215-9.962 12.696 19.02c-6.678 8.602-6.678 19.498 0 28.1l-12.696 19.02 23.467-9.646.5-9.407c-9.817-7.809-9.738-20.301.16-28.144 2.302-2.061 7.508-4.244 8.289-4.36l4.099-8.197Z"/><path fill="#FFF" d="m116.64 98.162-3.226 57.174 26.118-53.025 3.74-57.066-26.633 52.917Zm-.338 46.185 20.92-42.446-18.332-3.345-2.588 45.791Z"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/Webdev.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" fill="none" viewBox="0 0 215 64" width="${width}" height="${height}"><path fill="#6CF" d="M1.075 45.08c0-2.88 2.35-5.213 5.248-5.213h27.989c2.898 0 5.248 2.334 5.248 5.212s-2.35 5.213-5.248 5.213H6.322c-2.897 0-5.247-2.334-5.247-5.213Z"/><path fill="#06F" fill-rule="evenodd" d="M2.612 13.594a5.273 5.273 0 0 1 7.422 0l13.994 13.9a5.187 5.187 0 0 1 0 7.371l-13.994 13.9a5.273 5.273 0 0 1-7.422 0 5.187 5.187 0 0 1 0-7.371l9.665-9.6a.865.865 0 0 0 0-1.229l-9.665-9.6a5.187 5.187 0 0 1 0-7.37Z" clip-rule="evenodd"/><path fill="#C6F" d="m18.993 39.867-8.96 8.898a5.273 5.273 0 0 1-7.42 0 5.187 5.187 0 0 1 0-7.371l1.536-1.527h14.844Z"/><path fill="#06F" d="M34.312 50.292c2.898 0 5.248-2.334 5.248-5.213s-2.35-5.212-5.248-5.212-5.248 2.334-5.248 5.212 2.35 5.213 5.248 5.213Z"/><path fill="#5F6368" fill-rule="evenodd" d="M200.552 45.338h-3.784l-8.256-20.33h4.128l6.02 15.717 6.02-15.717h4.128l-8.256 20.33Zm-28.896-12.471h11.696c-.172-2.734-2.408-4.954-5.848-4.954-2.924 0-5.16 1.879-5.848 4.954Zm6.192 13.154c-6.02 0-10.32-4.613-10.32-10.763 0-6.15 4.3-10.762 10.148-10.762 6.02 0 9.976 4.1 9.976 11.104v.342h-15.996c.172 3.929 3.096 6.662 6.536 6.662 2.408 0 4.472-1.196 5.676-3.587l3.44 1.708c-1.892 3.246-5.332 5.296-9.46 5.296Zm-24.08 0c-5.332 0-9.804-4.783-9.804-10.763s4.472-10.762 9.804-10.762c2.924 0 5.676 1.367 7.052 3.417h.172l-.172-2.734v-9.396h3.784v29.555h-3.612v-2.734h-.172c-1.548 2.05-4.128 3.417-7.052 3.417Zm.516-3.417c3.784 0 6.536-2.904 6.536-7.346 0-4.27-2.752-7.345-6.536-7.345-3.612 0-6.536 3.075-6.536 7.345 0 4.271 2.924 7.346 6.536 7.346Zm-11.696.171c0 1.538-1.204 2.733-2.924 2.733-1.548 0-2.924-1.366-2.924-2.733 0-1.537 1.376-2.733 2.924-2.733 1.72 0 2.924 1.196 2.924 2.733Zm-18.06-.17c3.612 0 6.536-3.076 6.536-7.347s-2.924-7.345-6.536-7.345c-3.784 0-6.536 3.075-6.536 7.345 0 4.271 2.752 7.346 6.536 7.346Zm.688 3.416c-2.924 0-5.676-1.367-7.052-3.417h-.172v2.734h-3.612V15.783h3.784v9.396l-.172 2.734h.172c1.376-2.05 3.956-3.417 7.052-3.417 5.332 0 9.804 4.783 9.804 10.762-.172 5.98-4.472 10.763-9.804 10.763ZM95.288 32.867h11.696c-.172-2.734-2.408-4.954-5.848-4.954-2.924 0-5.16 1.879-5.848 4.954Zm6.192 13.154c-6.02 0-10.32-4.613-10.32-10.763 0-6.15 4.3-10.762 10.148-10.762 6.02 0 9.976 4.1 9.976 11.104v.342H95.288c.172 3.929 3.096 6.662 6.536 6.662 2.408 0 4.3-1.196 5.676-3.587l3.44 1.708c-1.892 3.246-5.332 5.296-9.46 5.296ZM90.644 25.179l-6.536 20.33h-3.956l-5.16-15.546-4.988 15.545h-3.956L59.34 25.18h3.956l4.472 15.375 4.988-15.375h3.956L81.7 40.554l4.472-15.375h4.472Z" 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 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 215 64" width="${width}" height="${height}" ${restAttrs}><path fill="#6CF" d="M1.075 45.08c0-2.88 2.35-5.213 5.248-5.213h27.989c2.898 0 5.248 2.334 5.248 5.212s-2.35 5.213-5.248 5.213H6.322c-2.897 0-5.247-2.334-5.247-5.213Z"/><path fill="#06F" fill-rule="evenodd" d="M2.612 13.594a5.273 5.273 0 0 1 7.422 0l13.994 13.9a5.187 5.187 0 0 1 0 7.371l-13.994 13.9a5.273 5.273 0 0 1-7.422 0 5.187 5.187 0 0 1 0-7.371l9.665-9.6a.865.865 0 0 0 0-1.229l-9.665-9.6a5.187 5.187 0 0 1 0-7.37Z" clip-rule="evenodd"/><path fill="#C6F" d="m18.993 39.867-8.96 8.898a5.273 5.273 0 0 1-7.42 0 5.187 5.187 0 0 1 0-7.371l1.536-1.527h14.844Z"/><path fill="#06F" d="M34.312 50.292c2.898 0 5.248-2.334 5.248-5.213s-2.35-5.212-5.248-5.212-5.248 2.334-5.248 5.212 2.35 5.213 5.248 5.213Z"/><path fill="#5F6368" fill-rule="evenodd" d="M200.552 45.338h-3.784l-8.256-20.33h4.128l6.02 15.717 6.02-15.717h4.128l-8.256 20.33Zm-28.896-12.471h11.696c-.172-2.734-2.408-4.954-5.848-4.954-2.924 0-5.16 1.879-5.848 4.954Zm6.192 13.154c-6.02 0-10.32-4.613-10.32-10.763 0-6.15 4.3-10.762 10.148-10.762 6.02 0 9.976 4.1 9.976 11.104v.342h-15.996c.172 3.929 3.096 6.662 6.536 6.662 2.408 0 4.472-1.196 5.676-3.587l3.44 1.708c-1.892 3.246-5.332 5.296-9.46 5.296Zm-24.08 0c-5.332 0-9.804-4.783-9.804-10.763s4.472-10.762 9.804-10.762c2.924 0 5.676 1.367 7.052 3.417h.172l-.172-2.734v-9.396h3.784v29.555h-3.612v-2.734h-.172c-1.548 2.05-4.128 3.417-7.052 3.417Zm.516-3.417c3.784 0 6.536-2.904 6.536-7.346 0-4.27-2.752-7.345-6.536-7.345-3.612 0-6.536 3.075-6.536 7.345 0 4.271 2.924 7.346 6.536 7.346Zm-11.696.171c0 1.538-1.204 2.733-2.924 2.733-1.548 0-2.924-1.366-2.924-2.733 0-1.537 1.376-2.733 2.924-2.733 1.72 0 2.924 1.196 2.924 2.733Zm-18.06-.17c3.612 0 6.536-3.076 6.536-7.347s-2.924-7.345-6.536-7.345c-3.784 0-6.536 3.075-6.536 7.345 0 4.271 2.752 7.346 6.536 7.346Zm.688 3.416c-2.924 0-5.676-1.367-7.052-3.417h-.172v2.734h-3.612V15.783h3.784v9.396l-.172 2.734h.172c1.376-2.05 3.956-3.417 7.052-3.417 5.332 0 9.804 4.783 9.804 10.762-.172 5.98-4.472 10.763-9.804 10.763ZM95.288 32.867h11.696c-.172-2.734-2.408-4.954-5.848-4.954-2.924 0-5.16 1.879-5.848 4.954Zm6.192 13.154c-6.02 0-10.32-4.613-10.32-10.763 0-6.15 4.3-10.762 10.148-10.762 6.02 0 9.976 4.1 9.976 11.104v.342H95.288c.172 3.929 3.096 6.662 6.536 6.662 2.408 0 4.3-1.196 5.676-3.587l3.44 1.708c-1.892 3.246-5.332 5.296-9.46 5.296ZM90.644 25.179l-6.536 20.33h-3.956l-5.16-15.546-4.988 15.545h-3.956L59.34 25.18h3.956l4.472 15.375 4.988-15.375h3.956L81.7 40.554l4.472-15.375h4.472Z" clip-rule="evenodd"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/Webflow.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg viewBox="0 0 1080 674" xmlns="http://www.w3.org/2000/svg" fill="none" width="${width}" height="${height}"><path fill="#146EF5" fill-rule="evenodd" d="M1080 0 735.386 673.684H411.695l144.221-279.203h-6.471C430.464 548.934 252.942 650.61-.0005 673.684v-275.34s161.8135-9.557 256.9385-109.568H-.0005V.0053H288.771V237.515l6.481-.026L413.254.0053h218.39V236.009l6.482-.01L760.555 0H1080Z" 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 1080 674" xmlns="http://www.w3.org/2000/svg" fill="none" width="${width}" height="${height}" ${restAttrs}><path fill="#146EF5" fill-rule="evenodd" d="M1080 0 735.386 673.684H411.695l144.221-279.203h-6.471C430.464 548.934 252.942 650.61-.0005 673.684v-275.34s161.8135-9.557 256.9385-109.568H-.0005V.0053H288.771V237.515l6.481-.026L413.254.0053h218.39V236.009l6.482-.01L760.555 0H1080Z" clip-rule="evenodd"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/WhatsApp.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 259" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="${width}" height="${height}"><path d="m67.663 221.823 4.185 2.093c17.44 10.463 36.971 15.346 56.503 15.346 61.385 0 111.609-50.224 111.609-111.609 0-29.297-11.859-57.897-32.785-78.824-20.927-20.927-48.83-32.785-78.824-32.785-61.385 0-111.61 50.224-110.912 112.307 0 20.926 6.278 41.156 16.741 58.594l2.79 4.186-11.16 41.156 41.853-10.464Z" fill="#00E676"/><path d="M219.033 37.668C195.316 13.254 162.531 0 129.048 0 57.898 0 .698 57.897 1.395 128.35c0 22.322 6.278 43.947 16.742 63.478L0 258.096l67.663-17.439c18.834 10.464 39.76 15.347 60.688 15.347 70.453 0 127.653-57.898 127.653-128.35 0-34.181-13.254-66.269-36.97-89.986ZM129.048 234.38c-18.834 0-37.668-4.882-53.712-14.648l-4.185-2.093-40.458 10.463 10.463-39.76-2.79-4.186C7.673 134.63 22.322 69.058 72.546 38.365c50.224-30.692 115.097-16.043 145.79 34.181 30.692 50.224 16.043 115.097-34.18 145.79-16.045 10.463-35.576 16.043-55.108 16.043Zm61.385-77.428-7.673-3.488s-11.16-4.883-18.136-8.371c-.698 0-1.395-.698-2.093-.698-2.093 0-3.488.698-4.883 1.396 0 0-.697.697-10.463 11.858-.698 1.395-2.093 2.093-3.488 2.093h-.698c-.697 0-2.092-.698-2.79-1.395l-3.488-1.395c-7.673-3.488-14.648-7.674-20.229-13.254-1.395-1.395-3.488-2.79-4.883-4.185-4.883-4.883-9.766-10.464-13.253-16.742l-.698-1.395c-.697-.698-.697-1.395-1.395-2.79 0-1.395 0-2.79.698-3.488 0 0 2.79-3.488 4.882-5.58 1.396-1.396 2.093-3.488 3.488-4.883 1.395-2.093 2.093-4.883 1.395-6.976-.697-3.488-9.068-22.322-11.16-26.507-1.396-2.093-2.79-2.79-4.883-3.488H83.01c-1.396 0-2.79.698-4.186.698l-.698.697c-1.395.698-2.79 2.093-4.185 2.79-1.395 1.396-2.093 2.79-3.488 4.186-4.883 6.278-7.673 13.951-7.673 21.624 0 5.58 1.395 11.161 3.488 16.044l.698 2.093c6.278 13.253 14.648 25.112 25.81 35.575l2.79 2.79c2.092 2.093 4.185 3.488 5.58 5.58 14.649 12.557 31.39 21.625 50.224 26.508 2.093.697 4.883.697 6.976 1.395h6.975c3.488 0 7.673-1.395 10.464-2.79 2.092-1.395 3.487-1.395 4.882-2.79l1.396-1.396c1.395-1.395 2.79-2.092 4.185-3.487 1.395-1.395 2.79-2.79 3.488-4.186 1.395-2.79 2.092-6.278 2.79-9.765v-4.883s-.698-.698-2.093-1.395Z" fill="#FFF"/></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" fill="none" viewBox="0 0 360 362" width="${width}" height="${height}" ${restAttrs}><path fill="#25D366" fill-rule="evenodd" d="M307.546 52.566C273.709 18.684 228.706.017 180.756 0 81.951 0 1.538 80.404 1.504 179.235c-.017 31.594 8.242 62.432 23.928 89.609L0 361.736l95.024-24.925c26.179 14.285 55.659 21.805 85.655 21.814h.077c98.788 0 179.21-80.413 179.244-179.244.017-47.898-18.608-92.926-52.454-126.807v-.008Zm-126.79 275.788h-.06c-26.73-.008-52.952-7.194-75.831-20.765l-5.44-3.231-56.391 14.791 15.05-54.981-3.542-5.638c-14.912-23.721-22.793-51.139-22.776-79.286.035-82.14 66.867-148.973 149.051-148.973 39.793.017 77.198 15.53 105.328 43.695 28.131 28.157 43.61 65.596 43.593 105.398-.035 82.149-66.867 148.982-148.982 148.982v.008Zm81.719-111.577c-4.478-2.243-26.497-13.073-30.606-14.568-4.108-1.496-7.09-2.243-10.073 2.243-2.982 4.487-11.568 14.577-14.181 17.559-2.613 2.991-5.226 3.361-9.704 1.117-4.477-2.243-18.908-6.97-36.02-22.226-13.313-11.878-22.304-26.54-24.916-31.027-2.613-4.486-.275-6.91 1.959-9.136 2.011-2.011 4.478-5.234 6.721-7.847 2.244-2.613 2.983-4.486 4.478-7.469 1.496-2.991.748-5.603-.369-7.847-1.118-2.243-10.073-24.289-13.812-33.253-3.636-8.732-7.331-7.546-10.073-7.692-2.613-.13-5.595-.155-8.586-.155-2.991 0-7.839 1.118-11.947 5.604-4.108 4.486-15.677 15.324-15.677 37.361s16.047 43.344 18.29 46.335c2.243 2.991 31.585 48.225 76.51 67.632 10.684 4.615 19.029 7.374 25.535 9.437 10.727 3.412 20.49 2.931 28.208 1.779 8.604-1.289 26.498-10.838 30.228-21.298 3.73-10.46 3.73-19.433 2.613-21.298-1.117-1.865-4.108-2.991-8.586-5.234l.008-.017Z" clip-rule="evenodd"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/Whop.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 28.0.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 383.2 196.4" style="enable-background:new 0 0 383.2 196.4;" xml:space="preserve" width="${width}" height="${height}">
+	 viewBox="0 0 383.2 196.4" style="enable-background:new 0 0 383.2 196.4;" xml:space="preserve" width="${width}" height="${height}" ${restAttrs}>
 <style>
 	.st0{fill:#FF6143;}
 </style>

package/dist/components/WindiCSS.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 279" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="${width}" height="${height}"><defs><linearGradient id="a" x1="16.639%" x2="137.275%" y1="36.186%" y2="175.371%"><stop offset="7.822%" stop-color="#54C8F1"/><stop offset="57.292%" stop-color="#41A2EF"/><stop offset="100%" stop-color="#3386EE"/></linearGradient><linearGradient id="b" x1="-22.099%" x2="91.451%" y1="-49.621%" y2="73.695%"><stop offset="7.822%" stop-color="#54C8F1"/><stop offset="57.292%" stop-color="#41A2EF"/><stop offset="100%" stop-color="#3386EE"/></linearGradient><linearGradient id="c" x1="8.696%" x2="71.739%" y1="37.461%" y2="80.271%"><stop offset="7.822%" stop-color="#54C8F1"/><stop offset="57.292%" stop-color="#41A2EF"/><stop offset="100%" stop-color="#3386EE"/></linearGradient><linearGradient id="d" x1="60.744%" x2="501.135%" y1="-308.636%" y2="225.788%"><stop offset="7.822%" stop-color="#54C8F1"/><stop offset="57.292%" stop-color="#41A2EF"/><stop offset="100%" stop-color="#3386EE"/></linearGradient></defs><path fill="url(#a)" d="M133.784 48.922C133.784 21.945 111.84 0 84.863 0c-28.43 0-45.428 21.316-45.428 41.933h27.956c0-5.8 5.423-13.978 17.472-13.978 11.56 0 20.966 9.407 20.966 20.967 0 11.56-8.438 20.966-29.715 20.966H0v27.955h76.114c35.911 0 57.67-21.944 57.67-48.921Zm0 0C133.784 21.945 111.84 0 84.863 0c-28.43 0-45.428 21.316-45.428 41.933h27.956c0-5.8 5.423-13.978 17.472-13.978 11.56 0 20.966 9.407 20.966 20.967 0 11.56-8.438 20.966-29.715 20.966H0v27.955h76.114c35.911 0 57.67-21.944 57.67-48.921Z"/><path fill="url(#b)" d="M195.803 229.339c0 26.978-21.945 48.922-48.922 48.922-28.43 0-45.427-21.315-45.427-41.933h27.955c0 5.8 5.423 13.979 17.472 13.979 11.56 0 20.967-9.408 20.967-20.968s-10.63-20.966-29.716-20.966H53.671v-27.956h84.461c35.912 0 57.671 21.945 57.671 48.922Zm0 0c0 26.978-21.945 48.922-48.922 48.922-28.43 0-45.427-21.315-45.427-41.933h27.955c0 5.8 5.423 13.979 17.472 13.979 11.56 0 20.967-9.408 20.967-20.968s-10.63-20.966-29.716-20.966H53.671v-27.956h84.461c35.912 0 57.671 21.945 57.671 48.922Z"/><path fill="url(#c)" d="M203.13 43.13c-30.834 0-52.585 23.45-52.585 54.284h24.76c0-15.327 11.13-26.457 27.825-26.457 16.696 0 25.044 11.13 25.044 26.457s-10.842 27.955-40.348 27.955H0v27.956h192c43.695 0 64-28.085 64-55.911 0-30.835-20.87-54.284-52.87-54.284Z"/><path fill="url(#d)" d="M36.647 180.417H0v28.19h36.647z"/></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 279" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="${width}" height="${height}" ${restAttrs}><defs><linearGradient id="a" x1="16.639%" x2="137.275%" y1="36.186%" y2="175.371%"><stop offset="7.822%" stop-color="#54C8F1"/><stop offset="57.292%" stop-color="#41A2EF"/><stop offset="100%" stop-color="#3386EE"/></linearGradient><linearGradient id="b" x1="-22.099%" x2="91.451%" y1="-49.621%" y2="73.695%"><stop offset="7.822%" stop-color="#54C8F1"/><stop offset="57.292%" stop-color="#41A2EF"/><stop offset="100%" stop-color="#3386EE"/></linearGradient><linearGradient id="c" x1="8.696%" x2="71.739%" y1="37.461%" y2="80.271%"><stop offset="7.822%" stop-color="#54C8F1"/><stop offset="57.292%" stop-color="#41A2EF"/><stop offset="100%" stop-color="#3386EE"/></linearGradient><linearGradient id="d" x1="60.744%" x2="501.135%" y1="-308.636%" y2="225.788%"><stop offset="7.822%" stop-color="#54C8F1"/><stop offset="57.292%" stop-color="#41A2EF"/><stop offset="100%" stop-color="#3386EE"/></linearGradient></defs><path fill="url(#a)" d="M133.784 48.922C133.784 21.945 111.84 0 84.863 0c-28.43 0-45.428 21.316-45.428 41.933h27.956c0-5.8 5.423-13.978 17.472-13.978 11.56 0 20.966 9.407 20.966 20.967 0 11.56-8.438 20.966-29.715 20.966H0v27.955h76.114c35.911 0 57.67-21.944 57.67-48.921Zm0 0C133.784 21.945 111.84 0 84.863 0c-28.43 0-45.428 21.316-45.428 41.933h27.956c0-5.8 5.423-13.978 17.472-13.978 11.56 0 20.966 9.407 20.966 20.967 0 11.56-8.438 20.966-29.715 20.966H0v27.955h76.114c35.911 0 57.67-21.944 57.67-48.921Z"/><path fill="url(#b)" d="M195.803 229.339c0 26.978-21.945 48.922-48.922 48.922-28.43 0-45.427-21.315-45.427-41.933h27.955c0 5.8 5.423 13.979 17.472 13.979 11.56 0 20.967-9.408 20.967-20.968s-10.63-20.966-29.716-20.966H53.671v-27.956h84.461c35.912 0 57.671 21.945 57.671 48.922Zm0 0c0 26.978-21.945 48.922-48.922 48.922-28.43 0-45.427-21.315-45.427-41.933h27.955c0 5.8 5.423 13.979 17.472 13.979 11.56 0 20.967-9.408 20.967-20.968s-10.63-20.966-29.716-20.966H53.671v-27.956h84.461c35.912 0 57.671 21.945 57.671 48.922Z"/><path fill="url(#c)" d="M203.13 43.13c-30.834 0-52.585 23.45-52.585 54.284h24.76c0-15.327 11.13-26.457 27.825-26.457 16.696 0 25.044 11.13 25.044 26.457s-10.842 27.955-40.348 27.955H0v27.956h192c43.695 0 64-28.085 64-55.911 0-30.835-20.87-54.284-52.87-54.284Z"/><path fill="url(#d)" d="M36.647 180.417H0v28.19h36.647z"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/Windows.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg viewBox="0 0 88 88" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><path d="m0 12.402 35.687-4.86.016 34.423-35.67.203zm35.67 33.529.028 34.453L.028 75.48.026 45.7zm4.326-39.025L87.314 0v41.527l-47.318.376zm47.329 39.349-.011 41.34-47.318-6.678-.066-34.739z" fill="#00adef"/></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 88 88" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" ${restAttrs}><path d="m0 12.402 35.687-4.86.016 34.423-35.67.203zm35.67 33.529.028 34.453L.028 75.48.026 45.7zm4.326-39.025L87.314 0v41.527l-47.318.376zm47.329 39.349-.011 41.34-47.318-6.678-.066-34.739z" fill="#00adef"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/Windsurf.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" fill="none" viewBox="0 0 166 263" width="${width}" height="${height}"><g filter="url(#a)"><path fill="#58E5BB" d="M42.086 128.474 28.427 90.089c-2.383-6.696 2.436-13.802 9.291-13.48 76.537 3.589 115.804 31.534 112.144 112.12-13.311-56.28-77.153-60.255-107.776-60.255Z"/></g><g filter="url(#b)"><path fill="#58E5BB" d="M21.453 57.833 7.236 20.639C4.662 13.908 9.478 6.6 16.44 6.683c78.163.938 132.738 6.243 132.738 110.722-13.311-56.28-97.101-59.572-127.725-59.572Z"/></g><g filter="url(#c)"><path fill="#58E5BB" d="m63.245 201.377-14.653-41.075c-2.376-6.661 2.376-13.751 9.196-13.388 62.444 3.327 93.677 30.587 90.06 110.239-13.311-56.28-53.76-55.776-84.604-55.776Z"/></g><defs><filter id="a" width="122.286" height="116.131" x="27.81" y="76.598" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="shape" result="effect1_innerShadow_15473_4390"/></filter><filter id="b" width="142.645" height="114.724" x="6.533" y="6.682" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="shape" result="effect1_innerShadow_15473_4390"/></filter><filter id="c" width="100.158" height="114.252" x="47.972" y="146.9" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="shape" result="effect1_innerShadow_15473_4390"/></filter></defs></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 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" ${restAttrs}><path d="M897.246 286.869H889.819C850.735 286.808 819.017 318.46 819.017 357.539V515.589C819.017 547.15 792.93 572.716 761.882 572.716C743.436 572.716 725.02 563.433 714.093 547.85L552.673 317.304C539.28 298.16 517.486 286.747 493.895 286.747C457.094 286.747 423.976 318.034 423.976 356.657V515.619C423.976 547.181 398.103 572.746 366.842 572.746C348.335 572.746 329.949 563.463 319.021 547.881L138.395 289.882C134.316 284.038 125.154 286.93 125.154 294.052V431.892C125.154 438.862 127.285 445.619 131.272 451.34L309.037 705.2C319.539 720.204 335.033 731.344 352.9 735.392C397.616 745.557 438.77 711.135 438.77 667.278V508.406C438.77 476.845 464.339 451.279 495.904 451.279H495.995C515.02 451.279 532.857 460.562 543.785 476.145L705.235 706.661C718.659 725.835 739.327 737.218 763.983 737.218C801.606 737.218 833.841 705.9 833.841 667.308V508.376C833.841 476.815 859.41 451.249 890.975 451.249H897.276C901.233 451.249 904.43 448.053 904.43 444.097V294.021C904.43 290.065 901.233 286.869 897.276 286.869H897.246Z" fill="#0b100f"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/WordPress.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg viewBox="0 0 122.52 122.523" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><g fill="#21759b"><path d="m8.708 61.26c0 20.802 12.089 38.779 29.619 47.298l-25.069-68.686c-2.916 6.536-4.55 13.769-4.55 21.388z"/><path d="m96.74 58.608c0-6.495-2.333-10.993-4.334-14.494-2.664-4.329-5.161-7.995-5.161-12.324 0-4.831 3.664-9.328 8.825-9.328.233 0 .454.029.681.042-9.35-8.566-21.807-13.796-35.489-13.796-18.36 0-34.513 9.42-43.91 23.688 1.233.037 2.395.063 3.382.063 5.497 0 14.006-.667 14.006-.667 2.833-.167 3.167 3.994.337 4.329 0 0-2.847.335-6.015.501l19.138 56.925 11.501-34.493-8.188-22.434c-2.83-.166-5.511-.501-5.511-.501-2.832-.166-2.5-4.496.332-4.329 0 0 8.679.667 13.843.667 5.496 0 14.006-.667 14.006-.667 2.835-.167 3.168 3.994.337 4.329 0 0-2.853.335-6.015.501l18.992 56.494 5.242-17.517c2.272-7.269 4.001-12.49 4.001-16.989z"/><path d="m62.184 65.857-15.768 45.819c4.708 1.384 9.687 2.141 14.846 2.141 6.12 0 11.989-1.058 17.452-2.979-.141-.225-.269-.464-.374-.724z"/><path d="m107.376 36.046c.226 1.674.354 3.471.354 5.404 0 5.333-.996 11.328-3.996 18.824l-16.053 46.413c15.624-9.111 26.133-26.038 26.133-45.426.001-9.137-2.333-17.729-6.438-25.215z"/><path d="m61.262 0c-33.779 0-61.262 27.481-61.262 61.26 0 33.783 27.483 61.263 61.262 61.263 33.778 0 61.265-27.48 61.265-61.263-.001-33.779-27.487-61.26-61.265-61.26zm0 119.715c-32.23 0-58.453-26.223-58.453-58.455 0-32.23 26.222-58.451 58.453-58.451 32.229 0 58.45 26.221 58.45 58.451 0 32.232-26.221 58.455-58.45 58.455z"/></g></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 122.52 122.523" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" ${restAttrs}><g fill="#21759b"><path d="m8.708 61.26c0 20.802 12.089 38.779 29.619 47.298l-25.069-68.686c-2.916 6.536-4.55 13.769-4.55 21.388z"/><path d="m96.74 58.608c0-6.495-2.333-10.993-4.334-14.494-2.664-4.329-5.161-7.995-5.161-12.324 0-4.831 3.664-9.328 8.825-9.328.233 0 .454.029.681.042-9.35-8.566-21.807-13.796-35.489-13.796-18.36 0-34.513 9.42-43.91 23.688 1.233.037 2.395.063 3.382.063 5.497 0 14.006-.667 14.006-.667 2.833-.167 3.167 3.994.337 4.329 0 0-2.847.335-6.015.501l19.138 56.925 11.501-34.493-8.188-22.434c-2.83-.166-5.511-.501-5.511-.501-2.832-.166-2.5-4.496.332-4.329 0 0 8.679.667 13.843.667 5.496 0 14.006-.667 14.006-.667 2.835-.167 3.168 3.994.337 4.329 0 0-2.853.335-6.015.501l18.992 56.494 5.242-17.517c2.272-7.269 4.001-12.49 4.001-16.989z"/><path d="m62.184 65.857-15.768 45.819c4.708 1.384 9.687 2.141 14.846 2.141 6.12 0 11.989-1.058 17.452-2.979-.141-.225-.269-.464-.374-.724z"/><path d="m107.376 36.046c.226 1.674.354 3.471.354 5.404 0 5.333-.996 11.328-3.996 18.824l-16.053 46.413c15.624-9.111 26.133-26.038 26.133-45.426.001-9.137-2.333-17.729-6.438-25.215z"/><path d="m61.262 0c-33.779 0-61.262 27.481-61.262 61.26 0 33.783 27.483 61.263 61.262 61.263 33.778 0 61.265-27.48 61.265-61.263-.001-33.779-27.487-61.26-61.265-61.26zm0 119.715c-32.23 0-58.453-26.223-58.453-58.455 0-32.23 26.222-58.451 58.453-58.451 32.229 0 58.45 26.221 58.45 58.451 0 32.232-26.221 58.455-58.45 58.455z"/></g></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/WorkOS.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg version="1.1" id="Layer_1" xmlns:x="ns_extend;" xmlns:i="ns_ai;" xmlns:graph="ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 55.4 48" style="enable-background:new 0 0 55.4 48;" xml:space="preserve" 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 version="1.1" id="Layer_1" xmlns:x="ns_extend;" xmlns:i="ns_ai;" xmlns:graph="ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 55.4 48" style="enable-background:new 0 0 55.4 48;" xml:space="preserve" width="${width}" height="${height}" ${restAttrs}>
  <style>
   .st0{fill:#6363F1;}
  </style>

package/dist/components/XAIGrok.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" xml:space="preserve" style="enable-background:new 0 0 841.89 595.28" viewBox="0 0 841.89 595.28" width="${width}" height="${height}"><path d="m557.09 211.99 8.31 326.37h66.56l8.32-445.18zM640.28 56.91H538.72L379.35 284.53l50.78 72.52zM201.61 538.36h101.56l50.79-72.52-50.79-72.53zM201.61 211.99l228.52 326.37h101.56L303.17 211.99z"/></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" xml:space="preserve" style="enable-background:new 0 0 841.89 595.28" viewBox="0 0 841.89 595.28" width="${width}" height="${height}" ${restAttrs}><path d="m557.09 211.99 8.31 326.37h66.56l8.32-445.18zM640.28 56.91H538.72L379.35 284.53l50.78 72.52zM201.61 538.36h101.56l50.79-72.52-50.79-72.53zM201.61 211.99l228.52 326.37h101.56L303.17 211.99z"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/XD.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" xml:space="preserve" viewBox="0 0 240 234" 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" xml:space="preserve" viewBox="0 0 240 234" width="${width}" height="${height}" ${restAttrs}>
   <path fill="#470137" d="M42.5 0h155C221 0 240 19 240 42.5v149c0 23.5-19 42.5-42.5 42.5h-155C19 234 0 215 0 191.5v-149C0 19 19 0 42.5 0z"/>
     <path fill="#ff61f6" d="m126.2 61.5-30 49.5 32 52.5c.2.4.3.8.2 1.2-.1.4-.5.1-1.1.2h-22.9c-1.6 0-2.7-.1-3.4-1.1-2.1-4.2-4.3-8.3-6.4-12.5-2.1-4.1-4.4-8.3-6.8-12.6-2.4-4.3-4.8-8.6-7.2-13h-.2c-2.1 4.3-4.4 8.6-6.7 12.9-2.3 4.3-4.6 8.6-6.8 12.8-2.3 4.2-4.6 8.5-6.9 12.6-.4 1-1.2 1.1-2.3 1.1h-22c-.4 0-.7.2-.7-.3-.1-.4 0-.8.2-1.1l31.1-51L36 61.4c-.3-.4-.4-.8-.2-1 .2-.3.6-.4 1-.4h22.7c.5 0 1 .1 1.4.2.4.2.7.5 1 .9 1.9 4.3 4.1 8.6 6.4 12.9 2.4 4.3 4.7 8.5 7.2 12.7 2.4 4.2 4.6 8.4 6.7 12.7h.2c2.1-4.4 4.3-8.7 6.5-12.9 2.2-4.2 4.5-8.4 6.8-12.6 2.3-4.2 4.5-8.5 6.7-12.6.1-.4.3-.8.6-1 .4-.2.8-.3 1.3-.2h21.1c.5-.1 1 .2 1.1.7.1.1-.1.5-.3.7zM172.4 167c-7.4.1-14.8-1.4-21.5-4.5-6.3-2.9-11.5-7.7-15.1-13.6-3.7-6.1-5.5-13.7-5.5-22.8-.1-7.4 1.8-14.7 5.5-21.1 3.8-6.5 9.3-11.9 15.9-15.5 7-3.9 15.4-5.8 25.3-5.8.5 0 1.2 0 2.1.1.9.1 1.9.1 3.1.2V52.4c0-.7.3-1.1 1-1.1h20.3c.5-.1.9.3 1 .7v95.4c0 1.8.1 3.8.2 6 .2 2.1.3 4.1.4 5.8 0 .7-.3 1.3-1 1.6-5.2 2.2-10.7 3.8-16.3 4.8-5.1.9-10.2 1.4-15.4 1.4zm9.8-20v-44c-.9-.2-1.8-.4-2.7-.5-1.1-.1-2.2-.2-3.3-.2-3.9 0-7.8.8-11.3 2.6-3.4 1.7-6.3 4.2-8.5 7.4s-3.3 7.5-3.3 12.7c-.1 3.5.5 7 1.7 10.3 1 2.7 2.5 5.1 4.5 7.1 1.9 1.8 4.2 3.2 6.8 4 2.7.9 5.5 1.3 8.3 1.3 1.5 0 2.9-.1 4.2-.2 1.3.1 2.4-.1 3.6-.5z"/>
 </svg>`;

package/dist/components/XRP.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}"><title>icon/xrp</title><desc>Created with Sketch.</desc><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1"><stop stop-color="#FFF" stop-opacity=".5" offset="0%"/><stop stop-color="#000" stop-opacity=".5" offset="100%"/></linearGradient><circle id="path-2" cx="15" cy="15" r="15"/><filter x="-5.8%" y="-4.2%" width="111.7%" height="111.7%" filterUnits="objectBoundingBox" id="filter-3"><feOffset dx="0" dy=".5" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation=".5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.199473505 0" type="matrix" in="shadowBlurOuter1"/></filter></defs><g id="icon/xrp" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Group" transform="translate(1.000000, 0.000000)" fill-rule="nonzero"><g id="Oval"><use fill="#000" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"/><use fill="#23292F" fill-rule="evenodd" xlink:href="#path-2"/><use fill="url(#linearGradient-1)" fill-rule="evenodd" style="mix-blend-mode:soft-light" xlink:href="#path-2"/><circle stroke-opacity=".097" stroke="#000" stroke-width="1" stroke-linejoin="square" cx="15" cy="15" r="14.5"/></g></g><g id="XRP-(XRP)" transform="translate(7.000000, 8.000000)" fill="#FFF" fill-rule="nonzero"><path d="M15.3632812,0 L17.9648438,0 L12.5507812,5.36132812 C10.5890625,7.30195312 7.4109375,7.30195312 5.44921875,5.36132812 L0.031640625,0 L2.63671875,0 L6.75,4.07109375 C7.99101562,5.3015625 10.0054688,5.3015625 11.2464844,4.07109375 L15.3632812,0 Z" id="Vector"/><path d="M2.60507812,14.90625 L0,14.90625 L5.44921875,9.51328125 C7.4109375,7.57265625 10.5890625,7.57265625 12.5507812,9.51328125 L18,14.90625 L15.3949219,14.90625 L11.25,10.8 C10.0089844,9.56953125 7.99453125,9.56953125 6.75351562,10.8 L2.60507812,14.90625 Z" id="Vector_2"/></g></g></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 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}" ${restAttrs}><title>icon/xrp</title><desc>Created with Sketch.</desc><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1"><stop stop-color="#FFF" stop-opacity=".5" offset="0%"/><stop stop-color="#000" stop-opacity=".5" offset="100%"/></linearGradient><circle id="path-2" cx="15" cy="15" r="15"/><filter x="-5.8%" y="-4.2%" width="111.7%" height="111.7%" filterUnits="objectBoundingBox" id="filter-3"><feOffset dx="0" dy=".5" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation=".5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.199473505 0" type="matrix" in="shadowBlurOuter1"/></filter></defs><g id="icon/xrp" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Group" transform="translate(1.000000, 0.000000)" fill-rule="nonzero"><g id="Oval"><use fill="#000" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"/><use fill="#23292F" fill-rule="evenodd" xlink:href="#path-2"/><use fill="url(#linearGradient-1)" fill-rule="evenodd" style="mix-blend-mode:soft-light" xlink:href="#path-2"/><circle stroke-opacity=".097" stroke="#000" stroke-width="1" stroke-linejoin="square" cx="15" cy="15" r="14.5"/></g></g><g id="XRP-(XRP)" transform="translate(7.000000, 8.000000)" fill="#FFF" fill-rule="nonzero"><path d="M15.3632812,0 L17.9648438,0 L12.5507812,5.36132812 C10.5890625,7.30195312 7.4109375,7.30195312 5.44921875,5.36132812 L0.031640625,0 L2.63671875,0 L6.75,4.07109375 C7.99101562,5.3015625 10.0054688,5.3015625 11.2464844,4.07109375 L15.3632812,0 Z" id="Vector"/><path d="M2.60507812,14.90625 L0,14.90625 L5.44921875,9.51328125 C7.4109375,7.57265625 10.5890625,7.57265625 12.5507812,9.51328125 L18,14.90625 L15.3949219,14.90625 L11.25,10.8 C10.0089844,9.56953125 7.99453125,9.56953125 6.75351562,10.8 L2.60507812,14.90625 Z" id="Vector_2"/></g></g></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/XState.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg viewBox="0 0 800 405" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><g fill="#000" fill-rule="evenodd"><path d="M342.953 156.14c20.78 0 33.34 8.767 35.358 24.687l.061.48H366.49l-.074-.333c-2.34-10.754-9.356-15.342-23.463-15.342-12.799 0-20.752 5.323-20.752 13.889 0 8.456 3.477 12.681 24.072 15.378 21.535 2.94 34.883 8.334 34.883 26.096 0 15.089-15.264 26.467-35.5 26.467-29.518 0-37.608-15.437-39.196-28.39l-.059-.478h12.76l.054.363c1.47 9.876 5.691 19.016 26.438 19.016 13.178 0 22.74-6.83 22.74-16.239 0-10.026-5.659-13.879-24.218-16.485-17.819-2.376-34.307-7.016-34.307-24.738 0-14.122 13.914-24.371 33.085-24.371Zm122.576 1.11v11.316h-29.547v77.787H422.79v-77.787h-29.547V157.25h72.285Zm52.908 0 34.709 89.103h-13.108l-9.947-25.427h-41.344l-9.8 25.427h-12.549l35.283-89.104h16.756Zm108.826 0v11.316h-29.547v77.787h-13.188v-77.784H554.98v-11.317h72.282v-.003Zm81.737 0v11.316h-49.311v27.44h25.027v11.195h-25.027v27.832H709v11.317h-62.5v-89.1H709Zm-199.51 10.462-16.154 42.994h32.306l-16.153-42.994ZM99.363 113l33.464.272c3.251.026 6.31 1.54 8.304 4.108l119.56 154.056c2.71 3.488.22 8.564-4.192 8.564h-35.035c-3.31 0-6.432-1.543-8.44-4.172l-33.345-45.635-36.905 45.777a10.623 10.623 0 0 1-8.33 4.03H99.32c-4.437 0-6.917-5.122-4.165-8.603l58.543-74.144-58.595-75.718c-2.68-3.51-.154-8.569 4.263-8.532l-.002-.003Zm157.091 0c4.46-.034 6.973 5.108 4.207 8.603l-52.239 66.006c-3.726-2.932-32.644-27.14-4.745-59.556 0 0 2.183-2.554 4.435-5.195l.436-.511.435-.51a676.11 676.11 0 0 0 3.842-4.533c2.759-3.339 5.03-4.005 8.247-4.03l35.382-.274Z"/></g></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 800 405" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" ${restAttrs}><g fill="#000" fill-rule="evenodd"><path d="M342.953 156.14c20.78 0 33.34 8.767 35.358 24.687l.061.48H366.49l-.074-.333c-2.34-10.754-9.356-15.342-23.463-15.342-12.799 0-20.752 5.323-20.752 13.889 0 8.456 3.477 12.681 24.072 15.378 21.535 2.94 34.883 8.334 34.883 26.096 0 15.089-15.264 26.467-35.5 26.467-29.518 0-37.608-15.437-39.196-28.39l-.059-.478h12.76l.054.363c1.47 9.876 5.691 19.016 26.438 19.016 13.178 0 22.74-6.83 22.74-16.239 0-10.026-5.659-13.879-24.218-16.485-17.819-2.376-34.307-7.016-34.307-24.738 0-14.122 13.914-24.371 33.085-24.371Zm122.576 1.11v11.316h-29.547v77.787H422.79v-77.787h-29.547V157.25h72.285Zm52.908 0 34.709 89.103h-13.108l-9.947-25.427h-41.344l-9.8 25.427h-12.549l35.283-89.104h16.756Zm108.826 0v11.316h-29.547v77.787h-13.188v-77.784H554.98v-11.317h72.282v-.003Zm81.737 0v11.316h-49.311v27.44h25.027v11.195h-25.027v27.832H709v11.317h-62.5v-89.1H709Zm-199.51 10.462-16.154 42.994h32.306l-16.153-42.994ZM99.363 113l33.464.272c3.251.026 6.31 1.54 8.304 4.108l119.56 154.056c2.71 3.488.22 8.564-4.192 8.564h-35.035c-3.31 0-6.432-1.543-8.44-4.172l-33.345-45.635-36.905 45.777a10.623 10.623 0 0 1-8.33 4.03H99.32c-4.437 0-6.917-5.122-4.165-8.603l58.543-74.144-58.595-75.718c-2.68-3.51-.154-8.569 4.263-8.532l-.002-.003Zm157.091 0c4.46-.034 6.973 5.108 4.207 8.603l-52.239 66.006c-3.726-2.932-32.644-27.14-4.745-59.556 0 0 2.183-2.554 4.435-5.195l.436-.511.435-.51a676.11 676.11 0 0 0 3.842-4.533c2.759-3.339 5.03-4.005 8.247-4.03l35.382-.274Z"/></g></svg>
 `;
 </script>
 

package/dist/components/Xbox.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg viewBox="0 0 88 88" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><title>Xbox Logo</title><path fill="#107c10" d="M39.73 86.91c-6.628-.635-13.338-3.015-19.102-6.776-4.83-3.15-5.92-4.447-5.92-7.032 0-5.193 5.71-14.29 15.48-24.658 5.547-5.89 13.275-12.79 14.11-12.604 1.626.363 14.616 13.034 19.48 19 7.69 9.43 11.224 17.154 9.428 20.597-1.365 2.617-9.837 7.733-16.06 9.698-5.13 1.62-11.867 2.306-17.416 1.775zM8.184 67.703c-4.014-6.158-6.042-12.22-7.02-20.988-.324-2.895-.21-4.55.733-10.494 1.173-7.4 5.39-15.97 10.46-21.24 2.158-2.24 2.35-2.3 4.982-1.41 3.19 1.08 6.6 3.436 11.89 8.22l3.09 2.794-1.69 2.07c-7.828 9.61-16.09 23.24-19.2 31.67-1.69 4.58-2.37 9.18-1.64 11.095.49 1.294.04.812-1.61-1.714zm70.453 1.047c.397-1.936-.105-5.49-1.28-9.076-2.545-7.765-11.054-22.21-18.867-32.032l-2.46-3.092 2.662-2.443c3.474-3.19 5.886-5.1 8.49-6.723 2.053-1.28 4.988-2.413 6.25-2.413.777 0 3.516 2.85 5.726 5.95 3.424 4.8 5.942 10.63 7.218 16.69.825 3.92.894 12.3.133 16.21-.63 3.208-1.95 7.366-3.23 10.187-.97 2.113-3.36 6.218-4.41 7.554-.54.687-.54.686-.24-.796zM40.44 11.505C36.834 9.675 31.272 7.71 28.2 7.18c-1.076-.185-2.913-.29-4.08-.23-2.536.128-2.423-.004 1.643-1.925 3.38-1.597 6.2-2.536 10.03-3.34C40.098.78 48.193.77 52.43 1.663c4.575.965 9.964 2.97 13 4.84l.904.554-2.07-.104C60.148 6.745 54.15 8.408 47.71 11.54c-1.942.946-3.63 1.7-3.754 1.68-.123-.024-1.706-.795-3.52-1.715z"/></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 88 88" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" ${restAttrs}><title>Xbox Logo</title><path fill="#107c10" d="M39.73 86.91c-6.628-.635-13.338-3.015-19.102-6.776-4.83-3.15-5.92-4.447-5.92-7.032 0-5.193 5.71-14.29 15.48-24.658 5.547-5.89 13.275-12.79 14.11-12.604 1.626.363 14.616 13.034 19.48 19 7.69 9.43 11.224 17.154 9.428 20.597-1.365 2.617-9.837 7.733-16.06 9.698-5.13 1.62-11.867 2.306-17.416 1.775zM8.184 67.703c-4.014-6.158-6.042-12.22-7.02-20.988-.324-2.895-.21-4.55.733-10.494 1.173-7.4 5.39-15.97 10.46-21.24 2.158-2.24 2.35-2.3 4.982-1.41 3.19 1.08 6.6 3.436 11.89 8.22l3.09 2.794-1.69 2.07c-7.828 9.61-16.09 23.24-19.2 31.67-1.69 4.58-2.37 9.18-1.64 11.095.49 1.294.04.812-1.61-1.714zm70.453 1.047c.397-1.936-.105-5.49-1.28-9.076-2.545-7.765-11.054-22.21-18.867-32.032l-2.46-3.092 2.662-2.443c3.474-3.19 5.886-5.1 8.49-6.723 2.053-1.28 4.988-2.413 6.25-2.413.777 0 3.516 2.85 5.726 5.95 3.424 4.8 5.942 10.63 7.218 16.69.825 3.92.894 12.3.133 16.21-.63 3.208-1.95 7.366-3.23 10.187-.97 2.113-3.36 6.218-4.41 7.554-.54.687-.54.686-.24-.796zM40.44 11.505C36.834 9.675 31.272 7.71 28.2 7.18c-1.076-.185-2.913-.29-4.08-.23-2.536.128-2.423-.004 1.643-1.925 3.38-1.597 6.2-2.536 10.03-3.34C40.098.78 48.193.77 52.43 1.663c4.575.965 9.964 2.97 13 4.84l.904.554-2.07-.104C60.148 6.745 54.15 8.408 47.71 11.54c-1.942.946-3.63 1.7-3.754 1.68-.123-.024-1.706-.795-3.52-1.715z"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/XformerlyTwitter.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" fill="none" viewBox="0 0 1200 1227" width="${width}" height="${height}"><path fill="#000" d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"/></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" fill="none" viewBox="0 0 1200 1227" width="${width}" height="${height}" ${restAttrs}><path fill="#000" d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/YGeeker.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" xml:space="preserve" stroke-miterlimit="10" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round" viewBox="0 0 1024 1024" width="${width}" height="${height}"><clipPath id="a"><path d="M0 0h1024v1024H0z"/></clipPath><path fill="#63c862" d="M536.359 484.569c-25.15-60.396 142.849-333.837 227.229-362.525 44.196-15.027 93.145 56.185 106.992 114.053 13.909 58.129 7.806 118.903-30.581 165.845-43.264 52.904-280.757 137.58-303.64 82.627Z"/><path fill="#ffca3d" d="M474.634 497.831c-36.492 18.111-128.758-5.131-225.151-42.057C164.575 423.249 61.32 336.983 59.942 310.149c-2.09-40.708 57.502-77.667 126.354-90.298 69.161-12.689 150.336-15.261 196.02 23.096 77.447 65.025 160.404 221.093 92.318 254.884Z"/><path fill="#4ebffe" d="M535.511 552.81c64.871 33.983 142.066 358.05 109.633 394.921-29.259 33.262-109.374 13.305-165.203-22.387-56.08-35.852-81.135-97.144-77.303-152.334 6.495-93.565 68.002-254.183 132.873-220.2Z"/></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" xml:space="preserve" stroke-miterlimit="10" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round" viewBox="0 0 1024 1024" width="${width}" height="${height}" ${restAttrs}><clipPath id="a"><path d="M0 0h1024v1024H0z"/></clipPath><path fill="#63c862" d="M536.359 484.569c-25.15-60.396 142.849-333.837 227.229-362.525 44.196-15.027 93.145 56.185 106.992 114.053 13.909 58.129 7.806 118.903-30.581 165.845-43.264 52.904-280.757 137.58-303.64 82.627Z"/><path fill="#ffca3d" d="M474.634 497.831c-36.492 18.111-128.758-5.131-225.151-42.057C164.575 423.249 61.32 336.983 59.942 310.149c-2.09-40.708 57.502-77.667 126.354-90.298 69.161-12.689 150.336-15.261 196.02 23.096 77.447 65.025 160.404 221.093 92.318 254.884Z"/><path fill="#4ebffe" d="M535.511 552.81c64.871 33.983 142.066 358.05 109.633 394.921-29.259 33.262-109.374 13.305-165.203-22.387-56.08-35.852-81.135-97.144-77.303-152.334 6.495-93.565 68.002-254.183 132.873-220.2Z"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/Yarn.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 518 518" width="${width}" height="${height}"><style>.st0{fill:#2c8ebb}.st1{fill:#fff}</style><path class="st0" d="M259 0c143 0 259 116 259 259S402 518 259 518 0 402 0 259 116 0 259 0z"/><path class="st1" d="M435.2 337.5c-1.8-14.2-13.8-24-29.2-23.8-23 .3-42.3 12.2-55.1 20.1-5 3.1-9.3 5.4-13 7.1.8-11.6.1-26.8-5.9-43.5-7.3-20-17.1-32.3-24.1-39.4 8.1-11.8 19.2-29 24.4-55.6 4.5-22.7 3.1-58-7.2-77.8-2.1-4-5.6-6.9-10-8.1-1.8-.5-5.2-1.5-11.9.4C293.1 96 289.6 93.8 286.9 92c-5.6-3.6-12.2-4.4-18.4-2.1-8.3 3-15.4 11-22.1 25.2-1 2.1-1.9 4.1-2.7 6.1-12.7.9-32.7 5.5-49.6 23.8-2.1 2.3-6.2 4-10.5 5.6h.1c-8.8 3.1-12.8 10.3-17.7 23.3-6.8 18.2.2 36.1 7.1 47.7-9.4 8.4-21.9 21.8-28.5 37.5-8.2 19.4-9.1 38.4-8.8 48.7-7 7.4-17.8 21.3-19 36.9-1.6 21.8 6.3 36.6 9.8 42 1 1.6 2.1 2.9 3.3 4.2-.4 2.7-.5 5.6.1 8.6 1.3 7 5.7 12.7 12.4 16.3 13.2 7 31.6 10 45.8 2.9 5.1 5.4 14.4 10.6 31.3 10.6h1c4.3 0 58.9-2.9 74.8-6.8 7.1-1.7 12-4.7 15.2-7.4 10.2-3.2 38.4-12.8 65-30 18.8-12.2 25.3-14.8 39.3-18.2 13.6-3.3 22.1-15.7 20.4-29.4zm-23.8 14.7c-16 3.8-24.1 7.3-43.9 20.2-30.9 20-64.7 29.3-64.7 29.3s-2.8 4.2-10.9 6.1c-14 3.4-66.7 6.3-71.5 6.4-12.9.1-20.8-3.3-23-8.6-6.7-16 9.6-23 9.6-23s-3.6-2.2-5.7-4.2c-1.9-1.9-3.9-5.7-4.5-4.3-2.5 6.1-3.8 21-10.5 27.7-9.2 9.3-26.6 6.2-36.9.8-11.3-6 .8-20.1.8-20.1s-6.1 3.6-11-3.8c-4.4-6.8-8.5-18.4-7.4-32.7 1.2-16.3 19.4-32.1 19.4-32.1s-3.2-24.1 7.3-48.8c9.5-22.5 35.1-40.6 35.1-40.6s-21.5-23.8-13.5-45.2c5.2-14 7.3-13.9 9-14.5 6-2.3 11.8-4.8 16.1-9.5 21.5-23.2 48.9-18.8 48.9-18.8s13-39.5 25-31.8c3.7 2.4 17 32 17 32s14.2-8.3 15.8-5.2c8.6 16.7 9.6 48.6 5.8 68-6.4 32-22.4 49.2-28.8 60-1.5 2.5 17.2 10.4 29 43.1 10.9 29.9 1.2 55 2.9 57.8.3.5.4.7.4.7s12.5 1 37.6-14.5c13.4-8.3 29.3-17.6 47.4-17.8 17.5-.3 18.4 20.2 5.2 23.4z"/></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="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 518 518" width="${width}" height="${height}" ${restAttrs}><style>.st0{fill:#2c8ebb}.st1{fill:#fff}</style><path class="st0" d="M259 0c143 0 259 116 259 259S402 518 259 518 0 402 0 259 116 0 259 0z"/><path class="st1" d="M435.2 337.5c-1.8-14.2-13.8-24-29.2-23.8-23 .3-42.3 12.2-55.1 20.1-5 3.1-9.3 5.4-13 7.1.8-11.6.1-26.8-5.9-43.5-7.3-20-17.1-32.3-24.1-39.4 8.1-11.8 19.2-29 24.4-55.6 4.5-22.7 3.1-58-7.2-77.8-2.1-4-5.6-6.9-10-8.1-1.8-.5-5.2-1.5-11.9.4C293.1 96 289.6 93.8 286.9 92c-5.6-3.6-12.2-4.4-18.4-2.1-8.3 3-15.4 11-22.1 25.2-1 2.1-1.9 4.1-2.7 6.1-12.7.9-32.7 5.5-49.6 23.8-2.1 2.3-6.2 4-10.5 5.6h.1c-8.8 3.1-12.8 10.3-17.7 23.3-6.8 18.2.2 36.1 7.1 47.7-9.4 8.4-21.9 21.8-28.5 37.5-8.2 19.4-9.1 38.4-8.8 48.7-7 7.4-17.8 21.3-19 36.9-1.6 21.8 6.3 36.6 9.8 42 1 1.6 2.1 2.9 3.3 4.2-.4 2.7-.5 5.6.1 8.6 1.3 7 5.7 12.7 12.4 16.3 13.2 7 31.6 10 45.8 2.9 5.1 5.4 14.4 10.6 31.3 10.6h1c4.3 0 58.9-2.9 74.8-6.8 7.1-1.7 12-4.7 15.2-7.4 10.2-3.2 38.4-12.8 65-30 18.8-12.2 25.3-14.8 39.3-18.2 13.6-3.3 22.1-15.7 20.4-29.4zm-23.8 14.7c-16 3.8-24.1 7.3-43.9 20.2-30.9 20-64.7 29.3-64.7 29.3s-2.8 4.2-10.9 6.1c-14 3.4-66.7 6.3-71.5 6.4-12.9.1-20.8-3.3-23-8.6-6.7-16 9.6-23 9.6-23s-3.6-2.2-5.7-4.2c-1.9-1.9-3.9-5.7-4.5-4.3-2.5 6.1-3.8 21-10.5 27.7-9.2 9.3-26.6 6.2-36.9.8-11.3-6 .8-20.1.8-20.1s-6.1 3.6-11-3.8c-4.4-6.8-8.5-18.4-7.4-32.7 1.2-16.3 19.4-32.1 19.4-32.1s-3.2-24.1 7.3-48.8c9.5-22.5 35.1-40.6 35.1-40.6s-21.5-23.8-13.5-45.2c5.2-14 7.3-13.9 9-14.5 6-2.3 11.8-4.8 16.1-9.5 21.5-23.2 48.9-18.8 48.9-18.8s13-39.5 25-31.8c3.7 2.4 17 32 17 32s14.2-8.3 15.8-5.2c8.6 16.7 9.6 48.6 5.8 68-6.4 32-22.4 49.2-28.8 60-1.5 2.5 17.2 10.4 29 43.1 10.9 29.9 1.2 55 2.9 57.8.3.5.4.7.4.7s12.5 1 37.6-14.5c13.4-8.3 29.3-17.6 47.4-17.8 17.5-.3 18.4 20.2 5.2 23.4z"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/YouTube.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 180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="${width}" height="${height}"><path d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134Z" fill="red"/><path fill="#FFF" d="m102.421 128.06 66.328-38.418-66.328-38.418z"/></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 180" width="${width}" height="${height}" ${restAttrs}><path fill="red" d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134Z"/><path fill="#FFF" d="m102.421 128.06 66.328-38.418-66.328-38.418z"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/YoutubeMusic.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" xml:space="preserve" viewBox="0 0 192 192" width="${width}" height="${height}"><path fill="none" d="M0 0h192v192H0z"/><circle cx="96" cy="96" r="88" fill="red"/><path fill="#FFF" d="M96 50.32c25.19 0 45.68 20.49 45.68 45.68S121.19 141.68 96 141.68 50.32 121.19 50.32 96 70.81 50.32 96 50.32m0-6.4c-28.76 0-52.08 23.32-52.08 52.08 0 28.76 23.32 52.08 52.08 52.08s52.08-23.32 52.08-52.08c0-28.76-23.32-52.08-52.08-52.08z"/><path fill="#FFF" d="m79 122 45-26-45-26z"/></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" xml:space="preserve" viewBox="0 0 192 192" width="${width}" height="${height}" ${restAttrs}><path fill="none" d="M0 0h192v192H0z"/><circle cx="96" cy="96" r="88" fill="red"/><path fill="#FFF" d="M96 50.32c25.19 0 45.68 20.49 45.68 45.68S121.19 141.68 96 141.68 50.32 121.19 50.32 96 70.81 50.32 96 50.32m0-6.4c-28.76 0-52.08 23.32-52.08 52.08 0 28.76 23.32 52.08 52.08 52.08s52.08-23.32 52.08-52.08c0-28.76-23.32-52.08-52.08-52.08z"/><path fill="#FFF" d="m79 122 45-26-45-26z"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/Zeabur.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg viewBox="0 0 294 229" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" 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 294 229" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="${width}" height="${height}" ${restAttrs}>
   <path fill="#000" d="M114 145h179v84H0v-84h82l114-61H0V0h293v84l-179 61Z" />
   <path fill="#6300FF" d="M195 0H0v84h195V0Z" />
   <path fill="#F40" d="M293 145H115v84h178v-84Z" />

package/dist/components/Zed.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" fill="none" viewBox="0 0 96 96" width="${width}" height="${height}"><g clip-path="url(#a)"><path fill="currentColor" fill-rule="evenodd" d="M9 6a3 3 0 0 0-3 3v66H0V9a9 9 0 0 1 9-9h80.379c4.009 0 6.016 4.847 3.182 7.682L43.055 57.187H57V51h6v7.688a4.5 4.5 0 0 1-4.5 4.5H37.055L26.743 73.5H73.5V36h6v37.5a6 6 0 0 1-6 6H20.743L10.243 90H87a3 3 0 0 0 3-3V21h6v66a9 9 0 0 1-9 9H6.621c-4.009 0-6.016-4.847-3.182-7.682L52.757 39H39v6h-6v-7.5a4.5 4.5 0 0 1 4.5-4.5h21.257l10.5-10.5H22.5V60h-6V22.5a6 6 0 0 1 6-6h52.757L85.757 6H9Z" clip-rule="evenodd"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h96v96H0z"/></clipPath></defs></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" fill="none" viewBox="0 0 96 96" width="${width}" height="${height}" ${restAttrs}><g clip-path="url(#a)"><path fill="currentColor" fill-rule="evenodd" d="M9 6a3 3 0 0 0-3 3v66H0V9a9 9 0 0 1 9-9h80.379c4.009 0 6.016 4.847 3.182 7.682L43.055 57.187H57V51h6v7.688a4.5 4.5 0 0 1-4.5 4.5H37.055L26.743 73.5H73.5V36h6v37.5a6 6 0 0 1-6 6H20.743L10.243 90H87a3 3 0 0 0 3-3V21h6v66a9 9 0 0 1-9 9H6.621c-4.009 0-6.016-4.847-3.182-7.682L52.757 39H39v6h-6v-7.5a4.5 4.5 0 0 1 4.5-4.5h21.257l10.5-10.5H22.5V60h-6V22.5a6 6 0 0 1 6-6h52.757L85.757 6H9Z" clip-rule="evenodd"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h96v96H0z"/></clipPath></defs></svg>`;
 </script>
 
 {@html svgContent}