export-svg-typescript 0.1.11 → 0.1.13

package/demo/index.ts

@@ -12,7 +12,7 @@
 * @example iconChat({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
 * @returns {string} SVG string with applied customizations
 */
-export const  iconChat = (options: LoadingOptions = {}) => customSVG(options, 
+export const iconChat = (options: LoadingOptions = {}) => customSVG(options, 
 `<?xml version="1.0" encoding="iso-8859-1"?><svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 	 viewBox="0 0 512.001 512.001" xml:space="preserve"><path style="fill:#FFCD60;" d="M401.43,8.171h-32.681v184.647l42.06-21.787V17.54C410.809,12.365,406.615,8.171,401.43,8.171z"/><path style="fill:#FFDB8A;" d="M368.749,8.171H61.832c-5.185,0-9.379,4.194-9.379,9.369v32.681L8.17,72.367l44.283,22.147v76.517	l32.681,21.787h292.995V17.54C378.128,12.365,373.934,8.171,368.749,8.171z"/><path style="fill:#27467A;" d="M378.128,168.852l-9.379,65.362h32.681c5.185,0,9.379-4.194,9.379-9.379v-55.982H378.128z"/><path style="fill:#2F5E88;" d="M52.453,168.852v55.982c0,5.185,4.194,9.379,9.379,9.379h306.917c5.185,0,9.379-4.194,9.379-9.379	v-55.982H52.453z"/><polygon style="fill:#27467A;" points="195.804,52.835 267.459,89.601 195.804,126.367 "/><path style="fill:#FFCD60;" d="M450.168,277.788c5.185,0,9.379,4.194,9.379,9.368v32.681l44.283,22.147l-44.283,22.147v76.517	l-42.06,21.787V277.788H450.168z"/><path style="fill:#FFDB8A;" d="M417.487,277.788H110.57c-5.185,0-9.379,4.194-9.379,9.368v153.491l32.681,21.787h292.995V287.157	C426.866,281.982,422.672,277.788,417.487,277.788z"/><path style="fill:#27467A;" d="M426.866,438.469h32.681v55.982c0,5.185-4.194,9.379-9.379,9.379h-32.681L426.866,438.469z"/><path style="fill:#2F5E88;" d="M101.191,438.469v55.982c0,5.185,4.194,9.379,9.379,9.379h306.917c5.185,0,9.379-4.194,9.379-9.379	v-55.982H101.191z"/><polygon style="fill:#FF0F47;" points="244.541,320.273 316.196,357.039 244.541,393.805 "/><path d="M418.978,224.839V17.545c0-9.674-7.871-17.544-17.543-17.544H61.828c-9.674,0-17.544,7.871-17.544,17.544v27.632	L4.516,65.06C1.748,66.443,0,69.273,0,72.367s1.748,5.924,4.516,7.307l39.767,19.884v125.279c0,9.675,7.871,17.545,17.544,17.545	h339.607C411.109,242.384,418.978,234.513,418.978,224.839z M26.439,72.367l29.669-14.834c2.768-1.383,4.516-4.213,4.516-7.307	V17.545c0-0.663,0.54-1.204,1.204-1.204h339.607c0.663,0,1.203,0.54,1.203,1.204v143.137H60.624V94.51	c0-3.095-1.748-5.924-4.516-7.307L26.439,72.367z M60.624,224.839v-47.816h342.014v47.816c0,0.665-0.539,1.205-1.203,1.205H61.828	C61.164,226.044,60.624,225.503,60.624,224.839z"/><path d="M378.127,193.363H85.135c-4.512,0-8.17,3.658-8.17,8.17s3.658,8.17,8.17,8.17h292.993c4.513,0,8.17-3.658,8.17-8.17	S382.64,193.363,378.127,193.363z"/><path d="M191.545,132.25c1.304,0.796,2.78,1.198,4.259,1.198c1.277,0,2.556-0.298,3.729-0.901l71.656-36.766	c2.727-1.399,4.44-4.205,4.44-7.269s-1.714-5.871-4.44-7.269l-71.656-36.766c-2.534-1.301-5.56-1.186-7.988,0.297	c-2.429,1.484-3.911,4.125-3.911,6.972v73.532C187.634,128.124,189.115,130.766,191.545,132.25z M203.974,65.121l45.588,23.391	l-45.589,23.391V65.121H203.974z"/><path d="M507.483,334.677l-39.768-19.884v-27.632c0-9.674-7.871-17.544-17.543-17.544H110.566c-9.674,0-17.544,7.871-17.544,17.544	v207.294c0,9.675,7.871,17.545,17.544,17.545h339.607c9.674,0,17.543-7.871,17.543-17.545V369.177l39.768-19.884	c2.768-1.385,4.517-4.213,4.517-7.307C512,338.89,510.252,336.06,507.483,334.677z M450.172,495.661H110.566	c-0.663,0-1.204-0.54-1.204-1.205v-47.816h342.014v47.816C451.376,495.12,450.836,495.661,450.172,495.661z M455.891,356.819	c-2.767,1.383-4.516,4.213-4.516,7.307v66.172H109.362V287.162c0-0.663,0.54-1.204,1.204-1.204h339.607	c0.663,0,1.203,0.54,1.203,1.204v32.681c0,3.095,1.748,5.924,4.516,7.307l29.669,14.834L455.891,356.819z"/><path d="M426.865,462.98H133.873c-4.512,0-8.17,3.658-8.17,8.17c0,4.512,3.658,8.17,8.17,8.17h292.993c4.513,0,8.17-3.658,8.17-8.17	C435.035,466.638,431.377,462.98,426.865,462.98z"/><path d="M319.926,350.859l-71.655-36.766c-2.534-1.301-5.56-1.186-7.988,0.297c-2.429,1.484-3.911,4.125-3.911,6.972v73.532	c0,2.846,1.482,5.488,3.911,6.972c1.304,0.796,2.78,1.198,4.259,1.198c1.277,0,2.556-0.298,3.729-0.901l71.655-36.766	c2.727-1.399,4.44-4.205,4.44-7.269S322.653,352.258,319.926,350.859z M252.711,381.52v-46.782l45.588,23.391L252.711,381.52z"/></svg>`);
 
 /**
@@ -27,7 +27,7 @@ export const  iconChat = (options: LoadingOptions = {}) => customSVG(options,
 * @example loadingBouncyBall({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
 * @returns {string} SVG string with applied customizations
 */
-export const  loadingBouncyBall = (options: LoadingOptions = {}) => customSVG(options, 
+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>`);
 
 /**
@@ -42,7 +42,7 @@ export const  loadingBouncyBall = (options: LoadingOptions = {}) => customSVG(op
 * @example loadingDoubleRing({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
 * @returns {string} SVG string with applied customizations
 */
-export const  loadingDoubleRing = (options: LoadingOptions = {}) => customSVG(options, 
+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>`);
 
 /**
@@ -57,7 +57,7 @@ export const  loadingDoubleRing = (options: LoadingOptions = {}) => customSVG(op
 * @example loadingEclipse({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
 * @returns {string} SVG string with applied customizations
 */
-export const  loadingEclipse = (options: LoadingOptions = {}) => customSVG(options, 
+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>`);
 
 /**
@@ -74,13 +74,16 @@ export const  loadingEclipse = (options: LoadingOptions = {}) => customSVG(optio
 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 widthMatch = svgString.match(/width="[^"]*"/);
+    const heightMatch = svgString.match(/height="[^"]*"/);
     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 (width || height || size) {
+        svgString = svgString.replace(/width="[^"]*"/, `width="${finalWidth}px"`);
+        svgString = svgString.replace(/height="[^"]*"/, `height="${finalHeight}px"`);
+    }
+
 
     // If colors array is provided, replace hex colors in order of appearance
     if (colors && colors.length > 0) {
@@ -97,7 +100,7 @@ function customSVG( options: LoadingOptions, svgString: string) {
         });
     }
     if (!raw) 
-        svgString = `<img width="${finalWidth}" height="${finalHeight}" alt="icon" src="data:image/svg+xml;utf8,${encodeURIComponent(svgString)}" />`
+        svgString = (width || height || size ? `<img width="${finalWidth}" height="${finalHeight}"` : '<img') + ' alt="icon" src="data:image/svg+xml;utf8,${encodeURIComponent(svgString)}" />`
 
     return svgString;
 }
@@ -113,4 +116,3 @@ interface LoadingOptions {
   /** Whether to return the raw SVG string or an img tag */
   raw?: boolean;
 }
-  

package/export-svg-typescript.js

@@ -56,7 +56,7 @@ export function convertSVGFolderToExportIndex(inputFolder, indexPath) {
       )}({ 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"', "")
@@ -94,13 +94,16 @@ export const  ${toCamelCase(baseName)} = (options: LoadingOptions = {}) => custo
 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 widthMatch = svgString.match(/width="[^"]*"/);
+    const heightMatch = svgString.match(/height="[^"]*"/);
     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 (width || height || size) {
+        svgString = svgString.replace(/width="[^"]*"/, \`width="\${finalWidth}px"\`);
+        svgString = svgString.replace(/height="[^"]*"/, \`height="\${finalHeight}px"\`);
+    }
+
 
     // If colors array is provided, replace hex colors in order of appearance
     if (colors && colors.length > 0) {
@@ -117,7 +120,7 @@ function customSVG( options: LoadingOptions, svgString: string) {
         });
     }
     if (!raw) 
-        svgString = \`<img width="\${finalWidth}" height="\${finalHeight}" alt="icon" src="data:image/svg+xml;utf8,\${encodeURIComponent(svgString)}" />\`
+        svgString = (width || height || size ? \`<img width="\${finalWidth}" height="\${finalHeight}"\` : '<img') + ' alt="icon" src="data:image/svg+xml;utf8,\${encodeURIComponent(svgString)}" />\`
 
     return svgString;
 }
@@ -133,14 +136,10 @@ interface LoadingOptions {
   /** 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`
   );

package/package.json

@@ -3,10 +3,11 @@
   "module": "./export-svg-typescript.js",
   "author": "vtempest",
   "license": "MIT",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "Export SVG to TypeScript",
   "type": "module",
   "scripts": {
+    "pub": "npm version patch && npm publish",
     "demo": "node export-svg-typescript.js -i ./demo -o ./demo/index.ts"
   },
   "bin": {