export-svg-typescript 0.1.10 → 0.1.12
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.
- package/demo/icon-chat.svg +1 -0
- package/demo/index.ts +19 -4
- package/export-svg-typescript.js +17 -18
- package/package.json +2 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<?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>
|
package/demo/index.ts
CHANGED
|
@@ -1,19 +1,34 @@
|
|
|
1
1
|
// Do a Barrel Roll (auto-generated) index of SVG icons as JS exports, tree shaking to only the icons used.
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* Returns a customized SVG string for icon chat
|
|
5
|
+
*
|
|
6
|
+
* 
|
|
7
|
+
* @param {Object} options - Configuration options
|
|
8
|
+
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
9
|
+
* @param {number} [options.width] - Width of the SVG (default: 800)
|
|
10
|
+
* @param {number} [options.height] - Height of the SVG (default: 800)
|
|
11
|
+
* @param {number} [options.size] - Size for both width and height
|
|
12
|
+
* @example iconChat({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
13
|
+
* @returns {string} SVG string with applied customizations
|
|
14
|
+
*/
|
|
15
|
+
export const iconChat = (options: LoadingOptions = {}) => customSVG(options,
|
|
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
|
+
|
|
3
18
|
/**
|
|
4
19
|
* Returns a customized SVG string for icon loading-bouncy-ball
|
|
5
20
|
*
|
|
6
|
-
* 
|
|
7
22
|
* @param {Object} options - Configuration options
|
|
8
23
|
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
9
|
-
* @param {number} [options.width] - Width of the SVG (default:
|
|
10
|
-
* @param {number} [options.height] - Height of the SVG (default:
|
|
24
|
+
* @param {number} [options.width] - Width of the SVG (default: 200)
|
|
25
|
+
* @param {number} [options.height] - Height of the SVG (default: 200)
|
|
11
26
|
* @param {number} [options.size] - Size for both width and height
|
|
12
27
|
* @example loadingBouncyBall({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
13
28
|
* @returns {string} SVG string with applied customizations
|
|
14
29
|
*/
|
|
15
30
|
export const loadingBouncyBall = (options: LoadingOptions = {}) => customSVG(options,
|
|
16
|
-
`<svg
|
|
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>`);
|
|
17
32
|
|
|
18
33
|
/**
|
|
19
34
|
* Returns a customized SVG string for icon loading-double-ring
|
package/export-svg-typescript.js
CHANGED
|
@@ -27,19 +27,19 @@ export function convertSVGFolderToExportIndex(inputFolder, indexPath) {
|
|
|
27
27
|
const baseName = path.basename(svgFile, ".svg");
|
|
28
28
|
|
|
29
29
|
// Read SVG content
|
|
30
|
-
let svgContent = fs.readFileSync(inputPath, "utf8");
|
|
30
|
+
let svgPreview, svgContent = fs.readFileSync(inputPath, "utf8");
|
|
31
31
|
|
|
32
32
|
// Extract original dimensions from SVG
|
|
33
|
-
const widthMatch = svgContent.match(/width="(\d+)"/);
|
|
34
|
-
const heightMatch = svgContent.match(/height="(\d+)"/);
|
|
35
|
-
const defaultWidth = widthMatch ? widthMatch[1] :
|
|
36
|
-
const defaultHeight = heightMatch ? heightMatch[1] :
|
|
33
|
+
const widthMatch = svgContent.match(/width="(\d+)(px)*"/);
|
|
34
|
+
const heightMatch = svgContent.match(/height="(\d+)(px)*"/);
|
|
35
|
+
const defaultWidth = widthMatch ? widthMatch[1] : 100;
|
|
36
|
+
const defaultHeight = heightMatch ? heightMatch[1] : 100;
|
|
37
37
|
|
|
38
|
-
if (!widthMatch)
|
|
39
|
-
|
|
38
|
+
if (!widthMatch || defaultWidth > 400)
|
|
39
|
+
svgPreview = svgContent.replace(/width="(\d+)(px)*"/, '').replace(/height="(\d+)(px)*"/, '').replace('<svg', '<svg width="100px" height="100px"')
|
|
40
40
|
// Convert SVG string to Base64
|
|
41
41
|
const svgBase64 = `data:image/svg+xml;base64,${btoa(
|
|
42
|
-
unescape(encodeURIComponent(svgContent))
|
|
42
|
+
unescape(encodeURIComponent(svgPreview || svgContent))
|
|
43
43
|
)}`;
|
|
44
44
|
|
|
45
45
|
const jsContent = `/**
|
|
@@ -56,7 +56,7 @@ export function convertSVGFolderToExportIndex(inputFolder, indexPath) {
|
|
|
56
56
|
)}({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
57
57
|
* @returns {string} SVG string with applied customizations
|
|
58
58
|
*/
|
|
59
|
-
export const
|
|
59
|
+
export const ${toCamelCase(baseName)} = (options: LoadingOptions = {}) => customSVG(options,
|
|
60
60
|
\`${svgContent
|
|
61
61
|
.replace(/`/g, "\\`")
|
|
62
62
|
.replace(' xmlns:xlink="http://www.w3.org/1999/xlink"', "")
|
|
@@ -94,13 +94,16 @@ export const ${toCamelCase(baseName)} = (options: LoadingOptions = {}) => custo
|
|
|
94
94
|
function customSVG( options: LoadingOptions, svgString: string) {
|
|
95
95
|
const { colors = [], width, height, size, raw = false } = options;
|
|
96
96
|
|
|
97
|
-
const widthMatch = svgString.match(/width="
|
|
98
|
-
const heightMatch = svgString.match(/height="
|
|
97
|
+
const widthMatch = svgString.match(/width="[^"]*"/);
|
|
98
|
+
const heightMatch = svgString.match(/height="[^"]*"/);
|
|
99
99
|
const finalWidth = size || width || widthMatch?.[1] || '100';
|
|
100
100
|
const finalHeight = size || height || heightMatch?.[1] || '100';
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
101
|
+
|
|
102
|
+
if (width || height || size) {
|
|
103
|
+
svgString = svgString.replace(/width="[^"]*"/, \`width="${finalWidth}px"\`);
|
|
104
|
+
svgString = svgString.replace(/height="[^"]*"/, \`height="${finalHeight}px"\`);
|
|
105
|
+
}
|
|
106
|
+
|
|
104
107
|
|
|
105
108
|
// If colors array is provided, replace hex colors in order of appearance
|
|
106
109
|
if (colors && colors.length > 0) {
|
|
@@ -133,14 +136,10 @@ interface LoadingOptions {
|
|
|
133
136
|
/** Whether to return the raw SVG string or an img tag */
|
|
134
137
|
raw?: boolean;
|
|
135
138
|
}
|
|
136
|
-
|
|
137
139
|
`;
|
|
138
140
|
|
|
139
141
|
fs.writeFileSync(indexPath, indexContent);
|
|
140
142
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
143
|
console.log(
|
|
145
144
|
`✨ Converted ${svgFiles.length} SVG files to customizable JS export files`
|
|
146
145
|
);
|
package/package.json
CHANGED
|
@@ -3,10 +3,11 @@
|
|
|
3
3
|
"module": "./export-svg-typescript.js",
|
|
4
4
|
"author": "vtempest",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "0.1.
|
|
6
|
+
"version": "0.1.12",
|
|
7
7
|
"description": "Export SVG to TypeScript",
|
|
8
8
|
"type": "module",
|
|
9
9
|
"scripts": {
|
|
10
|
+
"pub": "npm version patch && npm publish",
|
|
10
11
|
"demo": "node export-svg-typescript.js -i ./demo -o ./demo/index.ts"
|
|
11
12
|
},
|
|
12
13
|
"bin": {
|