grab-url 0.9.141 → 1.0.1
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/dist/grab-api.cjs.js +1 -1
- package/dist/grab-api.cjs.js.map +1 -1
- package/dist/grab-api.d.ts +5 -5
- package/dist/grab-api.es.js.map +1 -1
- package/dist/icons.cjs.js +1 -1
- package/dist/icons.cjs.js.map +1 -1
- package/dist/icons.d.ts +0 -234
- package/dist/icons.es.js +1 -113
- package/dist/icons.es.js.map +1 -1
- package/package.json +12 -13
- package/readme.md +12 -18
- package/src/grab-api.ts +5 -5
- package/src/{grab-url-cli.js → grab-url.ts} +380 -354
- package/src/{spinners.json → icons/cli/spinners.json} +1 -482
- package/src/icons/index.ts +0 -255
- package/src/icons/svg/index.ts +313 -0
- package/src/grab-cli.js +0 -316
- /package/src/icons/{loading-bouncy-ball.svg → svg/loading-bouncy-ball.svg} +0 -0
- /package/src/icons/{loading-double-ring.svg → svg/loading-double-ring.svg} +0 -0
- /package/src/icons/{loading-eclipse.svg → svg/loading-eclipse.svg} +0 -0
- /package/src/icons/{loading-ellipsis.svg → svg/loading-ellipsis.svg} +0 -0
- /package/src/icons/{loading-floating-search.svg → svg/loading-floating-search.svg} +0 -0
- /package/src/icons/{loading-gears.svg → svg/loading-gears.svg} +0 -0
- /package/src/icons/{loading-infinity.svg → svg/loading-infinity.svg} +0 -0
- /package/src/icons/{loading-orbital.svg → svg/loading-orbital.svg} +0 -0
- /package/src/icons/{loading-pacman.svg → svg/loading-pacman.svg} +0 -0
- /package/src/icons/{loading-pulse-bars.svg → svg/loading-pulse-bars.svg} +0 -0
- /package/src/icons/{loading-red-blue-ball.svg → svg/loading-red-blue-ball.svg} +0 -0
- /package/src/icons/{loading-reload-arrow.svg → svg/loading-reload-arrow.svg} +0 -0
- /package/src/icons/{loading-ring.svg → svg/loading-ring.svg} +0 -0
- /package/src/icons/{loading-ripple.svg → svg/loading-ripple.svg} +0 -0
- /package/src/icons/{loading-spinner-oval.svg → svg/loading-spinner-oval.svg} +0 -0
- /package/src/icons/{loading-spinner.svg → svg/loading-spinner.svg} +0 -0
- /package/src/icons/{loading-square-blocks.svg → svg/loading-square-blocks.svg} +0 -0
|
@@ -0,0 +1,313 @@
|
|
|
1
|
+
// Do a Barrel Roll (auto-generated) index of SVG icons as JS exports, tree shaking to only the icons used.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Returns a customized SVG string for icon loading-bouncy-ball
|
|
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: 200)
|
|
10
|
+
* @param {number} [options.height] - Height of the SVG (default: 200)
|
|
11
|
+
* @param {number} [options.size] - Size for both width and height
|
|
12
|
+
* @example loadingBouncyBall({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
13
|
+
* @returns {string} SVG string with applied customizations
|
|
14
|
+
*/
|
|
15
|
+
export const loadingBouncyBall = (options: LoadingOptions = {}) => customSVG(options,
|
|
16
|
+
`<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
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Returns a customized SVG string for icon loading-double-ring
|
|
20
|
+
*
|
|
21
|
+
* 
|
|
22
|
+
* @param {Object} options - Configuration options
|
|
23
|
+
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
24
|
+
* @param {number} [options.width] - Width of the SVG (default: 200)
|
|
25
|
+
* @param {number} [options.height] - Height of the SVG (default: 200)
|
|
26
|
+
* @param {number} [options.size] - Size for both width and height
|
|
27
|
+
* @example loadingDoubleRing({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
28
|
+
* @returns {string} SVG string with applied customizations
|
|
29
|
+
*/
|
|
30
|
+
export const loadingDoubleRing = (options: LoadingOptions = {}) => customSVG(options,
|
|
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 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>`);
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* Returns a customized SVG string for icon loading-eclipse
|
|
35
|
+
*
|
|
36
|
+
* 
|
|
37
|
+
* @param {Object} options - Configuration options
|
|
38
|
+
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
39
|
+
* @param {number} [options.width] - Width of the SVG (default: 200)
|
|
40
|
+
* @param {number} [options.height] - Height of the SVG (default: 200)
|
|
41
|
+
* @param {number} [options.size] - Size for both width and height
|
|
42
|
+
* @example loadingEclipse({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
43
|
+
* @returns {string} SVG string with applied customizations
|
|
44
|
+
*/
|
|
45
|
+
export const loadingEclipse = (options: LoadingOptions = {}) => customSVG(options,
|
|
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><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>`);
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Returns a customized SVG string for icon loading-ellipsis
|
|
50
|
+
*
|
|
51
|
+
* 
|
|
52
|
+
* @param {Object} options - Configuration options
|
|
53
|
+
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
54
|
+
* @param {number} [options.width] - Width of the SVG (default: 200)
|
|
55
|
+
* @param {number} [options.height] - Height of the SVG (default: 200)
|
|
56
|
+
* @param {number} [options.size] - Size for both width and height
|
|
57
|
+
* @example loadingEllipsis({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
58
|
+
* @returns {string} SVG string with applied customizations
|
|
59
|
+
*/
|
|
60
|
+
export const loadingEllipsis = (options: LoadingOptions = {}) => customSVG(options,
|
|
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><circle fill="#d20962" r="10" cy="50" cx="84"><animate begin="0s" keySplines="0 0.5 0.5 1" values="10;0" keyTimes="0;1" calcMode="spline" dur="0.25s" repeatCount="indefinite" attributeName="r"></animate><animate begin="0s" values="#d20962;#00a78e;#7ac143;#f47721;#d20962" keyTimes="0;0.25;0.5;0.75;1" calcMode="discrete" dur="1s" repeatCount="indefinite" attributeName="fill"></animate></circle><circle fill="#d20962" r="10" cy="50" cx="16"><animate begin="0s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="r"></animate><animate begin="0s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="cx"></animate></circle><circle fill="#f47721" r="10" cy="50" cx="50"><animate begin="-0.25s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="r"></animate><animate begin="-0.25s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="cx"></animate></circle><circle fill="#7ac143" r="10" cy="50" cx="84"><animate begin="-0.5s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="r"></animate><animate begin="-0.5s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="cx"></animate></circle><circle fill="#00a78e" r="10" cy="50" cx="16"><animate begin="-0.75s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="r"></animate><animate begin="-0.75s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="cx"></animate></circle><g></g></g></svg>`);
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* Returns a customized SVG string for icon loading-floating-search
|
|
65
|
+
*
|
|
66
|
+
* 
|
|
67
|
+
* @param {Object} options - Configuration options
|
|
68
|
+
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
69
|
+
* @param {number} [options.width] - Width of the SVG (default: 339)
|
|
70
|
+
* @param {number} [options.height] - Height of the SVG (default: 339)
|
|
71
|
+
* @param {number} [options.size] - Size for both width and height
|
|
72
|
+
* @example loadingFloatingSearch({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
73
|
+
* @returns {string} SVG string with applied customizations
|
|
74
|
+
*/
|
|
75
|
+
export const loadingFloatingSearch = (options: LoadingOptions = {}) => customSVG(options,
|
|
76
|
+
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="339" height="339" style="shape-rendering: auto; display: block; "><g><g transform="translate(50 50)"><g transform="scale(0.6)"><g transform="translate(-50 -50)"><g><animateTransform keyTimes="0;0.33;0.66;1" values="-20 -20;20 -20;0 20;-20 -20" dur="1s" repeatCount="indefinite" type="translate" attributeName="transform"></animateTransform><path d="M44.19 26.158c-4.817 0-9.345 1.876-12.751 5.282c-3.406 3.406-5.282 7.934-5.282 12.751 c0 4.817 1.876 9.345 5.282 12.751c3.406 3.406 7.934 5.282 12.751 5.282s9.345-1.876 12.751-5.282 c3.406-3.406 5.282-7.934 5.282-12.751c0-4.817-1.876-9.345-5.282-12.751C53.536 28.033 49.007 26.158 44.19 26.158z" fill="#9ccbfb"></path><path d="M78.712 72.492L67.593 61.373l-3.475-3.475c1.621-2.352 2.779-4.926 3.475-7.596c1.044-4.008 1.044-8.23 0-12.238 c-1.048-4.022-3.146-7.827-6.297-10.979C56.572 22.362 50.381 20 44.19 20C38 20 31.809 22.362 27.085 27.085 c-9.447 9.447-9.447 24.763 0 34.21C31.809 66.019 38 68.381 44.19 68.381c4.798 0 9.593-1.425 13.708-4.262l9.695 9.695 l4.899 4.899C73.351 79.571 74.476 80 75.602 80s2.251-0.429 3.11-1.288C80.429 76.994 80.429 74.209 78.712 72.492z M56.942 56.942 c-3.406 3.406-7.934 5.282-12.751 5.282s-9.345-1.876-12.751-5.282c-3.406-3.406-5.282-7.934-5.282-12.751 c0-4.817 1.876-9.345 5.282-12.751c3.406-3.406 7.934-5.282 12.751-5.282c4.817 0 9.345 1.876 12.751 5.282 c3.406 3.406 5.282 7.934 5.282 12.751C62.223 49.007 60.347 53.536 56.942 56.942z" fill="#0c13e9"></path></g></g></g></g><g></g></g></svg>`);
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* Returns a customized SVG string for icon loading-gears
|
|
80
|
+
*
|
|
81
|
+
* 
|
|
82
|
+
* @param {Object} options - Configuration options
|
|
83
|
+
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
84
|
+
* @param {number} [options.width] - Width of the SVG (default: 200)
|
|
85
|
+
* @param {number} [options.height] - Height of the SVG (default: 200)
|
|
86
|
+
* @param {number} [options.size] - Size for both width and height
|
|
87
|
+
* @example loadingGears({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
88
|
+
* @returns {string} SVG string with applied customizations
|
|
89
|
+
*/
|
|
90
|
+
export const loadingGears = (options: LoadingOptions = {}) => customSVG(options,
|
|
91
|
+
`<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><g transform="translate(50 50)"><g><animateTransform repeatCount="indefinite" dur="0.2s" keyTimes="0;1" values="0;45" type="rotate" attributeName="transform"></animateTransform><path fill="#fd5c63" d="M29.491524206117255 -5.5 L37.491524206117255 -5.5 L37.491524206117255 5.5 L29.491524206117255 5.5 A30 30 0 0 1 24.742744050198738 16.964569457146712 L24.742744050198738 16.964569457146712 L30.399598299691117 22.621423706639092 L22.621423706639096 30.399598299691114 L16.964569457146716 24.742744050198734 A30 30 0 0 1 5.5 29.491524206117255 L5.5 29.491524206117255 L5.5 37.491524206117255 L-5.499999999999997 37.491524206117255 L-5.499999999999997 29.491524206117255 A30 30 0 0 1 -16.964569457146705 24.742744050198738 L-16.964569457146705 24.742744050198738 L-22.621423706639085 30.399598299691117 L-30.399598299691117 22.621423706639092 L-24.742744050198738 16.964569457146712 A30 30 0 0 1 -29.491524206117255 5.500000000000009 L-29.491524206117255 5.500000000000009 L-37.491524206117255 5.50000000000001 L-37.491524206117255 -5.500000000000001 L-29.491524206117255 -5.500000000000002 A30 30 0 0 1 -24.742744050198738 -16.964569457146705 L-24.742744050198738 -16.964569457146705 L-30.399598299691117 -22.621423706639085 L-22.621423706639092 -30.399598299691117 L-16.964569457146712 -24.742744050198738 A30 30 0 0 1 -5.500000000000011 -29.491524206117255 L-5.500000000000011 -29.491524206117255 L-5.500000000000012 -37.491524206117255 L5.499999999999998 -37.491524206117255 L5.5 -29.491524206117255 A30 30 0 0 1 16.964569457146702 -24.74274405019874 L16.964569457146702 -24.74274405019874 L22.62142370663908 -30.39959829969112 L30.399598299691117 -22.6214237066391 L24.742744050198738 -16.964569457146716 A30 30 0 0 1 29.491524206117255 -5.500000000000013 M0 -20A20 20 0 1 0 0 20 A20 20 0 1 0 0 -20"></path></g></g><g></g></g></svg>`);
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* Returns a customized SVG string for icon loading-infinity
|
|
95
|
+
*
|
|
96
|
+
* 
|
|
97
|
+
* @param {Object} options - Configuration options
|
|
98
|
+
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
99
|
+
* @param {number} [options.width] - Width of the SVG (default: 200)
|
|
100
|
+
* @param {number} [options.height] - Height of the SVG (default: 200)
|
|
101
|
+
* @param {number} [options.size] - Size for both width and height
|
|
102
|
+
* @example loadingInfinity({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
103
|
+
* @returns {string} SVG string with applied customizations
|
|
104
|
+
*/
|
|
105
|
+
export const loadingInfinity = (options: LoadingOptions = {}) => customSVG(options,
|
|
106
|
+
`<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 style="transform:scale(0.8);transform-origin:50px 50px" stroke-linecap="round" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke-dasharray="42.76482137044271 42.76482137044271" stroke-width="8" stroke="#0099e5" fill="none"><animate values="0;256.58892822265625" keyTimes="0;1" dur="1.7543859649122806s" repeatCount="indefinite" attributeName="stroke-dashoffset"></animate></path><g></g></g></svg>`);
|
|
107
|
+
|
|
108
|
+
/**
|
|
109
|
+
* Returns a customized SVG string for icon loading-orbital
|
|
110
|
+
*
|
|
111
|
+
* 
|
|
112
|
+
* @param {Object} options - Configuration options
|
|
113
|
+
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
114
|
+
* @param {number} [options.width] - Width of the SVG (default: 200)
|
|
115
|
+
* @param {number} [options.height] - Height of the SVG (default: 200)
|
|
116
|
+
* @param {number} [options.size] - Size for both width and height
|
|
117
|
+
* @example loadingOrbital({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
118
|
+
* @returns {string} SVG string with applied customizations
|
|
119
|
+
*/
|
|
120
|
+
export const loadingOrbital = (options: LoadingOptions = {}) => customSVG(options,
|
|
121
|
+
`<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><g transform="translate(50,50)"><g transform="scale(0.7)"><circle fill="#e90c59" r="50" cy="0" cx="0"></circle><circle fill="#46dff0" r="15" cy="-28" cx="0"><animateTransform values="0 0 0;360 0 0" keyTimes="0;1" repeatCount="indefinite" dur="1s" type="rotate" attributeName="transform"></animateTransform></circle></g></g><g></g></g></svg>`);
|
|
122
|
+
|
|
123
|
+
/**
|
|
124
|
+
* Returns a customized SVG string for icon loading-pacman
|
|
125
|
+
*
|
|
126
|
+
* 
|
|
127
|
+
* @param {Object} options - Configuration options
|
|
128
|
+
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
129
|
+
* @param {number} [options.width] - Width of the SVG (default: 200)
|
|
130
|
+
* @param {number} [options.height] - Height of the SVG (default: 200)
|
|
131
|
+
* @param {number} [options.size] - Size for both width and height
|
|
132
|
+
* @example loadingPacman({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
133
|
+
* @returns {string} SVG string with applied customizations
|
|
134
|
+
*/
|
|
135
|
+
export const loadingPacman = (options: LoadingOptions = {}) => customSVG(options,
|
|
136
|
+
`<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><g><circle fill="#e15b64" r="4" cy="50" cx="60"><animate begin="-0.67s" keyTimes="0;1" values="95;35" dur="1s" repeatCount="indefinite" attributeName="cx"></animate><animate begin="-0.67s" keyTimes="0;0.2;1" values="0;1;1" dur="1s" repeatCount="indefinite" attributeName="fill-opacity"></animate></circle><circle fill="#e15b64" r="4" cy="50" cx="60"><animate begin="-0.33s" keyTimes="0;1" values="95;35" dur="1s" repeatCount="indefinite" attributeName="cx"></animate><animate begin="-0.33s" keyTimes="0;0.2;1" values="0;1;1" dur="1s" repeatCount="indefinite" attributeName="fill-opacity"></animate></circle><circle fill="#e15b64" r="4" cy="50" cx="60"><animate begin="0s" keyTimes="0;1" values="95;35" dur="1s" repeatCount="indefinite" attributeName="cx"></animate><animate begin="0s" keyTimes="0;0.2;1" values="0;1;1" dur="1s" repeatCount="indefinite" attributeName="fill-opacity"></animate></circle></g><g transform="translate(-15 0)"><path transform="rotate(90 50 50)" fill="#f8b26a" d="M50 50L20 50A30 30 0 0 0 80 50Z"></path><path fill="#f8b26a" d="M50 50L20 50A30 30 0 0 0 80 50Z"><animateTransform keyTimes="0;0.5;1" values="0 50 50;45 50 50;0 50 50" dur="1s" repeatCount="indefinite" type="rotate" attributeName="transform"></animateTransform></path><path fill="#f8b26a" d="M50 50L20 50A30 30 0 0 1 80 50Z"><animateTransform keyTimes="0;0.5;1" values="0 50 50;-45 50 50;0 50 50" dur="1s" repeatCount="indefinite" type="rotate" attributeName="transform"></animateTransform></path></g><g></g></g></svg>`);
|
|
137
|
+
|
|
138
|
+
/**
|
|
139
|
+
* Returns a customized SVG string for icon loading-pulse-bars
|
|
140
|
+
*
|
|
141
|
+
* 
|
|
142
|
+
* @param {Object} options - Configuration options
|
|
143
|
+
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
144
|
+
* @param {number} [options.width] - Width of the SVG (default: 200)
|
|
145
|
+
* @param {number} [options.height] - Height of the SVG (default: 200)
|
|
146
|
+
* @param {number} [options.size] - Size for both width and height
|
|
147
|
+
* @example loadingPulseBars({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
148
|
+
* @returns {string} SVG string with applied customizations
|
|
149
|
+
*/
|
|
150
|
+
export const loadingPulseBars = (options: LoadingOptions = {}) => customSVG(options,
|
|
151
|
+
`<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><rect fill="#e15b64" height="40" width="15" y="30" x="17.5"><animate begin="-0.2s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" values="18;30;30" keyTimes="0;0.5;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="y"></animate><animate begin="-0.2s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" values="64;40;40" keyTimes="0;0.5;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="height"></animate></rect><rect fill="#f8b26a" height="40" width="15" y="30" x="42.5"><animate begin="-0.1s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" values="20.999999999999996;30;30" keyTimes="0;0.5;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="y"></animate><animate begin="-0.1s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" values="58.00000000000001;40;40" keyTimes="0;0.5;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="height"></animate></rect><rect fill="#abbd81" height="40" width="15" y="30" x="67.5"><animate keySplines="0 0.5 0.5 1;0 0.5 0.5 1" values="20.999999999999996;30;30" keyTimes="0;0.5;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="y"></animate><animate keySplines="0 0.5 0.5 1;0 0.5 0.5 1" values="58.00000000000001;40;40" keyTimes="0;0.5;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="height"></animate></rect><g></g></g></svg>`);
|
|
152
|
+
|
|
153
|
+
/**
|
|
154
|
+
* Returns a customized SVG string for icon loading-red-blue-ball
|
|
155
|
+
*
|
|
156
|
+
* 
|
|
157
|
+
* @param {Object} options - Configuration options
|
|
158
|
+
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
159
|
+
* @param {number} [options.width] - Width of the SVG (default: 200)
|
|
160
|
+
* @param {number} [options.height] - Height of the SVG (default: 200)
|
|
161
|
+
* @param {number} [options.size] - Size for both width and height
|
|
162
|
+
* @example loadingRedBlueBall({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
163
|
+
* @returns {string} SVG string with applied customizations
|
|
164
|
+
*/
|
|
165
|
+
export const loadingRedBlueBall = (options: LoadingOptions = {}) => customSVG(options,
|
|
166
|
+
`<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 r="20" fill="#e90c59" cy="50" cx="30"><animate begin="-0.5s" values="30;70;30" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite" attributeName="cx"></animate></circle><circle r="20" fill="#0f3bc6" cy="50" cx="70"><animate begin="0s" values="30;70;30" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite" attributeName="cx"></animate></circle><circle r="20" fill="#e90c59" cy="50" cx="30"><animate begin="-0.5s" values="30;70;30" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite" attributeName="cx"></animate><animate repeatCount="indefinite" dur="1s" keyTimes="0;0.499;0.5;1" calcMode="discrete" values="0;0;1;1" attributeName="fill-opacity"></animate></circle><g></g></g></svg>`);
|
|
167
|
+
|
|
168
|
+
/**
|
|
169
|
+
* Returns a customized SVG string for icon loading-reload-arrow
|
|
170
|
+
*
|
|
171
|
+
* 
|
|
172
|
+
* @param {Object} options - Configuration options
|
|
173
|
+
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
174
|
+
* @param {number} [options.width] - Width of the SVG (default: 200)
|
|
175
|
+
* @param {number} [options.height] - Height of the SVG (default: 200)
|
|
176
|
+
* @param {number} [options.size] - Size for both width and height
|
|
177
|
+
* @example loadingReloadArrow({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
178
|
+
* @returns {string} SVG string with applied customizations
|
|
179
|
+
*/
|
|
180
|
+
export const loadingReloadArrow = (options: LoadingOptions = {}) => customSVG(options,
|
|
181
|
+
`<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><g><path stroke-width="12" stroke="#e1945b" fill="none" d="M50 15A35 35 0 1 0 74.74873734152916 25.251262658470843"></path><path fill="#e1945b" d="M49 3L49 27L61 15L49 3"></path><animateTransform keyTimes="0;1" values="0 50 50;360 50 50" dur="1s" repeatCount="indefinite" type="rotate" attributeName="transform"></animateTransform></g><g></g></g></svg>`);
|
|
182
|
+
|
|
183
|
+
/**
|
|
184
|
+
* Returns a customized SVG string for icon loading-ring
|
|
185
|
+
*
|
|
186
|
+
* 
|
|
187
|
+
* @param {Object} options - Configuration options
|
|
188
|
+
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
189
|
+
* @param {number} [options.width] - Width of the SVG (default: 200)
|
|
190
|
+
* @param {number} [options.height] - Height of the SVG (default: 200)
|
|
191
|
+
* @param {number} [options.size] - Size for both width and height
|
|
192
|
+
* @example loadingRing({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
193
|
+
* @returns {string} SVG string with applied customizations
|
|
194
|
+
*/
|
|
195
|
+
export const loadingRing = (options: LoadingOptions = {}) => customSVG(options,
|
|
196
|
+
`<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="#fe718d" stroke-width="8" r="32" cy="50" cx="50"><animateTransform values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" repeatCount="indefinite" type="rotate" attributeName="transform"></animateTransform></circle><g></g></g></svg>`);
|
|
197
|
+
|
|
198
|
+
/**
|
|
199
|
+
* Returns a customized SVG string for icon loading-ripple
|
|
200
|
+
*
|
|
201
|
+
* 
|
|
202
|
+
* @param {Object} options - Configuration options
|
|
203
|
+
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
204
|
+
* @param {number} [options.width] - Width of the SVG (default: 200)
|
|
205
|
+
* @param {number} [options.height] - Height of the SVG (default: 200)
|
|
206
|
+
* @param {number} [options.size] - Size for both width and height
|
|
207
|
+
* @example loadingRipple({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
208
|
+
* @returns {string} SVG string with applied customizations
|
|
209
|
+
*/
|
|
210
|
+
export const loadingRipple = (options: LoadingOptions = {}) => customSVG(options,
|
|
211
|
+
`<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-width="2" stroke="#cbb953" fill="none" r="0" cy="50" cx="50"><animate begin="0s" calcMode="spline" keySplines="0 0.2 0.8 1" keyTimes="0;1" values="0;40" dur="1s" repeatCount="indefinite" attributeName="r"></animate><animate begin="0s" calcMode="spline" keySplines="0.2 0 0.8 1" keyTimes="0;1" values="1;0" dur="1s" repeatCount="indefinite" attributeName="opacity"></animate></circle><circle stroke-width="2" stroke="#cbb953" fill="none" r="0" cy="50" cx="50"><animate begin="-0.5s" calcMode="spline" keySplines="0 0.2 0.8 1" keyTimes="0;1" values="0;40" dur="1s" repeatCount="indefinite" attributeName="r"></animate><animate begin="-0.5s" calcMode="spline" keySplines="0.2 0 0.8 1" keyTimes="0;1" values="1;0" dur="1s" repeatCount="indefinite" attributeName="opacity"></animate></circle><g></g></g></svg>`);
|
|
212
|
+
|
|
213
|
+
/**
|
|
214
|
+
* Returns a customized SVG string for icon loading-spinner-oval
|
|
215
|
+
*
|
|
216
|
+
* 
|
|
217
|
+
* @param {Object} options - Configuration options
|
|
218
|
+
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
219
|
+
* @param {number} [options.width] - Width of the SVG (default: 200)
|
|
220
|
+
* @param {number} [options.height] - Height of the SVG (default: 200)
|
|
221
|
+
* @param {number} [options.size] - Size for both width and height
|
|
222
|
+
* @example loadingSpinnerOval({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
223
|
+
* @returns {string} SVG string with applied customizations
|
|
224
|
+
*/
|
|
225
|
+
export const loadingSpinnerOval = (options: LoadingOptions = {}) => customSVG(options,
|
|
226
|
+
`<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><g transform="rotate(0 50 50)"><rect fill="#0099e5" height="12" width="6" ry="6" rx="3" y="24" x="47"><animate repeatCount="indefinite" begin="-0.9166666666666666s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate></rect></g><g transform="rotate(30 50 50)"><rect fill="#0099e5" height="12" width="6" ry="6" rx="3" y="24" x="47"><animate repeatCount="indefinite" begin="-0.8333333333333334s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate></rect></g><g transform="rotate(60 50 50)"><rect fill="#0099e5" height="12" width="6" ry="6" rx="3" y="24" x="47"><animate repeatCount="indefinite" begin="-0.75s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate></rect></g><g transform="rotate(90 50 50)"><rect fill="#0099e5" height="12" width="6" ry="6" rx="3" y="24" x="47"><animate repeatCount="indefinite" begin="-0.6666666666666666s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate></rect></g><g transform="rotate(120 50 50)"><rect fill="#0099e5" height="12" width="6" ry="6" rx="3" y="24" x="47"><animate repeatCount="indefinite" begin="-0.5833333333333334s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate></rect></g><g transform="rotate(150 50 50)"><rect fill="#0099e5" height="12" width="6" ry="6" rx="3" y="24" x="47"><animate repeatCount="indefinite" begin="-0.5s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate></rect></g><g transform="rotate(180 50 50)"><rect fill="#0099e5" height="12" width="6" ry="6" rx="3" y="24" x="47"><animate repeatCount="indefinite" begin="-0.4166666666666667s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate></rect></g><g transform="rotate(210 50 50)"><rect fill="#0099e5" height="12" width="6" ry="6" rx="3" y="24" x="47"><animate repeatCount="indefinite" begin="-0.3333333333333333s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate></rect></g><g transform="rotate(240 50 50)"><rect fill="#0099e5" height="12" width="6" ry="6" rx="3" y="24" x="47"><animate repeatCount="indefinite" begin="-0.25s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate></rect></g><g transform="rotate(270 50 50)"><rect fill="#0099e5" height="12" width="6" ry="6" rx="3" y="24" x="47"><animate repeatCount="indefinite" begin="-0.16666666666666666s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate></rect></g><g transform="rotate(300 50 50)"><rect fill="#0099e5" height="12" width="6" ry="6" rx="3" y="24" x="47"><animate repeatCount="indefinite" begin="-0.08333333333333333s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate></rect></g><g transform="rotate(330 50 50)"><rect fill="#0099e5" height="12" width="6" ry="6" rx="3" y="24" x="47"><animate repeatCount="indefinite" begin="0s" dur="1s" keyTimes="0;1" values="1;0" attributeName="opacity"></animate></rect></g><g></g></g></svg>`);
|
|
227
|
+
|
|
228
|
+
/**
|
|
229
|
+
* Returns a customized SVG string for icon loading-spinner
|
|
230
|
+
*
|
|
231
|
+
* 
|
|
232
|
+
* @param {Object} options - Configuration options
|
|
233
|
+
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
234
|
+
* @param {number} [options.width] - Width of the SVG (default: 200)
|
|
235
|
+
* @param {number} [options.height] - Height of the SVG (default: 200)
|
|
236
|
+
* @param {number} [options.size] - Size for both width and height
|
|
237
|
+
* @example loadingSpinner({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
238
|
+
* @returns {string} SVG string with applied customizations
|
|
239
|
+
*/
|
|
240
|
+
export const loadingSpinner = (options: LoadingOptions = {}) => customSVG(options,
|
|
241
|
+
`<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><g transform="translate(80,50)"><g transform="rotate(0)"><circle fill-opacity="1" fill="#0099e5" r="6" cy="0" cx="0"><animateTransform repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.875s" type="scale" attributeName="transform"></animateTransform><animate begin="-0.875s" values="1;0" repeatCount="indefinite" dur="1s" keyTimes="0;1" attributeName="fill-opacity"></animate></circle></g></g><g transform="translate(71.21320343559643,71.21320343559643)"><g transform="rotate(45)"><circle fill-opacity="0.875" fill="#0099e5" r="6" cy="0" cx="0"><animateTransform repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.75s" type="scale" attributeName="transform"></animateTransform><animate begin="-0.75s" values="1;0" repeatCount="indefinite" dur="1s" keyTimes="0;1" attributeName="fill-opacity"></animate></circle></g></g><g transform="translate(50,80)"><g transform="rotate(90)"><circle fill-opacity="0.75" fill="#0099e5" r="6" cy="0" cx="0"><animateTransform repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.625s" type="scale" attributeName="transform"></animateTransform><animate begin="-0.625s" values="1;0" repeatCount="indefinite" dur="1s" keyTimes="0;1" attributeName="fill-opacity"></animate></circle></g></g><g transform="translate(28.786796564403577,71.21320343559643)"><g transform="rotate(135)"><circle fill-opacity="0.625" fill="#0099e5" r="6" cy="0" cx="0"><animateTransform repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.5s" type="scale" attributeName="transform"></animateTransform><animate begin="-0.5s" values="1;0" repeatCount="indefinite" dur="1s" keyTimes="0;1" attributeName="fill-opacity"></animate></circle></g></g><g transform="translate(20,50.00000000000001)"><g transform="rotate(180)"><circle fill-opacity="0.5" fill="#0099e5" r="6" cy="0" cx="0"><animateTransform repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.375s" type="scale" attributeName="transform"></animateTransform><animate begin="-0.375s" values="1;0" repeatCount="indefinite" dur="1s" keyTimes="0;1" attributeName="fill-opacity"></animate></circle></g></g><g transform="translate(28.78679656440357,28.786796564403577)"><g transform="rotate(225)"><circle fill-opacity="0.375" fill="#0099e5" r="6" cy="0" cx="0"><animateTransform repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.25s" type="scale" attributeName="transform"></animateTransform><animate begin="-0.25s" values="1;0" repeatCount="indefinite" dur="1s" keyTimes="0;1" attributeName="fill-opacity"></animate></circle></g></g><g transform="translate(49.99999999999999,20)"><g transform="rotate(270)"><circle fill-opacity="0.25" fill="#0099e5" r="6" cy="0" cx="0"><animateTransform repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.125s" type="scale" attributeName="transform"></animateTransform><animate begin="-0.125s" values="1;0" repeatCount="indefinite" dur="1s" keyTimes="0;1" attributeName="fill-opacity"></animate></circle></g></g><g transform="translate(71.21320343559643,28.78679656440357)"><g transform="rotate(315)"><circle fill-opacity="0.125" fill="#0099e5" r="6" cy="0" cx="0"><animateTransform repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.5 1.5;1 1" begin="0s" type="scale" attributeName="transform"></animateTransform><animate begin="0s" values="1;0" repeatCount="indefinite" dur="1s" keyTimes="0;1" attributeName="fill-opacity"></animate></circle></g></g><g></g></g></svg>`);
|
|
242
|
+
|
|
243
|
+
/**
|
|
244
|
+
* Returns a customized SVG string for icon loading-square-blocks
|
|
245
|
+
*
|
|
246
|
+
* 
|
|
247
|
+
* @param {Object} options - Configuration options
|
|
248
|
+
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
249
|
+
* @param {number} [options.width] - Width of the SVG (default: 200)
|
|
250
|
+
* @param {number} [options.height] - Height of the SVG (default: 200)
|
|
251
|
+
* @param {number} [options.size] - Size for both width and height
|
|
252
|
+
* @example loadingSquareBlocks({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
|
|
253
|
+
* @returns {string} SVG string with applied customizations
|
|
254
|
+
*/
|
|
255
|
+
export const loadingSquareBlocks = (options: LoadingOptions = {}) => customSVG(options,
|
|
256
|
+
`<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><rect fill="#e15b64" height="20" width="20" y="19" x="19"><animate calcMode="discrete" begin="0s" repeatCount="indefinite" dur="1s" keyTimes="0;0.125;1" values="#f8b26a;#e15b64;#e15b64" attributeName="fill"></animate></rect><rect fill="#e15b64" height="20" width="20" y="19" x="40"><animate calcMode="discrete" begin="0.125s" repeatCount="indefinite" dur="1s" keyTimes="0;0.125;1" values="#f8b26a;#e15b64;#e15b64" attributeName="fill"></animate></rect><rect fill="#e15b64" height="20" width="20" y="19" x="61"><animate calcMode="discrete" begin="0.25s" repeatCount="indefinite" dur="1s" keyTimes="0;0.125;1" values="#f8b26a;#e15b64;#e15b64" attributeName="fill"></animate></rect><rect fill="#e15b64" height="20" width="20" y="40" x="19"><animate calcMode="discrete" begin="0.875s" repeatCount="indefinite" dur="1s" keyTimes="0;0.125;1" values="#f8b26a;#e15b64;#e15b64" attributeName="fill"></animate></rect><rect fill="#e15b64" height="20" width="20" y="40" x="61"><animate calcMode="discrete" begin="0.375s" repeatCount="indefinite" dur="1s" keyTimes="0;0.125;1" values="#f8b26a;#e15b64;#e15b64" attributeName="fill"></animate></rect><rect fill="#e15b64" height="20" width="20" y="61" x="19"><animate calcMode="discrete" begin="0.75s" repeatCount="indefinite" dur="1s" keyTimes="0;0.125;1" values="#f8b26a;#e15b64;#e15b64" attributeName="fill"></animate></rect><rect fill="#e15b64" height="20" width="20" y="61" x="40"><animate calcMode="discrete" begin="0.625s" repeatCount="indefinite" dur="1s" keyTimes="0;0.125;1" values="#f8b26a;#e15b64;#e15b64" attributeName="fill"></animate></rect><rect fill="#e15b64" height="20" width="20" y="61" x="61"><animate calcMode="discrete" begin="0.5s" repeatCount="indefinite" dur="1s" keyTimes="0;0.125;1" values="#f8b26a;#e15b64;#e15b64" attributeName="fill"></animate></rect><g></g></g></svg>`);
|
|
257
|
+
|
|
258
|
+
/**
|
|
259
|
+
* Shared utility function for processing SVG icons
|
|
260
|
+
* @param {Object} options - Configuration options
|
|
261
|
+
* @param {boolean} [options.raw] - Whether to return the raw SVG string or an img tag
|
|
262
|
+
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
|
|
263
|
+
* @param {number|string} [options.width] - Width of the SVG
|
|
264
|
+
* @param {number|string} [options.height] - Height of the SVG
|
|
265
|
+
* @param {number|string} [options.size] - Size for both width and height (overrides width/height)
|
|
266
|
+
* @param {string} svgString - The original SVG content
|
|
267
|
+
* @returns {string} SVG string with applied customizations
|
|
268
|
+
*/
|
|
269
|
+
function customSVG( options: LoadingOptions, svgString: string) {
|
|
270
|
+
const { colors = [], width, height, size, raw = false } = options;
|
|
271
|
+
|
|
272
|
+
const widthMatch = svgString.match(/width="[^"]*"/);
|
|
273
|
+
const heightMatch = svgString.match(/height="[^"]*"/);
|
|
274
|
+
const finalWidth = size || width || widthMatch?.[1] || '100';
|
|
275
|
+
const finalHeight = size || height || heightMatch?.[1] || '100';
|
|
276
|
+
|
|
277
|
+
if (width || height || size) {
|
|
278
|
+
svgString = svgString.replace(/width="[^"]*"/, `width="${finalWidth}px"`);
|
|
279
|
+
svgString = svgString.replace(/height="[^"]*"/, `height="${finalHeight}px"`);
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
|
|
283
|
+
// If colors array is provided, replace hex colors in order of appearance
|
|
284
|
+
if (colors && colors.length > 0) {
|
|
285
|
+
const hexColorRegex = /#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}/g;
|
|
286
|
+
let colorIndex = 0;
|
|
287
|
+
|
|
288
|
+
svgString = svgString.replace(hexColorRegex, (match) => {
|
|
289
|
+
if (colorIndex < colors.length) {
|
|
290
|
+
const replacement = colors[colorIndex];
|
|
291
|
+
colorIndex++;
|
|
292
|
+
return replacement?.startsWith('#') ? replacement : `#${replacement}`;
|
|
293
|
+
}
|
|
294
|
+
return match; // Keep original color if no replacement available
|
|
295
|
+
});
|
|
296
|
+
}
|
|
297
|
+
if (!raw)
|
|
298
|
+
svgString = (width || height || size ? `<img width="${finalWidth}" height="${finalHeight}"` : '<img') + ` alt="icon" src="data:image/svg+xml;utf8,${encodeURIComponent(svgString)}" />`
|
|
299
|
+
|
|
300
|
+
return svgString;
|
|
301
|
+
}
|
|
302
|
+
interface LoadingOptions {
|
|
303
|
+
/** Array of hex colors to replace existing colors, in order of appearance in SVG*/
|
|
304
|
+
colors?: string[];
|
|
305
|
+
/** Width of the SVG */
|
|
306
|
+
width?: number;
|
|
307
|
+
/** Height of the SVG */
|
|
308
|
+
height?: number;
|
|
309
|
+
/** Size for both width and height (overrides width/height) */
|
|
310
|
+
size?: number;
|
|
311
|
+
/** Whether to return the raw SVG string or an img tag */
|
|
312
|
+
raw?: boolean;
|
|
313
|
+
}
|