vite-plugin-for-svelte-svg 0.9.0

package/README.md

@@ -0,0 +1,106 @@
+# vite-plugin-for-svelte-svg
+
+Vite plugin for SVG handling in Svelte 5 projects with dynamic color and size support.
+
+## Features
+
+- 🎨 Dynamic color modification at runtime
+- 📐 Flexible sizing with CSS units
+- 🔄 Auto-generate TypeScript types for SVG names
+- 🔥 HMR support - add/remove SVGs without restart
+- 📦 Tree-shakeable
+
+## Installation
+
+```bash
+pnpm add vite-plugin-for-svelte-svg
+```
+
+## Usage
+
+### 1. Configure Vite
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import svelteSvg from 'vite-plugin-for-svelte-svg'
+
+export default defineConfig({
+  plugins: [
+    svelteSvg({
+      dir: 'src/svg',
+      typesOutput: 'src/type/svg.d.ts'
+    }),
+    svelte()
+  ]
+})
+```
+
+### 2. Use the Component
+
+```svelte
+<script lang="ts">
+  import { Svg } from '@/type/svg'  // Auto-generated with typed name prop
+</script>
+
+<!-- Basic usage -->
+<Svg name="icon" />
+
+<!-- With size -->
+<Svg name="logo" size="64px" />
+
+<!-- With single color -->
+<Svg name="arrow" color="#ff0000" />
+
+<!-- With multiple colors (for multi-colored SVGs) -->
+<Svg name="badge" color={['#fff', '#000', '#ccc']} />
+
+<!-- With class and click handler -->
+<Svg 
+  name="button" 
+  size="24px" 
+  class="hover:opacity-80 cursor-pointer"
+  onclick={() => console.log('clicked')}
+/>
+```
+
+## API
+
+### Plugin Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `dir` | `string` | `'src/svg'` | SVG files directory |
+| `typesOutput` | `string` | `'src/type/svg.d.ts'` | TypeScript types output path |
+| `generateTypes` | `boolean` | `true` | Whether to generate types |
+
+### Svg Component Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `SvgName` | required | SVG file name (without extension), auto-completed |
+| `size` | `string \| number` | `'40px'` | Width and height |
+| `color` | `string \| string[]` | `undefined` | Fill color(s) for shapes |
+| `class` | `string` | `''` | CSS classes |
+| `...rest` | `HTMLAttributes` | - | All HTML attributes and events |
+
+### Generated File
+
+The plugin generates a single `svg.ts` file containing:
+
+```ts
+export type SvgName = 'icon1' | 'icon2' | ...  // Union of all SVG names
+export interface SvgProps { ... }               // Typed props interface
+export const Svg: Component<SvgProps>           // Typed Svg component
+```
+
+## How It Works
+
+1. **Build/Dev start**: Plugin scans SVG directory and generates `svg.ts` with typed `Svg` component
+2. **Dev time**: Watches for SVG file changes and regenerates with HMR
+3. **Runtime**: SVGs are loaded as base64 data URLs via `import.meta.glob`, then parsed and modified in the browser
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { Plugin } from 'vite';
+import { P as PluginOptions } from './types-Bh508a5v.js';
+export { N as NumberWithUnit, b as SvgBase64, a as SvgColor, S as SvgProps } from './types-Bh508a5v.js';
+import 'svelte/elements';
+
+declare function svelteSvgPlugin(options?: PluginOptions): Plugin;
+
+export { PluginOptions, svelteSvgPlugin as default };

package/dist/index.js

@@ -0,0 +1,87 @@
+// src/index.ts
+import { writeFileSync, existsSync, mkdirSync } from "fs";
+import { resolve, dirname } from "path";
+import { glob } from "glob";
+function generateSvgTypes(svgDir, outputPath, root) {
+  const fullSvgDir = resolve(root, svgDir);
+  const fullOutputPath = resolve(root, outputPath);
+  const svgFiles = glob.sync(`${fullSvgDir}/**/*.svg`);
+  const svgNames = svgFiles.map((file) => {
+    const relativePath = file.replace(fullSvgDir, "");
+    const lastSlashIndex = Math.max(relativePath.lastIndexOf("/"), relativePath.lastIndexOf("\\"));
+    return relativePath.slice(lastSlashIndex + 1, -4)?.toLowerCase() ?? null;
+  }).filter(Boolean);
+  const svgNameType = svgNames.length > 0 ? svgNames.map((name) => `'${name}'`).join(" | ") : "string";
+  const outputDir = dirname(fullOutputPath);
+  const relativeSvgDir = resolve(root, svgDir).replace(/\\/g, "/");
+  const relativeOutputDir = outputDir.replace(/\\/g, "/");
+  let importPath = relativeSvgDir.replace(root.replace(/\\/g, "/"), "");
+  if (!importPath.startsWith("/")) importPath = "/" + importPath;
+  const moduleContent = `// Auto-generated by vite-plugin-for-svelte-svg
+// Do not edit manually
+
+import { Svg as BaseSvg, initSvg } from 'vite-plugin-for-svelte-svg/runtime'
+import type { HTMLAttributes } from 'svelte/elements'
+import type { Component } from 'svelte'
+
+// Initialize SVG registry
+initSvg(import.meta.glob('${importPath}/**/*.svg'))
+
+export type SvgName = ${svgNameType}
+
+export interface SvgProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
+  name: SvgName
+  size?: string | number
+  color?: string | string[]
+}
+
+export const Svg = BaseSvg as Component<SvgProps>
+`;
+  if (!existsSync(outputDir)) {
+    mkdirSync(outputDir, { recursive: true });
+  }
+  const tsOutputPath = fullOutputPath.replace(".d.ts", ".ts");
+  writeFileSync(tsOutputPath, moduleContent);
+  console.log(`[vite-plugin-for-svelte-svg] Generated: ${outputPath.replace(".d.ts", ".ts")}`);
+}
+function svelteSvgPlugin(options = {}) {
+  const {
+    dir = "src/svg",
+    typesOutput = "src/types/svg.d.ts",
+    generateTypes = true
+  } = options;
+  let root = process.cwd();
+  return {
+    name: "vite-plugin-for-svelte-svg",
+    configResolved(config) {
+      root = config.root;
+    },
+    buildStart() {
+      if (generateTypes) {
+        generateSvgTypes(dir, typesOutput, root);
+      }
+    },
+    configureServer(server) {
+      if (!generateTypes) return;
+      const fullSvgDir = resolve(root, dir);
+      server.watcher.add(fullSvgDir);
+      const handleChange = () => {
+        generateSvgTypes(dir, typesOutput, root);
+        server.ws.send({ type: "full-reload" });
+      };
+      server.watcher.on("add", (path) => {
+        if (path.startsWith(fullSvgDir) && path.endsWith(".svg")) {
+          handleChange();
+        }
+      });
+      server.watcher.on("unlink", (path) => {
+        if (path.startsWith(fullSvgDir) && path.endsWith(".svg")) {
+          handleChange();
+        }
+      });
+    }
+  };
+}
+export {
+  svelteSvgPlugin as default
+};

package/dist/runtime/Svg.svelte

@@ -0,0 +1,117 @@
+<script lang="ts" module>
+  import type { SvgBase64, SvgColor, NumberWithUnit, SvgRegistry } from '../types'
+
+  let globalRegistry: SvgRegistry = {}
+
+  export function setSvgRegistry(registry: SvgRegistry) {
+    globalRegistry = registry
+  }
+
+  export function getSvgRegistry(): SvgRegistry {
+    return globalRegistry
+  }
+
+  function classValue2className(value: string | string[] | Record<string, boolean> | undefined | null): string {
+    if (!value) return ''
+    if (typeof value === 'string') return value
+    if (Array.isArray(value)) return value.filter(Boolean).join(' ')
+    if (typeof value === 'object') {
+      return Object.entries(value)
+        .filter(([_, condition]) => condition)
+        .map(([className]) => className)
+        .join(' ')
+    }
+    return ''
+  }
+
+  function processSvgHtml(
+    svgBase64: SvgBase64,
+    color: SvgColor,
+    size: NumberWithUnit,
+    className: string | undefined
+  ): string {
+    const svgHtml = decodeURIComponent(svgBase64).replace(/^data:image\/svg\+xml,/, '')
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(svgHtml, 'image/svg+xml')
+    const svg = doc.querySelector('svg')
+    
+    if (!svg) return ''
+
+    const classNameString = classValue2className(className)
+    if (classNameString.trim() !== '') {
+      classNameString.split(/\s+/).forEach((name) => {
+        svg.classList.add(name)
+      })
+    }
+
+    svg.style.width = String(size)
+    svg.style.height = String(size)
+    svg.classList.add('shrink-0')
+
+    // Handle color for shape elements
+    if (color !== undefined) {
+      const shapes = doc.querySelectorAll('rect,circle,path,ellipse,line,polyline,polygon,text')
+      if (typeof color === 'string') {
+        shapes.forEach((el) => {
+          el.removeAttribute('mask')
+          el.setAttribute('fill', color)
+        })
+      } else if (Array.isArray(color)) {
+        shapes.forEach((el, index) => {
+          if (color[index]) {
+            el.removeAttribute('mask')
+            el.setAttribute('fill', color[index])
+          }
+        })
+      }
+    }
+
+    return doc.documentElement.outerHTML
+  }
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    name: string
+    size?: NumberWithUnit
+    color?: SvgColor
+  }
+
+  const {
+    name,
+    size = '40px',
+    color,
+    class: className = '',
+    ...restProps
+  }: Props = $props()
+
+  const promise = $derived.by(() => {
+    const loader = globalRegistry[name.toLowerCase()]
+    if (loader) {
+      return loader()
+    }
+    return Promise.reject(new Error(`SVG "${name}" not found`))
+  })
+</script>
+
+{#await promise}
+  <span
+    data-role="svg-placeholder"
+    class={['inline-flex', className].filter(Boolean).join(' ')}
+    style="width:{size};height:{size}"
+  ></span>
+{:then module}
+  <i {...restProps}>
+    {@html processSvgHtml(module.default as SvgBase64, color, size, className)}
+  </i>
+{:catch}
+  <span data-role="svg-error" hidden></span>
+{/await}
+
+<style>
+  :global(svg.shrink-0) {
+    flex-shrink: 0;
+  }
+</style>

package/dist/runtime/Svg.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { SvgRegistry, SvgColor, NumberWithUnit } from '../types'
+import type { HTMLAttributes } from 'svelte/elements'
+
+export function setSvgRegistry(registry: SvgRegistry): void
+export function getSvgRegistry(): SvgRegistry
+
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
+  name: string
+  size?: NumberWithUnit
+  color?: SvgColor
+}
+
+declare const Svg: import('svelte').Component<Props>
+export default Svg

package/dist/runtime/index.d.ts

@@ -0,0 +1,14 @@
+export { default as Svg } from './Svg.svelte';
+import { c as SvgModule, d as SvgRegistry } from '../types-Bh508a5v.js';
+export { N as NumberWithUnit, b as SvgBase64, a as SvgColor, S as SvgProps } from '../types-Bh508a5v.js';
+import 'svelte/elements';
+
+/**
+ * Initialize SVG registry from glob import result
+ * @example
+ * import { initSvg } from 'vite-plugin-for-svelte-svg/runtime'
+ * initSvg(import.meta.glob('./your-svg-dir/*.svg'))
+ */
+declare function initSvg(globResult: Record<string, SvgModule>): SvgRegistry;
+
+export { SvgModule, SvgRegistry, initSvg };

package/dist/runtime/index.js

@@ -0,0 +1,21 @@
+// src/runtime/index.ts
+import { default as default2 } from "./Svg.svelte";
+
+// src/runtime/loader.ts
+import { setSvgRegistry } from "./Svg.svelte";
+function initSvg(globResult) {
+  const registry = Object.entries(globResult).reduce((acc, [path, loader]) => {
+    const lastSlashIndex = Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\"));
+    const name = path.slice(lastSlashIndex + 1, -4)?.toLowerCase() ?? null;
+    if (name !== null) {
+      acc[name] = loader;
+    }
+    return acc;
+  }, {});
+  setSvgRegistry(registry);
+  return registry;
+}
+export {
+  default2 as Svg,
+  initSvg
+};

package/dist/types-Bh508a5v.d.ts

@@ -0,0 +1,33 @@
+import { HTMLAttributes } from 'svelte/elements';
+
+interface PluginOptions {
+    /**
+     * SVG files directory (relative to project root)
+     * @default 'src/svg'
+     */
+    dir?: string;
+    /**
+     * Output path for generated TypeScript types
+     * @default 'src/types/svg.d.ts'
+     */
+    typesOutput?: string;
+    /**
+     * Whether to generate types on startup
+     * @default true
+     */
+    generateTypes?: boolean;
+}
+type SvgBase64 = `data:image/svg+xml,${string}`;
+type SvgColor = string | string[] | undefined;
+type NumberWithUnit = `${number}${'px' | 'em' | 'rem' | '%' | 'vw' | 'vh'}` | number | string;
+interface SvgProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
+    name: string;
+    size?: NumberWithUnit;
+    color?: SvgColor;
+}
+type SvgModule = () => Promise<{
+    default: string;
+}>;
+type SvgRegistry = Record<string, SvgModule>;
+
+export type { NumberWithUnit as N, PluginOptions as P, SvgProps as S, SvgColor as a, SvgBase64 as b, SvgModule as c, SvgRegistry as d };

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "vite-plugin-for-svelte-svg",
+  "version": "0.9.0",
+  "description": "Vite plugin for SVG handling in Svelte projects with dynamic color and size support",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./runtime": {
+      "types": "./dist/runtime/index.d.ts",
+      "import": "./dist/runtime/index.js"
+    },
+    "./runtime/Svg.svelte": {
+      "types": "./dist/runtime/Svg.svelte.d.ts",
+      "svelte": "./dist/runtime/Svg.svelte"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup && node -e \"require('fs').cpSync('src/runtime/Svg.svelte', 'dist/runtime/Svg.svelte'); require('fs').cpSync('src/runtime/Svg.svelte.d.ts', 'dist/runtime/Svg.svelte.d.ts')\"",
+    "prepublishOnly": "pnpm build"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0",
+    "vite": "^5.0.0 || ^6.0.0"
+  },
+  "dependencies": {
+    "glob": "^11.0.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "svelte": "^5.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0"
+  },
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "svelte",
+    "svg"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meiseayoung/vite-plugin-svelte-svg.git"
+  },
+  "homepage": "https://github.com/meiseayoung/vite-plugin-svelte-svg#readme",
+  "bugs": {
+    "url": "https://github.com/meiseayoung/vite-plugin-svelte-svg/issues"
+  },
+  "pnpm": {
+    "ignoredBuiltDependencies": [
+      "esbuild"
+    ]
+  }
+}