export-svg-typescript 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,7 +7,6 @@ import path from "path";
7
7
  * Script to process SVG files from input folder and generates JS export index,
8
8
  * Barrel Roll for the icons js files, enabling tree shaking to only the icons the
9
9
  * user imports, enables customizing colors and size, and shows tooltip preview.
10
- * usage: node convert-svg-to-js.js -i ./src/icons-svg -o ./dist/icons
11
10
  * @param {string} inputFolder - Path to folder containing SVG files
12
11
  * @param {string} outputFolder - Path to folder where JS files will be generated
13
12
  */
@@ -20,7 +19,7 @@ export function convertSVGFolderToExportIndex(inputFolder, indexPath) {
20
19
 
21
20
  // Generate index file
22
21
 
23
- let indexContent = `// Do a Barrel Roll index of SVG icons as JS exports, enabling tree shaking to only the icons you import.\n\n`;
22
+ let indexContent = `// Do a Barrel Roll index (auto-generated) of SVG icons as JS exports, tree shaking to only the icons used.\n\n`;
24
23
  const exportData = [];
25
24
 
26
25
  svgFiles.forEach((svgFile) => {
@@ -41,22 +40,24 @@ export function convertSVGFolderToExportIndex(inputFolder, indexPath) {
41
40
  unescape(encodeURIComponent(svgContent))
42
41
  )}`;
43
42
 
44
- const jsContent = `
45
- /**
46
- * Returns a customized SVG string for loading icon ${baseName.replace(/loading-/g, "" )}
47
- *
43
+ const jsContent = `/**
44
+ * Returns a customizable SVG string for icon ${baseName.replace(
45
+ /loading-/g,
46
+ ""
47
+ )}
48
48
  * ![${baseName}](${svgBase64})
49
- * @param {Object} options - Configuration options
50
49
  * @param {string[]} [options.colors] - Array of hex colors to replace existing colors
51
50
  * @param {number} [options.width] - Width of the SVG (default: ${defaultWidth})
52
51
  * @param {number} [options.height] - Height of the SVG (default: ${defaultHeight})
53
52
  * @param {number} [options.size] - Size for both width and height
54
53
  * @example ${toCamelCase(
55
- baseName
56
- )}({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
54
+ baseName
55
+ )}({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
57
56
  * @returns {string} SVG string with applied customizations
58
57
  */
59
- export const ${toCamelCase(baseName)} = (options: LoadingOptions = {}) => customSVG(options,
58
+ export const ${toCamelCase(
59
+ baseName
60
+ )} = (options: LoadingOptions = {}) => customSVG(options,
60
61
  \`${svgContent
61
62
  .replace(/`/g, "\\`")
62
63
  .replace(' xmlns:xlink="http://www.w3.org/1999/xlink"', "")
@@ -138,9 +139,6 @@ interface LoadingOptions {
138
139
 
139
140
  fs.writeFileSync(indexPath, indexContent);
140
141
 
141
-
142
-
143
-
144
142
  console.log(
145
143
  `✨ Converted ${svgFiles.length} SVG files to customizable JS export files`
146
144
  );
@@ -165,13 +163,9 @@ function toCamelCase(str) {
165
163
  .join("");
166
164
  }
167
165
 
168
- // Get input/output folders from command line args
169
- const args = process.argv.slice(2);
170
- const inputIndex = args.indexOf("-i");
171
- const outputIndex = args.indexOf("-o");
172
-
173
- const inputFolder = inputIndex >= 0 ? args[inputIndex + 1] : "./svg"; // Folder containing SVG files
174
- const outputPath = outputIndex >= 0 ? args[outputIndex + 1] : "./index.ts"; // Folder for generated JS files
166
+ // Get folder path from command line args
167
+ const inputFolder = process.argv[2] || "./svg";
168
+ const outputPath = process.argv[3] || `${inputFolder}/index.ts`;
175
169
 
176
170
  // Run the converter
177
171
  convertSVGFolderToExportIndex(inputFolder, outputPath);
package/package.json CHANGED
@@ -3,11 +3,11 @@
3
3
  "description": "Export SVG icons to TypeScript index with tooltips and customizations",
4
4
  "author": "vtempest",
5
5
  "license": "MIT",
6
- "version": "0.1.1",
6
+ "version": "0.1.3",
7
7
  "type": "module",
8
8
  "module": "export-svg-typescript.js",
9
9
  "scripts": {
10
- "demo": "node export-svg-typescript.js -i ./demo -o ./demo/index.ts"
10
+ "demo": "node export-svg-typescript.js ./demo ./demo/index.ts"
11
11
  },
12
12
  "bin": {
13
13
  "export-svg-typescript": "export-svg-typescript.js"
package/readme.md CHANGED
@@ -8,13 +8,18 @@ Convert a folder of SVG icons into a color-customizable, tree-shakable TypeScrip
8
8
  4. CLI Tool: Use directly from the command line or in npm scripts.
9
9
 
10
10
  ### Install
11
+ Global install:
11
12
  ```
12
13
  npm install -g export-svg-typescript
14
+ Or add to package.json:
13
15
  ```
16
+ "icons": "npx export-svg-typescript ./src/icons",
14
17
  ```
15
- # or use npx without installing globally
16
- npx export-svg-typescript -i ./src/icons -o ./src/icons/index.ts
18
+ Or use npx without installing globally with index output file set
17
19
  ```
20
+ npx export-svg-typescript ./src/icons ./src/icons/index.ts
21
+ ```
22
+
18
23
 
19
24
  ### Example
20
25