export-svg-typescript 0.1.0

package/demo/index.ts

@@ -0,0 +1,104 @@
+// Do a Barrel Roll index of SVG icons as JS exports, enabling tree shaking to only the icons you import.
+
+
+/**
+* Returns a customized SVG string for loading icon bouncy-ball
+* 
+* ![loading-bouncy-ball](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHN0eWxlPSJzaGFwZS1yZW5kZXJpbmc6IGF1dG87IGRpc3BsYXk6IGJsb2NrOyAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48Zz48Y2lyY2xlIGZpbGw9IiNlMTViNjQiIHI9IjEzIiBjeT0iMjMiIGN4PSI1MCI+CiAgPGFuaW1hdGUgdmFsdWVzPSIyMzs3NzsyMyIga2V5VGltZXM9IjA7MC41OzEiIGtleVNwbGluZXM9IjAuNDUgMCAwLjkgMC41NTswIDAuNDUgMC41NSAwLjkiIGNhbGNNb2RlPSJzcGxpbmUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiBhdHRyaWJ1dGVOYW1lPSJjeSI+PC9hbmltYXRlPgo8L2NpcmNsZT48Zz48L2c+PC9nPjwvc3ZnPg==)
+* @param {Object} options - Configuration options
+* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
+* @param {number} [options.width] - Width of the SVG (default: 200)
+* @param {number} [options.height] - Height of the SVG (default: 200)
+* @param {number} [options.size] - Size for both width and height
+* @example loadingBouncyBall({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
+* @returns {string} SVG string with applied customizations
+*/
+export const  loadingBouncyBall = (options: LoadingOptions = {}) => customSVG(options, 
+`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="200" height="200" style="shape-rendering: auto; display: block; "><g><circle fill="#e15b64" r="13" cy="23" cx="50"><animate values="23;77;23" keyTimes="0;0.5;1" keySplines="0.45 0 0.9 0.55;0 0.45 0.55 0.9" calcMode="spline" repeatCount="indefinite" dur="1s" attributeName="cy"></animate></circle><g></g></g></svg>`);
+
+
+/**
+* Returns a customized SVG string for loading icon double-ring
+* 
+* ![loading-double-ring](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHN0eWxlPSJzaGFwZS1yZW5kZXJpbmc6IGF1dG87IGRpc3BsYXk6IGJsb2NrOyAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48Zz48Y2lyY2xlIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWRhc2hhcnJheT0iNTAuMjY1NDgyNDU3NDM2NjkgNTAuMjY1NDgyNDU3NDM2NjkiIHN0cm9rZT0iIzAwOTllNSIgc3Ryb2tlLXdpZHRoPSI4IiByPSIzMiIgY3k9IjUwIiBjeD0iNTAiPgogIDxhbmltYXRlVHJhbnNmb3JtIHZhbHVlcz0iMCA1MCA1MDszNjAgNTAgNTAiIGtleVRpbWVzPSIwOzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB0eXBlPSJyb3RhdGUiIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSI+PC9hbmltYXRlVHJhbnNmb3JtPgo8L2NpcmNsZT4KPGNpcmNsZSBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiIHN0cm9rZS1kYXNob2Zmc2V0PSIzNi4xMjgzMTU1MTYyODI2MiIgc3Ryb2tlLWRhc2hhcnJheT0iMzYuMTI4MzE1NTE2MjgyNjIgMzYuMTI4MzE1NTE2MjgyNjIiIHN0cm9rZT0iI2ZmNGM0YyIgc3Ryb2tlLXdpZHRoPSI4IiByPSIyMyIgY3k9IjUwIiBjeD0iNTAiPgogIDxhbmltYXRlVHJhbnNmb3JtIHZhbHVlcz0iMCA1MCA1MDstMzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIxcyIgdHlwZT0icm90YXRlIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iPjwvYW5pbWF0ZVRyYW5zZm9ybT4KPC9jaXJjbGU+PGc+PC9nPjwvZz48L3N2Zz4=)
+* @param {Object} options - Configuration options
+* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
+* @param {number} [options.width] - Width of the SVG (default: 200)
+* @param {number} [options.height] - Height of the SVG (default: 200)
+* @param {number} [options.size] - Size for both width and height
+* @example loadingDoubleRing({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
+* @returns {string} SVG string with applied customizations
+*/
+export const  loadingDoubleRing = (options: LoadingOptions = {}) => customSVG(options, 
+`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="200" height="200" style="shape-rendering: auto; display: block; "><g><circle stroke-linecap="round" fill="none" stroke-dasharray="50.26548245743669 50.26548245743669" stroke="#0099e5" stroke-width="8" r="32" cy="50" cx="50"><animateTransform values="0 50 50;360 50 50" keyTimes="0;1" repeatCount="indefinite" dur="1s" type="rotate" attributeName="transform"></animateTransform></circle><circle stroke-linecap="round" fill="none" stroke-dashoffset="36.12831551628262" stroke-dasharray="36.12831551628262 36.12831551628262" stroke="#ff4c4c" stroke-width="8" r="23" cy="50" cx="50"><animateTransform values="0 50 50;-360 50 50" keyTimes="0;1" repeatCount="indefinite" dur="1s" type="rotate" attributeName="transform"></animateTransform></circle><g></g></g></svg>`);
+
+
+/**
+* Returns a customized SVG string for loading icon eclipse
+* 
+* ![loading-eclipse](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHN0eWxlPSJzaGFwZS1yZW5kZXJpbmc6IGF1dG87IGRpc3BsYXk6IGJsb2NrOyI+PGc+PHBhdGggc3Ryb2tlPSJub25lIiBmaWxsPSIjZmZiOTAwIiBkPSJNMTAgNTBBNDAgNDAgMCAwIDAgOTAgNTBBNDAgNDIgMCAwIDEgMTAgNTAiPgogIDxhbmltYXRlVHJhbnNmb3JtIHZhbHVlcz0iMCA1MCA1MTszNjAgNTAgNTEiIGtleVRpbWVzPSIwOzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB0eXBlPSJyb3RhdGUiIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSI+PC9hbmltYXRlVHJhbnNmb3JtPgo8L3BhdGg+PGc+PC9nPjwvZz48L3N2Zz4=)
+* @param {Object} options - Configuration options
+* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
+* @param {number} [options.width] - Width of the SVG (default: 200)
+* @param {number} [options.height] - Height of the SVG (default: 200)
+* @param {number} [options.size] - Size for both width and height
+* @example loadingEclipse({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
+* @returns {string} SVG string with applied customizations
+*/
+export const  loadingEclipse = (options: LoadingOptions = {}) => customSVG(options, 
+`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="200" height="200" style="shape-rendering: auto; display: block;"><g><path stroke="none" fill="#ffb900" d="M10 50A40 40 0 0 0 90 50A40 42 0 0 1 10 50"><animateTransform values="0 50 51;360 50 51" keyTimes="0;1" repeatCount="indefinite" dur="1s" type="rotate" attributeName="transform"></animateTransform></path><g></g></g></svg>`);
+
+/**
+ * Shared utility function for processing SVG icons
+ * @param {Object} options - Configuration options
+ * @param {boolean} [options.raw] - Whether to return the raw SVG string or an img tag
+ * @param {string[]} [options.colors] - Array of hex colors to replace existing colors
+ * @param {number|string} [options.width] - Width of the SVG
+ * @param {number|string} [options.height] - Height of the SVG
+ * @param {number|string} [options.size] - Size for both width and height (overrides width/height)
+ * @param {string} svgString - The original SVG content
+ * @returns {string} SVG string with applied customizations
+ */
+function customSVG( options: LoadingOptions, svgString: string) {
+    const { colors = [], width, height, size, raw = false } = options;
+
+    const widthMatch = svgString.match(/width="(d+)"/);
+    const heightMatch = svgString.match(/height="(d+)"/);
+    const finalWidth = size || width || widthMatch?.[1] || '100';
+    const finalHeight = size || height || heightMatch?.[1] || '100';
+    
+    svgString = svgString.replace(/width="[^"]*"/g, `width="${finalWidth}"`);
+    svgString = svgString.replace(/height="[^"]*"/g, `height="${finalHeight}"`);
+
+    // If colors array is provided, replace hex colors in order of appearance
+    if (colors && colors.length > 0) {
+        const hexColorRegex = /#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}/g;
+        let colorIndex = 0;
+        
+        svgString = svgString.replace(hexColorRegex, (match) => {
+            if (colorIndex < colors.length) {
+                const replacement = colors[colorIndex];
+                colorIndex++;
+                return replacement?.startsWith('#') ? replacement : `#${replacement}`;
+            }
+            return match; // Keep original color if no replacement available
+        });
+    }
+    if (!raw) 
+        svgString = `<img alt="loading-icon" src="data:image/svg+xml;utf8,${encodeURIComponent(svgString)}" />`
+
+    return svgString;
+}
+interface LoadingOptions {
+  /** Array of hex colors to replace existing colors, in order of appearance in SVG*/
+  colors?: string[];
+  /** Width of the SVG */
+  width?: number;
+  /** Height of the SVG */
+  height?: number;
+  /** Size for both width and height (overrides width/height) */
+  size?: number;
+  /** Whether to return the raw SVG string or an img tag */
+  raw?: boolean;
+}
+  

package/demo/loading-bouncy-ball.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="200" height="200" style="shape-rendering: auto; display: block; " xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle fill="#e15b64" r="13" cy="23" cx="50">
+  <animate values="23;77;23" keyTimes="0;0.5;1" keySplines="0.45 0 0.9 0.55;0 0.45 0.55 0.9" calcMode="spline" repeatCount="indefinite" dur="1s" attributeName="cy"></animate>
+</circle><g></g></g></svg>

package/demo/loading-double-ring.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="200" height="200" style="shape-rendering: auto; display: block; " xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle stroke-linecap="round" fill="none" stroke-dasharray="50.26548245743669 50.26548245743669" stroke="#0099e5" stroke-width="8" r="32" cy="50" cx="50">
+  <animateTransform values="0 50 50;360 50 50" keyTimes="0;1" repeatCount="indefinite" dur="1s" type="rotate" attributeName="transform"></animateTransform>
+</circle>
+<circle stroke-linecap="round" fill="none" stroke-dashoffset="36.12831551628262" stroke-dasharray="36.12831551628262 36.12831551628262" stroke="#ff4c4c" stroke-width="8" r="23" cy="50" cx="50">
+  <animateTransform values="0 50 50;-360 50 50" keyTimes="0;1" repeatCount="indefinite" dur="1s" type="rotate" attributeName="transform"></animateTransform>
+</circle><g></g></g></svg>

package/demo/loading-eclipse.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="200" height="200" style="shape-rendering: auto; display: block;"><g><path stroke="none" fill="#ffb900" d="M10 50A40 40 0 0 0 90 50A40 42 0 0 1 10 50">
+  <animateTransform values="0 50 51;360 50 51" keyTimes="0;1" repeatCount="indefinite" dur="1s" type="rotate" attributeName="transform"></animateTransform>
+</path><g></g></g></svg>

package/export-svg-typescript.js

@@ -0,0 +1,177 @@
+#!/usr/bin/env node
+
+import fs from "fs";
+import path from "path";
+
+/**
+ * Script to process SVG files from input folder and generates JS export index,
+ * Barrel Roll for the icons js files, enabling tree shaking to only the icons the
+ * user imports, enables customizing colors and size, and shows tooltip preview.
+ * usage: node convert-svg-to-js.js -i ./src/icons-svg -o ./dist/icons
+ * @param {string} inputFolder - Path to folder containing SVG files
+ * @param {string} outputFolder - Path to folder where JS files will be generated
+ */
+export function convertSVGFolderToExportIndex(inputFolder, indexPath) {
+  // Read all files from input folder
+  const files = fs.readdirSync(inputFolder);
+  const svgFiles = files.filter(
+    (file) => path.extname(file).toLowerCase() === ".svg"
+  );
+
+  // Generate index file
+
+  let indexContent = `// Do a Barrel Roll index of SVG icons as JS exports, enabling tree shaking to only the icons you import.\n\n`;
+  const exportData = [];
+
+  svgFiles.forEach((svgFile) => {
+    const inputPath = path.join(inputFolder, svgFile);
+    const baseName = path.basename(svgFile, ".svg");
+
+    // Read SVG content
+    const svgContent = fs.readFileSync(inputPath, "utf8");
+
+    // Extract original dimensions from SVG
+    const widthMatch = svgContent.match(/width="(\d+)"/);
+    const heightMatch = svgContent.match(/height="(\d+)"/);
+    const defaultWidth = widthMatch ? widthMatch[1] : "100";
+    const defaultHeight = heightMatch ? heightMatch[1] : "100";
+
+    // Convert SVG string to Base64
+    const svgBase64 = `data:image/svg+xml;base64,${btoa(
+      unescape(encodeURIComponent(svgContent))
+    )}`;
+
+    const jsContent = `
+/**
+* Returns a customized SVG string for loading icon ${baseName.replace(/loading-/g,      ""   )}
+* 
+* ![${baseName}](${svgBase64})
+* @param {Object} options - Configuration options
+* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
+* @param {number} [options.width] - Width of the SVG (default: ${defaultWidth})
+* @param {number} [options.height] - Height of the SVG (default: ${defaultHeight})
+* @param {number} [options.size] - Size for both width and height
+* @example ${toCamelCase(
+        baseName
+      )}({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
+* @returns {string} SVG string with applied customizations
+*/
+export const  ${toCamelCase(baseName)} = (options: LoadingOptions = {}) => customSVG(options, 
+\`${svgContent
+      .replace(/`/g, "\\`")
+      .replace(' xmlns:xlink="http://www.w3.org/1999/xlink"', "")
+      .replace(/\n/g, "")
+      .replace(/\$/g, "\\$")
+      .replace(/  +/g, " ")
+      .replace(/> </g, "><")}\`);\n\n`;
+
+    // Generate imports
+    indexContent += jsContent;
+
+    // Store export data for index file
+    exportData.push({
+      fileName: svgFile,
+      baseName: baseName,
+      functionName: toCamelCase(baseName),
+      content: jsContent,
+      svgBase64: svgBase64,
+      defaultWidth: defaultWidth,
+      defaultHeight: defaultHeight,
+    });
+  });
+
+  indexContent += `/**
+ * Shared utility function for processing SVG icons
+ * @param {Object} options - Configuration options
+ * @param {boolean} [options.raw] - Whether to return the raw SVG string or an img tag
+ * @param {string[]} [options.colors] - Array of hex colors to replace existing colors
+ * @param {number|string} [options.width] - Width of the SVG
+ * @param {number|string} [options.height] - Height of the SVG
+ * @param {number|string} [options.size] - Size for both width and height (overrides width/height)
+ * @param {string} svgString - The original SVG content
+ * @returns {string} SVG string with applied customizations
+ */
+function customSVG( options: LoadingOptions, svgString: string) {
+    const { colors = [], width, height, size, raw = false } = options;
+
+    const widthMatch = svgString.match(/width="(d+)"/);
+    const heightMatch = svgString.match(/height="(d+)"/);
+    const finalWidth = size || width || widthMatch?.[1] || '100';
+    const finalHeight = size || height || heightMatch?.[1] || '100';
+    
+    svgString = svgString.replace(/width="[^"]*"/g, \`width="\${finalWidth}"\`);
+    svgString = svgString.replace(/height="[^"]*"/g, \`height="\${finalHeight}"\`);
+
+    // If colors array is provided, replace hex colors in order of appearance
+    if (colors && colors.length > 0) {
+        const hexColorRegex = /#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}/g;
+        let colorIndex = 0;
+        
+        svgString = svgString.replace(hexColorRegex, (match) => {
+            if (colorIndex < colors.length) {
+                const replacement = colors[colorIndex];
+                colorIndex++;
+                return replacement?.startsWith('#') ? replacement : \`#\${replacement}\`;
+            }
+            return match; // Keep original color if no replacement available
+        });
+    }
+    if (!raw) 
+        svgString = \`<img alt="loading-icon" src="data:image/svg+xml;utf8,\${encodeURIComponent(svgString)}" />\`
+
+    return svgString;
+}
+interface LoadingOptions {
+  /** Array of hex colors to replace existing colors, in order of appearance in SVG*/
+  colors?: string[];
+  /** Width of the SVG */
+  width?: number;
+  /** Height of the SVG */
+  height?: number;
+  /** Size for both width and height (overrides width/height) */
+  size?: number;
+  /** Whether to return the raw SVG string or an img tag */
+  raw?: boolean;
+}
+  
+`;
+
+  fs.writeFileSync(indexPath, indexContent);
+
+  
+
+
+  console.log(
+    `✨ Converted ${svgFiles.length} SVG files to customizable JS export files`
+  );
+}
+
+/**
+ * Convert string to camelCase
+ * @param {string} str
+ * @returns {string}
+ */
+function toCamelCase(str) {
+  return str
+    .replace(/[^a-zA-Z0-9]/g, " ")
+    .replace(/\s+/g, " ")
+    .split(" ")
+    .map((word, index) => {
+      if (index === 0) {
+        return word.toLowerCase();
+      }
+      return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+    })
+    .join("");
+}
+
+// Get input/output folders from command line args
+const args = process.argv.slice(2);
+const inputIndex = args.indexOf("-i");
+const outputIndex = args.indexOf("-o");
+
+const inputFolder = inputIndex >= 0 ? args[inputIndex + 1] : "./svg"; // Folder containing SVG files
+const outputPath = outputIndex >= 0 ? args[outputIndex + 1] : "./index.ts"; // Folder for generated JS files
+
+// Run the converter
+convertSVGFolderToExportIndex(inputFolder, outputPath);

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "export-svg-typescript",
+  "module": "convert-svg-to-export.js",
+  "author": "vtempest",
+  "license": "MIT",
+  "version": "0.1.0",
+  "description": "Export SVG to TypeScript",
+  "type": "module",
+  "scripts": {
+    "demo": "node export-svg-typescript.js -i ./demo -o ./demo/index.ts"
+  },
+  "bin": {
+    "export-svg-typescript": "convert-svg-to-export.js"
+  }
+}

package/readme.md

@@ -0,0 +1,28 @@
+## export-svg-typescript
+
+Convert a folder of SVG icons into a color-customizable, tree-shakable TypeScript export `index.ts` that works with any component framework without SVG or Vite compiler issues.
+
+1. Barrel Roll: Exports all icons as named functions for tree shaking to only the ones actually used.
+2. Typescript Tooltip Previews: Each export includes a tooltip preview (Base64-encoded).
+3. Customizable: Change icon colors, size, and dimensions at runtime. Can return SVG or IMG tag with SVG as source.
+4. CLI Tool: Use directly from the command line or in npm scripts: `npx
+
+### Install
+```
+npm install -g export-svg-typescript
+```
+```
+# or use npx without installing globally
+npx export-svg-typescript -i ./src/icons -o ./src/icons/index.ts
+```
+
+### Example
+
+Clone this repo and run `npm run demo` to see icons in demo folder.
+
+```javascript
+import { loadingDoubleRing } from './demo';
+
+loadingDoubleRing({size: 200, colors: ["#5345bb"] })
+```
+![screenshot](https://i.imgur.com/aXczCC2.png)