export-svg-typescript 0.1.5 → 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 +3 -6
- package/package.json +1 -1
- package/readme.md +3 -2
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
|
@@ -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
|
*/
|
|
@@ -41,10 +40,8 @@ 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 customized SVG string for icon ${baseName.replace(/icon-/g, "" )}
|
|
48
45
|
* 
|
|
49
46
|
* @param {Object} options - Configuration options
|
|
50
47
|
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
@@ -117,7 +114,7 @@ function customSVG( options: LoadingOptions, svgString: string) {
|
|
|
117
114
|
});
|
|
118
115
|
}
|
|
119
116
|
if (!raw)
|
|
120
|
-
svgString = \`<img alt="
|
|
117
|
+
svgString = \`<img alt="icon" src="data:image/svg+xml;utf8,\${encodeURIComponent(svgString)}" />\`
|
|
121
118
|
|
|
122
119
|
return svgString;
|
|
123
120
|
}
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -11,13 +11,14 @@ 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
17
|
"icons": "npx export-svg-typescript -i ./src/icons",
|
|
17
18
|
```
|
|
18
19
|
Or use npx without installing globally with index output file set
|
|
19
20
|
```
|
|
20
|
-
|
|
21
|
+
npx export-svg-typescript -i ./src/icons -o ./src/icons/index.ts
|
|
21
22
|
```
|
|
22
23
|
|
|
23
24
|
### Example
|
|
@@ -26,7 +27,7 @@ Clone this repo and run `npm run demo` to see icons in demo folder.
|
|
|
26
27
|
|
|
27
28
|
```javascript
|
|
28
29
|
import { loadingDoubleRing } from './demo';
|
|
29
|
-
|
|
30
|
+
|
|
30
31
|
loadingDoubleRing({size: 200, colors: ["#5345bb"] })
|
|
31
32
|
```
|
|
32
33
|
|