export-svg-typescript 0.1.4 → 0.1.6
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/index.ts +5 -11
- package/export-svg-typescript.js +17 -14
- package/package.json +3 -3
- package/readme.md +2 -11
package/demo/index.ts
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
// Do a Barrel Roll index of SVG icons as JS exports,
|
|
2
|
-
|
|
1
|
+
// Do a Barrel Roll (auto-generated) index of SVG icons as JS exports, tree shaking to only the icons used.
|
|
3
2
|
|
|
4
3
|
/**
|
|
5
|
-
* Returns a customized SVG string for
|
|
6
|
-
*
|
|
4
|
+
* Returns a customized SVG string for icon loading-bouncy-ball
|
|
7
5
|
* 
|
|
8
6
|
* @param {Object} options - Configuration options
|
|
9
7
|
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
@@ -16,10 +14,8 @@
|
|
|
16
14
|
export const loadingBouncyBall = (options: LoadingOptions = {}) => customSVG(options,
|
|
17
15
|
`<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>`);
|
|
18
16
|
|
|
19
|
-
|
|
20
17
|
/**
|
|
21
|
-
* Returns a customized SVG string for
|
|
22
|
-
*
|
|
18
|
+
* Returns a customized SVG string for icon loading-double-ring
|
|
23
19
|
* 
|
|
24
20
|
* @param {Object} options - Configuration options
|
|
25
21
|
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
@@ -32,10 +28,8 @@ export const loadingBouncyBall = (options: LoadingOptions = {}) => customSVG(op
|
|
|
32
28
|
export const loadingDoubleRing = (options: LoadingOptions = {}) => customSVG(options,
|
|
33
29
|
`<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>`);
|
|
34
30
|
|
|
35
|
-
|
|
36
31
|
/**
|
|
37
|
-
* Returns a customized SVG string for
|
|
38
|
-
*
|
|
32
|
+
* Returns a customized SVG string for icon loading-eclipse
|
|
39
33
|
* 
|
|
40
34
|
* @param {Object} options - Configuration options
|
|
41
35
|
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
@@ -85,7 +79,7 @@ function customSVG( options: LoadingOptions, svgString: string) {
|
|
|
85
79
|
});
|
|
86
80
|
}
|
|
87
81
|
if (!raw)
|
|
88
|
-
svgString = `<img alt="
|
|
82
|
+
svgString = `<img alt="icon" src="data:image/svg+xml;utf8,${encodeURIComponent(svgString)}" />`
|
|
89
83
|
|
|
90
84
|
return svgString;
|
|
91
85
|
}
|
package/export-svg-typescript.js
CHANGED
|
@@ -19,7 +19,7 @@ export function convertSVGFolderToExportIndex(inputFolder, indexPath) {
|
|
|
19
19
|
|
|
20
20
|
// Generate index file
|
|
21
21
|
|
|
22
|
-
let indexContent = `// Do a Barrel Roll
|
|
22
|
+
let indexContent = `// Do a Barrel Roll (auto-generated) index of SVG icons as JS exports, tree shaking to only the icons used.\n\n`;
|
|
23
23
|
const exportData = [];
|
|
24
24
|
|
|
25
25
|
svgFiles.forEach((svgFile) => {
|
|
@@ -41,23 +41,19 @@ export function convertSVGFolderToExportIndex(inputFolder, indexPath) {
|
|
|
41
41
|
)}`;
|
|
42
42
|
|
|
43
43
|
const jsContent = `/**
|
|
44
|
-
* Returns a
|
|
45
|
-
/loading-/g,
|
|
46
|
-
""
|
|
47
|
-
)}
|
|
44
|
+
* Returns a customized SVG string for icon ${baseName.replace(/icon-/g, "" )}
|
|
48
45
|
* 
|
|
46
|
+
* @param {Object} options - Configuration options
|
|
49
47
|
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
50
48
|
* @param {number} [options.width] - Width of the SVG (default: ${defaultWidth})
|
|
51
49
|
* @param {number} [options.height] - Height of the SVG (default: ${defaultHeight})
|
|
52
50
|
* @param {number} [options.size] - Size for both width and height
|
|
53
51
|
* @example ${toCamelCase(
|
|
54
|
-
|
|
55
|
-
|
|
52
|
+
baseName
|
|
53
|
+
)}({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
56
54
|
* @returns {string} SVG string with applied customizations
|
|
57
55
|
*/
|
|
58
|
-
export const ${toCamelCase(
|
|
59
|
-
baseName
|
|
60
|
-
)} = (options: LoadingOptions = {}) => customSVG(options,
|
|
56
|
+
export const ${toCamelCase(baseName)} = (options: LoadingOptions = {}) => customSVG(options,
|
|
61
57
|
\`${svgContent
|
|
62
58
|
.replace(/`/g, "\\`")
|
|
63
59
|
.replace(' xmlns:xlink="http://www.w3.org/1999/xlink"', "")
|
|
@@ -118,7 +114,7 @@ function customSVG( options: LoadingOptions, svgString: string) {
|
|
|
118
114
|
});
|
|
119
115
|
}
|
|
120
116
|
if (!raw)
|
|
121
|
-
svgString = \`<img alt="
|
|
117
|
+
svgString = \`<img alt="icon" src="data:image/svg+xml;utf8,\${encodeURIComponent(svgString)}" />\`
|
|
122
118
|
|
|
123
119
|
return svgString;
|
|
124
120
|
}
|
|
@@ -139,6 +135,9 @@ interface LoadingOptions {
|
|
|
139
135
|
|
|
140
136
|
fs.writeFileSync(indexPath, indexContent);
|
|
141
137
|
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
142
141
|
console.log(
|
|
143
142
|
`✨ Converted ${svgFiles.length} SVG files to customizable JS export files`
|
|
144
143
|
);
|
|
@@ -163,9 +162,13 @@ function toCamelCase(str) {
|
|
|
163
162
|
.join("");
|
|
164
163
|
}
|
|
165
164
|
|
|
166
|
-
// Get
|
|
167
|
-
const
|
|
168
|
-
const
|
|
165
|
+
// Get input/output folders from command line args
|
|
166
|
+
const args = process.argv.slice(2);
|
|
167
|
+
const inputIndex = args.indexOf("-i");
|
|
168
|
+
const outputIndex = args.indexOf("-o");
|
|
169
|
+
|
|
170
|
+
const inputFolder = inputIndex >= 0 ? args[inputIndex + 1] : "./svg"; // Folder containing SVG files
|
|
171
|
+
const outputPath = outputIndex >= 0 ? args[outputIndex + 1] : "./index.ts"; // Folder for generated JS files
|
|
169
172
|
|
|
170
173
|
// Run the converter
|
|
171
174
|
convertSVGFolderToExportIndex(inputFolder, outputPath);
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "export-svg-typescript",
|
|
3
|
-
"
|
|
3
|
+
"module": "export-svg-typescript.js",
|
|
4
4
|
"author": "vtempest",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "0.1.
|
|
6
|
+
"version": "0.1.6",
|
|
7
|
+
"description": "Export SVG to TypeScript",
|
|
7
8
|
"type": "module",
|
|
8
|
-
"module": "export-svg-typescript.js",
|
|
9
9
|
"scripts": {
|
|
10
10
|
"demo": "node export-svg-typescript.js -i ./demo -o ./demo/index.ts"
|
|
11
11
|
},
|
package/readme.md
CHANGED
|
@@ -11,32 +11,23 @@ Convert a folder of SVG icons into a color-customizable, tree-shakable TypeScrip
|
|
|
11
11
|
Global install:
|
|
12
12
|
```
|
|
13
13
|
npm install -g export-svg-typescript
|
|
14
|
+
```
|
|
14
15
|
Or add to package.json:
|
|
15
16
|
```
|
|
16
|
-
<<<<<<< HEAD
|
|
17
17
|
"icons": "npx export-svg-typescript -i ./src/icons",
|
|
18
18
|
```
|
|
19
19
|
Or use npx without installing globally with index output file set
|
|
20
20
|
```
|
|
21
21
|
npx export-svg-typescript -i ./src/icons -o ./src/icons/index.ts
|
|
22
|
-
=======
|
|
23
|
-
"icons": "npx export-svg-typescript ./src/icons",
|
|
24
|
-
```
|
|
25
|
-
Or use npx without installing globally with index output file set
|
|
26
|
-
>>>>>>> c0be8d9515fa79c37c249ff6f2a0139d15d2f374
|
|
27
|
-
```
|
|
28
|
-
npx export-svg-typescript ./src/icons ./src/icons/index.ts
|
|
29
22
|
```
|
|
30
23
|
|
|
31
|
-
|
|
32
|
-
|
|
33
24
|
### Example
|
|
34
25
|
|
|
35
26
|
Clone this repo and run `npm run demo` to see icons in demo folder.
|
|
36
27
|
|
|
37
28
|
```javascript
|
|
38
29
|
import { loadingDoubleRing } from './demo';
|
|
39
|
-
|
|
30
|
+
|
|
40
31
|
loadingDoubleRing({size: 200, colors: ["#5345bb"] })
|
|
41
32
|
```
|
|
42
33
|
|