export-svg-typescript 0.1.0 → 0.1.3

package/export-svg-typescript.js

@@ -7,7 +7,6 @@ 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
  */
@@ -20,7 +19,7 @@ export function convertSVGFolderToExportIndex(inputFolder, indexPath) {
 
   // 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`;
+  let indexContent = `// Do a Barrel Roll index (auto-generated) of SVG icons as JS exports, tree shaking to only the icons used.\n\n`;
   const exportData = [];
 
   svgFiles.forEach((svgFile) => {
@@ -41,22 +40,24 @@ export function convertSVGFolderToExportIndex(inputFolder, indexPath) {
       unescape(encodeURIComponent(svgContent))
     )}`;
 
-    const jsContent = `
-/**
-* Returns a customized SVG string for loading icon ${baseName.replace(/loading-/g,      ""   )}
-* 
+    const jsContent = `/**
+* Returns a customizable SVG string for 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 });
+      baseName
+    )}({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
 * @returns {string} SVG string with applied customizations
 */
-export const  ${toCamelCase(baseName)} = (options: LoadingOptions = {}) => customSVG(options, 
+export const  ${toCamelCase(
+      baseName
+    )} = (options: LoadingOptions = {}) => customSVG(options, 
 \`${svgContent
       .replace(/`/g, "\\`")
       .replace(' xmlns:xlink="http://www.w3.org/1999/xlink"', "")
@@ -138,9 +139,6 @@ interface LoadingOptions {
 
   fs.writeFileSync(indexPath, indexContent);
 
-  
-
-
   console.log(
     `✨ Converted ${svgFiles.length} SVG files to customizable JS export files`
   );
@@ -165,13 +163,9 @@ function toCamelCase(str) {
     .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
+// Get folder path from command line args
+const inputFolder = process.argv[2] || "./svg";
+const outputPath = process.argv[3] || `${inputFolder}/index.ts`;
 
 // Run the converter
 convertSVGFolderToExportIndex(inputFolder, outputPath);

package/package.json

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

package/readme.md

@@ -3,18 +3,23 @@
 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).
+2. Typescript Tooltip Previews: Each export includes a tooltip preview of icon.
 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
+4. CLI Tool: Use directly from the command line or in npm scripts.
 
 ### Install
+Global install:
 ```
 npm install -g export-svg-typescript
+Or add to package.json:
 ```
+ "icons": "npx export-svg-typescript ./src/icons",
 ```
-# or use npx without installing globally
-npx export-svg-typescript -i ./src/icons -o ./src/icons/index.ts
+Or use npx without installing globally with index output file set
 ```
+npx export-svg-typescript ./src/icons ./src/icons/index.ts
+```
+
 
 ### Example