export-svg-typescript 0.1.12 → 0.1.14

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.
Files changed (3) hide show
  1. package/demo/index.ts +13 -11
  2. package/export-svg-typescript.js +3 -3
  3. package/package.json +1 -1
package/demo/index.ts CHANGED
@@ -12,7 +12,7 @@
12
12
  * @example iconChat({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
13
13
  * @returns {string} SVG string with applied customizations
14
14
  */
15
- export const iconChat = (options: LoadingOptions = {}) => customSVG(options,
15
+ export const iconChat = (options: LoadingOptions = {}) => customSVG(options,
16
16
  `<?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>`);
17
17
 
18
18
  /**
@@ -27,7 +27,7 @@ export const iconChat = (options: LoadingOptions = {}) => customSVG(options,
27
27
  * @example loadingBouncyBall({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
28
28
  * @returns {string} SVG string with applied customizations
29
29
  */
30
- export const loadingBouncyBall = (options: LoadingOptions = {}) => customSVG(options,
30
+ export const loadingBouncyBall = (options: LoadingOptions = {}) => customSVG(options,
31
31
  `<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>`);
32
32
 
33
33
  /**
@@ -42,7 +42,7 @@ export const loadingBouncyBall = (options: LoadingOptions = {}) => customSVG(op
42
42
  * @example loadingDoubleRing({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
43
43
  * @returns {string} SVG string with applied customizations
44
44
  */
45
- export const loadingDoubleRing = (options: LoadingOptions = {}) => customSVG(options,
45
+ export const loadingDoubleRing = (options: LoadingOptions = {}) => customSVG(options,
46
46
  `<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>`);
47
47
 
48
48
  /**
@@ -57,7 +57,7 @@ export const loadingDoubleRing = (options: LoadingOptions = {}) => customSVG(op
57
57
  * @example loadingEclipse({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
58
58
  * @returns {string} SVG string with applied customizations
59
59
  */
60
- export const loadingEclipse = (options: LoadingOptions = {}) => customSVG(options,
60
+ export const loadingEclipse = (options: LoadingOptions = {}) => customSVG(options,
61
61
  `<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>`);
62
62
 
63
63
  /**
@@ -74,13 +74,16 @@ export const loadingEclipse = (options: LoadingOptions = {}) => customSVG(optio
74
74
  function customSVG( options: LoadingOptions, svgString: string) {
75
75
  const { colors = [], width, height, size, raw = false } = options;
76
76
 
77
- const widthMatch = svgString.match(/width="(d+)"/);
78
- const heightMatch = svgString.match(/height="(d+)"/);
77
+ const widthMatch = svgString.match(/width="[^"]*"/);
78
+ const heightMatch = svgString.match(/height="[^"]*"/);
79
79
  const finalWidth = size || width || widthMatch?.[1] || '100';
80
80
  const finalHeight = size || height || heightMatch?.[1] || '100';
81
-
82
- svgString = svgString.replace(/width="[^"]*"/g, `width="${finalWidth}"`);
83
- svgString = svgString.replace(/height="[^"]*"/g, `height="${finalHeight}"`);
81
+
82
+ if (width || height || size) {
83
+ svgString = svgString.replace(/width="[^"]*"/, `width="${finalWidth}px"`);
84
+ svgString = svgString.replace(/height="[^"]*"/, `height="${finalHeight}px"`);
85
+ }
86
+
84
87
 
85
88
  // If colors array is provided, replace hex colors in order of appearance
86
89
  if (colors && colors.length > 0) {
@@ -97,7 +100,7 @@ function customSVG( options: LoadingOptions, svgString: string) {
97
100
  });
98
101
  }
99
102
  if (!raw)
100
- svgString = `<img width="${finalWidth}" height="${finalHeight}" alt="icon" src="data:image/svg+xml;utf8,${encodeURIComponent(svgString)}" />`
103
+ svgString = (width || height || size ? `<img width="${finalWidth}" height="${finalHeight}"` : '<img') + '\` alt="icon" src="data:image/svg+xml;utf8,${encodeURIComponent(svgString)}" />`
101
104
 
102
105
  return svgString;
103
106
  }
@@ -113,4 +116,3 @@ interface LoadingOptions {
113
116
  /** Whether to return the raw SVG string or an img tag */
114
117
  raw?: boolean;
115
118
  }
116
-
package/export-svg-typescript.js CHANGED
@@ -100,8 +100,8 @@ function customSVG( options: LoadingOptions, svgString: string) {
100
100
  const finalHeight = size || height || heightMatch?.[1] || '100';
101
101
 
102
102
  if (width || height || size) {
103
- svgString = svgString.replace(/width="[^"]*"/, \`width="${finalWidth}px"\`);
104
- svgString = svgString.replace(/height="[^"]*"/, \`height="${finalHeight}px"\`);
103
+ svgString = svgString.replace(/width="[^"]*"/, \`width="\${finalWidth}px"\`);
104
+ svgString = svgString.replace(/height="[^"]*"/, \`height="\${finalHeight}px"\`);
105
105
  }
106
106
 
107
107
 
@@ -120,7 +120,7 @@ function customSVG( options: LoadingOptions, svgString: string) {
120
120
  });
121
121
  }
122
122
  if (!raw)
123
- svgString = \`<img width="\${finalWidth}" height="\${finalHeight}" alt="icon" src="data:image/svg+xml;utf8,\${encodeURIComponent(svgString)}" />\`
123
+ svgString = (width || height || size ? \`<img width="\${finalWidth}" height="\${finalHeight}"\` : '<img') + ' alt="icon" src="data:image/svg+xml;utf8,\${encodeURIComponent(svgString)}" />\`
124
124
 
125
125
  return svgString;
126
126
  }
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "module": "./export-svg-typescript.js",
4
4
  "author": "vtempest",
5
5
  "license": "MIT",
6
- "version": "0.1.12",
6
+ "version": "0.1.14",
7
7
  "description": "Export SVG to TypeScript",
8
8
  "type": "module",
9
9
  "scripts": {