@selemondev/svgl-svelte 0.0.2 → 0.0.3

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 viewBox="0 0 256 259" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="${width}" height="${height}" ${restAttrs}><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>`;
 </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 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 166 263" width="${width}" height="${height}" ${restAttrs}><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>`;
 </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 viewBox="0 0 256 180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="${width}" height="${height}" ${restAttrs}><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>`;
 </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}

package/dist/components/ZenBrowser.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="none" width="${width}" height="${height}"><path fill="#202020" fill-rule="evenodd" d="M32 44.308c6.797 0 12.308-5.51 12.308-12.308 0-6.797-5.51-12.308-12.308-12.308-6.797 0-12.308 5.51-12.308 12.308 0 6.797 5.51 12.308 12.308 12.308ZM41.846 32c0 5.438-4.408 9.846-9.846 9.846S22.154 37.438 22.154 32s4.408-9.846 9.846-9.846 9.846 4.408 9.846 9.846Z" clip-rule="evenodd"/><path fill="#202020" fill-rule="evenodd" d="M53.333 32c0 11.782-9.55 21.333-21.333 21.333-11.782 0-21.333-9.55-21.333-21.333 0-11.782 9.55-21.333 21.333-21.333 11.782 0 21.333 9.55 21.333 21.333ZM32 49.23c9.516 0 17.23-7.714 17.23-17.23S41.517 14.77 32 14.77 14.77 22.483 14.77 32 22.483 49.23 32 49.23Z" clip-rule="evenodd"/><path fill="#202020" fill-rule="evenodd" d="M64 32c0 17.673-14.327 32-32 32C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0c17.673 0 32 14.327 32 32ZM32 58.256c14.501 0 26.256-11.755 26.256-26.256S46.501 5.744 32 5.744 5.744 17.499 5.744 32 17.499 58.256 32 58.256Z" 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 64 64" xmlns="http://www.w3.org/2000/svg" fill="none" width="${width}" height="${height}" ${restAttrs}><path fill="#202020" fill-rule="evenodd" d="M32 44.308c6.797 0 12.308-5.51 12.308-12.308 0-6.797-5.51-12.308-12.308-12.308-6.797 0-12.308 5.51-12.308 12.308 0 6.797 5.51 12.308 12.308 12.308ZM41.846 32c0 5.438-4.408 9.846-9.846 9.846S22.154 37.438 22.154 32s4.408-9.846 9.846-9.846 9.846 4.408 9.846 9.846Z" clip-rule="evenodd"/><path fill="#202020" fill-rule="evenodd" d="M53.333 32c0 11.782-9.55 21.333-21.333 21.333-11.782 0-21.333-9.55-21.333-21.333 0-11.782 9.55-21.333 21.333-21.333 11.782 0 21.333 9.55 21.333 21.333ZM32 49.23c9.516 0 17.23-7.714 17.23-17.23S41.517 14.77 32 14.77 14.77 22.483 14.77 32 22.483 49.23 32 49.23Z" clip-rule="evenodd"/><path fill="#202020" fill-rule="evenodd" d="M64 32c0 17.673-14.327 32-32 32C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0c17.673 0 32 14.327 32 32ZM32 58.256c14.501 0 26.256-11.755 26.256-26.256S46.501 5.744 32 5.744 5.744 17.499 5.744 32 17.499 58.256 32 58.256Z" clip-rule="evenodd"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/Zig.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	export let width: number = 50;
-	export let height: number = 50;
-	const svgContent = `<svg viewBox="0 0 300 176" xmlns="http://www.w3.org/2000/svg" fill="none" width="${width}" height="${height}"><path fill="#F7A41D" d="M158.395 55.695H85.877V23.453h104.966L262.393 0 142.274 120.337h72.745v32.296H110.048l-71.55 22.655L158.395 55.695ZM0 120.288V23.453h71.746V55.75h-39.46v64.592H80.73l-32.296 32.297H0v-32.351Zm267.709-64.593h-48.45L251.555 23.4H300v129.18h-71.746v-32.296h39.504l-.049-64.588Z"/></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 300 176" xmlns="http://www.w3.org/2000/svg" fill="none" width="${width}" height="${height}" ${restAttrs}><path fill="#F7A41D" d="M158.395 55.695H85.877V23.453h104.966L262.393 0 142.274 120.337h72.745v32.296H110.048l-71.55 22.655L158.395 55.695ZM0 120.288V23.453h71.746V55.75h-39.46v64.592H80.73l-32.296 32.297H0v-32.351Zm267.709-64.593h-48.45L251.555 23.4H300v129.18h-71.746v-32.296h39.504l-.049-64.588Z"/></svg>`;
 </script>
 
 {@html svgContent}