@ts-svg/svelte 0.0.1-beta.0

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@ts-svg/svelte",
+  "version": "0.0.1-beta.0",
+  "description": "Vite Plugin for loading all svg files inside a folder with types.",
+  "keywords": [
+    "vite-plugin",
+    "vite",
+    "svg",
+    "typescript",
+    "svelte"
+  ],
+  "author": {
+    "name": "Chun Nam Wong",
+    "url": "https://chunnamwong.com"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chunnamwong/ts-svg.git",
+    "directory": "packages/svelte"
+  },
+  "type": "module",
+  "main": "src/index.js",
+  "types": "src/index.d.ts",
+  "bin": {
+    "ts-svg": "src/cli.js"
+  },
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "svelte": ">=4.0.0"
+  },
+  "dependencies": {
+    "svgo": "^4.0.0",
+    "@ts-svg/core": "^0.0.1-beta.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.6.0"
+  }
+}

package/src/cli.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+import { main } from '@ts-svg/core/cli';
+
+await main();

package/src/index.d.ts

@@ -0,0 +1,9 @@
+import type { PluginOption } from 'vite';
+import type { Config } from 'svgo';
+
+type Options = {
+	path: string;
+	svgoConfig?: Config;
+};
+
+export function tsSvg(opts: Options): PluginOption;

package/src/index.js

@@ -0,0 +1,68 @@
+import { readFile } from 'node:fs/promises';
+import { tsSvg as tsSvgCore } from '@ts-svg/core';
+import { optimize } from 'svgo';
+import { compile } from 'svelte/compiler';
+
+/**
+ * @typedef Options
+ * @type {object}
+ * @property {string} path The svg folder path
+ * @property {import('svgo').Config | undefined} svgoConfig
+ */
+
+/** @type {import('svgo').Config} */
+const defaultSvgoConfig = {
+	plugins: [
+		'preset-default',
+		'removeDimensions',
+		'convertColors',
+		'removeUselessStrokeAndFill',
+		{
+			name: 'addAttributesToSVGElement',
+			params: {
+				attribute: {
+					role: 'img',
+					'aria-hidden': 'true',
+				},
+			},
+		},
+	],
+};
+
+/**
+ * Returns the Vite plugin.
+ * @param {Options} options
+ * @returns {import('vite').PluginOption & import('@ts-svg/core').Options}
+ */
+export function tsSvg(options) {
+	return tsSvgCore({
+		path: options.path,
+		query: '?svelte',
+		svgModuleDeclaration: `
+declare module '*.svg?svelte' {
+	import type { Component } from 'svelte';
+	const component: Component;
+	export default component;
+}
+`,
+		async transform(_code, id) {
+			if (!id.endsWith('.svg?svelte')) {
+				return;
+			}
+			const svgPath = id.replace(/\.svg\?svelte$/, '.svg');
+			const svgSource = await readFile(svgPath, 'utf-8');
+			const { data: optimizedSvgSource } = optimize(
+				svgSource,
+				options.svgoConfig ?? defaultSvgoConfig,
+			);
+			const componentCode = optimizedSvgSource.replace(/<svg([^>]*)>/, '<svg$1 {...$$$$props}>');
+			const component = compile(componentCode, {
+				generate: this.environment.name === 'ssr' ? 'server' : undefined,
+			});
+			return {
+				code: component.js.code,
+				map: { mappings: '' },
+			};
+		},
+	});
+}