@selemondev/svgl-svelte 0.0.2 → 0.0.3

package/dist/components/Zod.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" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 203" width="${width}" height="${height}"><defs><filter id="a" width="105.2%" height="106.5%" x="-2.2%" y="-2.8%" filterUnits="objectBoundingBox"><feOffset dx="1" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.36 0"/></filter><path id="b" d="M200.42 0H53.63L0 53.355l121.76 146.624 9.714-10.9L252 53.857 200.42 0Zm-5.362 12.562 39.84 41.6-112.8 126.558L17 54.162l41.815-41.6h136.243Z"/></defs><path fill="#18253F" d="M60.816 14.033h136.278l39.933 41.69-112.989 126.554L18.957 55.724z"/><path fill="#274D82" d="M151.427 152.386H98.013l-24.124-29.534 68.364-.002.002-4.19h39.078z"/><path fill="#274D82" d="m225.56 43.834-147.382 85.09-19.226-24.051 114.099-65.877-2.096-3.631 30.391-17.546zM146.596 14.075 35.93 77.968 18.719 56.483l74.095-42.78z"/><g transform="translate(2 1.51)"><use xlink:href="#b" filter="url(#a)"/><use xlink:href="#b" fill="#3068B7"/></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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 203" width="${width}" height="${height}" ${restAttrs}><defs><filter id="a" width="105.2%" height="106.5%" x="-2.2%" y="-2.8%" filterUnits="objectBoundingBox"><feOffset dx="1" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.36 0"/></filter><path id="b" d="M200.42 0H53.63L0 53.355l121.76 146.624 9.714-10.9L252 53.857 200.42 0Zm-5.362 12.562 39.84 41.6-112.8 126.558L17 54.162l41.815-41.6h136.243Z"/></defs><path fill="#18253F" d="M60.816 14.033h136.278l39.933 41.69-112.989 126.554L18.957 55.724z"/><path fill="#274D82" d="M151.427 152.386H98.013l-24.124-29.534 68.364-.002.002-4.19h39.078z"/><path fill="#274D82" d="m225.56 43.834-147.382 85.09-19.226-24.051 114.099-65.877-2.096-3.631 30.391-17.546zM146.596 14.075 35.93 77.968 18.719 56.483l74.095-42.78z"/><g transform="translate(2 1.51)"><use xlink:href="#b" filter="url(#a)"/><use xlink:href="#b" fill="#3068B7"/></g></svg>`;
 </script>
 
 {@html svgContent}

package/dist/components/Zoom.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 256" width="${width}" height="${height}"><defs><linearGradient id="a" x1="23.666%" x2="76.334%" y1="95.6118%" y2="4.3882%"><stop offset=".00006%" stop-color="#0845BF"/><stop offset="19.11%" stop-color="#0950DE"/><stop offset="38.23%" stop-color="#0B59F6"/><stop offset="50%" stop-color="#0B5CFF"/><stop offset="67.32%" stop-color="#0E5EFE"/><stop offset="77.74%" stop-color="#1665FC"/><stop offset="86.33%" stop-color="#246FF9"/><stop offset="93.88%" stop-color="#387FF4"/><stop offset="100%" stop-color="#4F90EE"/></linearGradient></defs><path fill="url(#a)" d="M256 128c0 13.568-1.024 27.136-3.328 40.192-6.912 43.264-41.216 77.568-84.48 84.48C155.136 254.976 141.568 256 128 256c-13.568 0-27.136-1.024-40.192-3.328-43.264-6.912-77.568-41.216-84.48-84.48C1.024 155.136 0 141.568 0 128c0-13.568 1.024-27.136 3.328-40.192 6.912-43.264 41.216-77.568 84.48-84.48C100.864 1.024 114.432 0 128 0c13.568 0 27.136 1.024 40.192 3.328 43.264 6.912 77.568 41.216 84.48 84.48C254.976 100.864 256 114.432 256 128Z"/><path fill="#FFF" d="M204.032 207.872H75.008c-8.448 0-16.64-4.608-20.48-12.032-4.608-8.704-2.816-19.2 4.096-26.112l89.856-89.856H83.968c-17.664 0-32-14.336-32-32h118.784c8.448 0 16.64 4.608 20.48 12.032 4.608 8.704 2.816 19.2-4.096 26.112l-89.6 90.112h74.496c17.664 0 32 14.08 32 31.744Z"/></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 256" width="${width}" height="${height}" ${restAttrs}><defs><linearGradient id="a" x1="23.666%" x2="76.334%" y1="95.6118%" y2="4.3882%"><stop offset=".00006%" stop-color="#0845BF"/><stop offset="19.11%" stop-color="#0950DE"/><stop offset="38.23%" stop-color="#0B59F6"/><stop offset="50%" stop-color="#0B5CFF"/><stop offset="67.32%" stop-color="#0E5EFE"/><stop offset="77.74%" stop-color="#1665FC"/><stop offset="86.33%" stop-color="#246FF9"/><stop offset="93.88%" stop-color="#387FF4"/><stop offset="100%" stop-color="#4F90EE"/></linearGradient></defs><path fill="url(#a)" d="M256 128c0 13.568-1.024 27.136-3.328 40.192-6.912 43.264-41.216 77.568-84.48 84.48C155.136 254.976 141.568 256 128 256c-13.568 0-27.136-1.024-40.192-3.328-43.264-6.912-77.568-41.216-84.48-84.48C1.024 155.136 0 141.568 0 128c0-13.568 1.024-27.136 3.328-40.192 6.912-43.264 41.216-77.568 84.48-84.48C100.864 1.024 114.432 0 128 0c13.568 0 27.136 1.024 40.192 3.328 43.264 6.912 77.568 41.216 84.48 84.48C254.976 100.864 256 114.432 256 128Z"/><path fill="#FFF" d="M204.032 207.872H75.008c-8.448 0-16.64-4.608-20.48-12.032-4.608-8.704-2.816-19.2 4.096-26.112l89.856-89.856H83.968c-17.664 0-32-14.336-32-32h118.784c8.448 0 16.64 4.608 20.48 12.032 4.608 8.704 2.816 19.2-4.096 26.112l-89.6 90.112h74.496c17.664 0 32 14.08 32 31.744Z"/></svg>`;
 </script>
 
 {@html svgContent}

package/dist/utils/componentTemplate.js

@@ -1,6 +1,6 @@
 import { parseSvgContent } from './index.js';
-export const componentTemplate = (content, framework) => {
-    const { templateContent, scriptTag } = parseSvgContent(content, framework);
+export const componentTemplate = (content) => {
+    const { templateContent, scriptTag } = parseSvgContent(content);
     return `
 ${scriptTag}
 ${templateContent}

package/dist/utils/parseSvgContent.js

@@ -7,13 +7,20 @@ export const parseSvgContent = (content) => {
     content = content.replace(/<svg\b([^>]*)>/i, (_, attrs) => {
         attrs = attrs.replace(/\s*width="[^"]*"/i, '');
         attrs = attrs.replace(/\s*height="[^"]*"/i, '');
-        return `<svg${attrs} width="\${width}" height="\${height}">`;
+        return `<svg${attrs} width="\${width}" height="\${height}" \${restAttrs}>`;
     });
     content = content.replace(/`/g, '\\`');
     return {
         scriptTag: `<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 = \`${content}\`;
 </script>`,
         templateContent: '{@html svgContent}'

package/package.json

@@ -1,17 +1,18 @@
 {
 	"name": "@selemondev/svgl-svelte",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"description": "An optimized package with SVG logos to be used as Svelte components ✨",
 	"author": "Selemondev",
 	"private": false,
 	"license": "MIT",
+	"packageManager": "pnpm@10.6.5",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build && npm run prepack",
+		"build": "pnpm prepack",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
-		"generate:components": "npx esno scripts/index.ts && pnpm format",
-		"generate:release": "npx changelogen@latest --release && npm publish",
+		"generate:components": "pnpm dlx esno scripts/index.ts && pnpm format",
+		"generate:release": "pnpm dlx changelogen@latest --release && npm publish",
 		"prepack": "svelte-kit sync && svelte-package && publint",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",