grab-url
Version:
📥 Generate Request to API from Browser
314 lines • 71.6 kB
text/typescript
// Do a Barrel Roll (auto-generated) index of SVG icons as JS exports, tree shaking to only the icons used.
/**
* Returns a customized SVG string for icon loading-bouncy-ball
*
* 
* @param {Object} options - Configuration options
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
* @param {number} [options.width] - Width of the SVG (default: 200)
* @param {number} [options.height] - Height of the SVG (default: 200)
* @param {number} [options.size] - Size for both width and height
* @example loadingBouncyBall({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
* @returns {string} SVG string with applied customizations
*/
export const loadingBouncyBall = (options: LoadingOptions = {}) => customSVG(options,
`<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>`);
/**
* Returns a customized SVG string for icon loading-double-ring
*
* 
* @param {Object} options - Configuration options
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
* @param {number} [options.width] - Width of the SVG (default: 200)
* @param {number} [options.height] - Height of the SVG (default: 200)
* @param {number} [options.size] - Size for both width and height
* @example loadingDoubleRing({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
* @returns {string} SVG string with applied customizations
*/
export const loadingDoubleRing = (options: LoadingOptions = {}) => customSVG(options,
`<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>`);
/**
* Returns a customized SVG string for icon loading-eclipse
*
* 
* @param {Object} options - Configuration options
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
* @param {number} [options.width] - Width of the SVG (default: 200)
* @param {number} [options.height] - Height of the SVG (default: 200)
* @param {number} [options.size] - Size for both width and height
* @example loadingEclipse({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
* @returns {string} SVG string with applied customizations
*/
export const loadingEclipse = (options: LoadingOptions = {}) => customSVG(options,
`<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>`);
/**
* Returns a customized SVG string for icon loading-ellipsis
*
* 
* @param {Object} options - Configuration options
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
* @param {number} [options.width] - Width of the SVG (default: 200)
* @param {number} [options.height] - Height of the SVG (default: 200)
* @param {number} [options.size] - Size for both width and height
* @example loadingEllipsis({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
* @returns {string} SVG string with applied customizations
*/
export const loadingEllipsis = (options: LoadingOptions = {}) => customSVG(options,
`<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>`);
/**
* Returns a customized SVG string for icon loading-floating-search
*
* 
* @param {Object} options - Configuration options
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
* @param {number} [options.width] - Width of the SVG (default: 339)
* @param {number} [options.height] - Height of the SVG (default: 339)
* @param {number} [options.size] - Size for both width and height
* @example loadingFloatingSearch({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
* @returns {string} SVG string with applied customizations
*/
export const loadingFloatingSearch = (options: LoadingOptions = {}) => customSVG(options,
`<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>`);
/**
* Returns a customized SVG string for icon loading-gears
*
* 
* @param {Object} options - Configuration options
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
* @param {number} [options.width] - Width of the SVG (default: 200)
* @param {number} [options.height] - Height of the SVG (default: 200)
* @param {number} [options.size] - Size for both width and height
* @example loadingGears({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
* @returns {string} SVG string with applied customizations
*/
export const loadingGears = (options: LoadingOptions = {}) => customSVG(options,
`<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>`);
/**
* Returns a customized SVG string for icon loading-infinity
*
* 
* @param {Object} options - Configuration options
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
* @param {number} [options.width] - Width of the SVG (default: 200)
* @param {number} [options.height] - Height of the SVG (default: 200)
* @param {number} [options.size] - Size for both width and height
* @example loadingInfinity({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
* @returns {string} SVG string with applied customizations
*/
export const loadingInfinity = (options: LoadingOptions = {}) => customSVG(options,
`<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>`);
/**
* Returns a customized SVG string for icon loading-orbital
*
* 
* @param {Object} options - Configuration options
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
* @param {number} [options.width] - Width of the SVG (default: 200)
* @param {number} [options.height] - Height of the SVG (default: 200)
* @param {number} [options.size] - Size for both width and height
* @example loadingOrbital({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
* @returns {string} SVG string with applied customizations
*/
export const loadingOrbital = (options: LoadingOptions = {}) => customSVG(options,
`<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>`);
/**
* Returns a customized SVG string for icon loading-pacman
*
* 
* @param {Object} options - Configuration options
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
* @param {number} [options.width] - Width of the SVG (default: 200)
* @param {number} [options.height] - Height of the SVG (default: 200)
* @param {number} [options.size] - Size for both width and height
* @example loadingPacman({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
* @returns {string} SVG string with applied customizations
*/
export const loadingPacman = (options: LoadingOptions = {}) => customSVG(options,
`<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>`);
/**
* Returns a customized SVG string for icon loading-pulse-bars
*
* 
* @param {Object} options - Configuration options
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
* @param {number} [options.width] - Width of the SVG (default: 200)
* @param {number} [options.height] - Height of the SVG (default: 200)
* @param {number} [options.size] - Size for both width and height
* @example loadingPulseBars({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
* @returns {string} SVG string with applied customizations
*/
export const loadingPulseBars = (options: LoadingOptions = {}) => customSVG(options,
`<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>`);
/**
* Returns a customized SVG string for icon loading-red-blue-ball
*
* 
* @param {Object} options - Configuration options
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
* @param {number} [options.width] - Width of the SVG (default: 200)
* @param {number} [options.height] - Height of the SVG (default: 200)
* @param {number} [options.size] - Size for both width and height
* @example loadingRedBlueBall({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
* @returns {string} SVG string with applied customizations
*/
export const loadingRedBlueBall = (options: LoadingOptions = {}) => customSVG(options,
`<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>`);
/**
* Returns a customized SVG string for icon loading-reload-arrow
*
* 
* @param {Object} options - Configuration options
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
* @param {number} [options.width] - Width of the SVG (default: 200)
* @param {number} [options.height] - Height of the SVG (default: 200)
* @param {number} [options.size] - Size for both width and height
* @example loadingReloadArrow({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
* @returns {string} SVG string with applied customizations
*/
export const loadingReloadArrow = (options: LoadingOptions = {}) => customSVG(options,
`<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>`);
/**
* Returns a customized SVG string for icon loading-ring
*
* 
* @param {Object} options - Configuration options
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
* @param {number} [options.width] - Width of the SVG (default: 200)
* @param {number} [options.height] - Height of the SVG (default: 200)
* @param {number} [options.size] - Size for both width and height
* @example loadingRing({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
* @returns {string} SVG string with applied customizations
*/
export const loadingRing = (options: LoadingOptions = {}) => customSVG(options,
`<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>`);
/**
* Returns a customized SVG string for icon loading-ripple
*
* 
* @param {Object} options - Configuration options
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
* @param {number} [options.width] - Width of the SVG (default: 200)
* @param {number} [options.height] - Height of the SVG (default: 200)
* @param {number} [options.size] - Size for both width and height
* @example loadingRipple({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
* @returns {string} SVG string with applied customizations
*/
export const loadingRipple = (options: LoadingOptions = {}) => customSVG(options,
`<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>`);
/**
* Returns a customized SVG string for icon loading-spinner-oval
*
* 
* @param {Object} options - Configuration options
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
* @param {number} [options.width] - Width of the SVG (default: 200)
* @param {number} [options.height] - Height of the SVG (default: 200)
* @param {number} [options.size] - Size for both width and height
* @example loadingSpinnerOval({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
* @returns {string} SVG string with applied customizations
*/
export const loadingSpinnerOval = (options: LoadingOptions = {}) => customSVG(options,
`<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>`);
/**
* Returns a customized SVG string for icon loading-spinner
*
* 
* @param {Object} options - Configuration options
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
* @param {number} [options.width] - Width of the SVG (default: 200)
* @param {number} [options.height] - Height of the SVG (default: 200)
* @param {number} [options.size] - Size for both width and height
* @example loadingSpinner({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
* @returns {string} SVG string with applied customizations
*/
export const loadingSpinner = (options: LoadingOptions = {}) => customSVG(options,
`<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>`);
/**
* Returns a customized SVG string for icon loading-square-blocks
*
* 
* @param {Object} options - Configuration options
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
* @param {number} [options.width] - Width of the SVG (default: 200)
* @param {number} [options.height] - Height of the SVG (default: 200)
* @param {number} [options.size] - Size for both width and height
* @example loadingSquareBlocks({ colors: ['#0099e5', '#ff4c4c'], size: 100 });
* @returns {string} SVG string with applied customizations
*/
export const loadingSquareBlocks = (options: LoadingOptions = {}) => customSVG(options,
`<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>`);
/**
* Shared utility function for processing SVG icons
* @param {Object} options - Configuration options
* @param {boolean} [options.raw] - Whether to return the raw SVG string or an img tag
* @param {string[]} [options.colors] - Array of hex colors to replace existing colors
* @param {number|string} [options.width] - Width of the SVG
* @param {number|string} [options.height] - Height of the SVG
* @param {number|string} [options.size] - Size for both width and height (overrides width/height)
* @param {string} svgString - The original SVG content
* @returns {string} SVG string with applied customizations
*/
function customSVG( options: LoadingOptions, svgString: string) {
const { colors = [], width, height, size, raw = false } = options;
const widthMatch = svgString.match(/width="[^"]*"/);
const heightMatch = svgString.match(/height="[^"]*"/);
const finalWidth = size || width || widthMatch?.[1] || '100';
const finalHeight = size || height || heightMatch?.[1] || '100';
if (width || height || size) {
svgString = svgString.replace(/width="[^"]*"/, `width="${finalWidth}px"`);
svgString = svgString.replace(/height="[^"]*"/, `height="${finalHeight}px"`);
}
// If colors array is provided, replace hex colors in order of appearance
if (colors && colors.length > 0) {
const hexColorRegex = /#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}/g;
let colorIndex = 0;
svgString = svgString.replace(hexColorRegex, (match) => {
if (colorIndex < colors.length) {
const replacement = colors[colorIndex];
colorIndex++;
return replacement?.startsWith('#') ? replacement : `#${replacement}`;
}
return match; // Keep original color if no replacement available
});
}
if (!raw)
svgString = (width || height || size ? `<img width="${finalWidth}" height="${finalHeight}"` : '<img') + ` alt="icon" src="data:image/svg+xml;utf8,${encodeURIComponent(svgString)}" />`
return svgString;
}
interface LoadingOptions {
/** Array of hex colors to replace existing colors, in order of appearance in SVG*/
colors?: string[];
/** Width of the SVG */
width?: number;
/** Height of the SVG */
height?: number;
/** Size for both width and height (overrides width/height) */
size?: number;
/** Whether to return the raw SVG string or an img tag */
raw?: boolean;
}