grab-url
Version:
📥 Generate Request to API from Browser
216 lines (201 loc) • 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
*
* ![loading-spinner-oval](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHN0eWxlPSJzaGFwZS1yZW5kZXJpbmc6IGF1dG87IGRpc3BsYXk6IGJsb2NrOyAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48Zz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgZmlsbD0iIzAwOTllNSIgaGVpZ2h0PSIxMiIgd2lkdGg9IjYiIHJ5PSI2IiByeD0iMyIgeT0iMjQiIHg9IjQ3Ij4KICAgIDxhbmltYXRlIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBiZWdpbj0iLTAuOTE2NjY2NjY2NjY2NjY2NnMiIGR1cj0iMXMiIGtleVRpbWVzPSIwOzEiIHZhbHVlcz0iMTswIiBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5Ij48L2FuaW1hdGU+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzAgNTAgNTApIj4KICA8cmVjdCBmaWxsPSIjMDA5OWU1IiBoZWlnaHQ9IjEyIiB3aWR0aD0iNiIgcnk9IjYiIHJ4PSIzIiB5PSIyNCIgeD0iNDciPgogICAgPGFuaW1hdGUgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSItMC44MzMzMzMzMzMzMzMzMzM0cyIgZHVyPSIxcyIga2V5VGltZXM9IjA7MSIgdmFsdWVzPSIxOzAiIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg2MCA1MCA1MCkiPgogIDxyZWN0IGZpbGw9IiMwMDk5ZTUiIGhlaWdodD0iMTIiIHdpZHRoPSI2IiByeT0iNiIgcng9IjMiIHk9IjI0IiB4PSI0NyI+CiAgICA8YW5pbWF0ZSByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49Ii0wLjc1cyIgZHVyPSIxcyIga2V5VGltZXM9IjA7MSIgdmFsdWVzPSIxOzAiIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IGZpbGw9IiMwMDk5ZTUiIGhlaWdodD0iMTIiIHdpZHRoPSI2IiByeT0iNiIgcng9IjMiIHk9IjI0IiB4PSI0NyI+CiAgICA8YW5pbWF0ZSByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49Ii0wLjY2NjY2NjY2NjY2NjY2NjZzIiBkdXI9IjFzIiBrZXlUaW1lcz0iMDsxIiB2YWx1ZXM9IjE7MCIgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSI+PC9hbmltYXRlPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDEyMCA1MCA1MCkiPgogIDxyZWN0IGZpbGw9IiMwMDk5ZTUiIGhlaWdodD0iMTIiIHdpZHRoPSI2IiByeT0iNiIgcng9IjMiIHk9IjI0IiB4PSI0NyI+CiAgICA8YW5pbWF0ZSByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49Ii0wLjU4MzMzMzMzMzMzMzMzMzRzIiBkdXI9IjFzIiBrZXlUaW1lcz0iMDsxIiB2YWx1ZXM9IjE7MCIgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSI+PC9hbmltYXRlPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE1MCA1MCA1MCkiPgogIDxyZWN0IGZpbGw9IiMwMDk5ZTUiIGhlaWdodD0iMTIiIHdpZHRoPSI2IiByeT0iNiIgcng9IjMiIHk9IjI0IiB4PSI0NyI+CiAgICA8YW5pbWF0ZSByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49Ii0wLjVzIiBkdXI9IjFzIiBrZXlUaW1lcz0iMDsxIiB2YWx1ZXM9IjE7MCIgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSI+PC9hbmltYXRlPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IGZpbGw9IiMwMDk5ZTUiIGhlaWdodD0iMTIiIHdpZHRoPSI2IiByeT0iNiIgcng9IjMiIHk9IjI0IiB4PSI0NyI+CiAgICA8YW5pbWF0ZSByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49Ii0wLjQxNjY2NjY2NjY2NjY2NjdzIiBkdXI9IjFzIiBrZXlUaW1lcz0iMDsxIiB2YWx1ZXM9IjE7MCIgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSI+PC9hbmltYXRlPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDIxMCA1MCA1MCkiPgogIDxyZWN0IGZpbGw9IiMwMDk5ZTUiIGhlaWdodD0iMTIiIHdpZHRoPSI2IiByeT0iNiIgcng9IjMiIHk9IjI0IiB4PSI0NyI+CiAgICA8YW5pbWF0ZSByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49Ii0wLjMzMzMzMzMzMzMzMzMzMzNzIiBkdXI9IjFzIiBrZXlUaW1lcz0iMDsxIiB2YWx1ZXM9IjE7MCIgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSI+PC9hbmltYXRlPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDI0MCA1MCA1MCkiPgogIDxyZWN0IGZpbGw9IiMwMDk5ZTUiIGhlaWdodD0iMTIiIHdpZHRoPSI2IiByeT0iNiIgcng9IjMiIHk9IjI0IiB4PSI0NyI+CiAgICA8YW5pbWF0ZSByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49Ii0wLjI1cyIgZHVyPSIxcyIga2V5VGltZXM9IjA7MSIgdmFsdWVzPSIxOzAiIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCBmaWxsPSIjMDA5OWU1IiBoZWlnaHQ9IjEyIiB3aWR0aD0iNiIgcnk9IjYiIHJ4PSIzIiB5PSIyNCIgeD0iNDciPgogICAgPGFuaW1hdGUgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSItMC4xNjY2NjY2NjY2NjY2NjY2NnMiIGR1cj0iMXMiIGtleVRpbWVzPSIwOzEiIHZhbHVlcz0iMTswIiBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5Ij48L2FuaW1hdGU+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzAwIDUwIDUwKSI+CiAgPHJlY3QgZmlsbD0iIzAwOTllNSIgaGVpZ2h0PSIxMiIgd2lkdGg9IjYiIHJ5PSI2IiByeD0iMyIgeT0iMjQiIHg9IjQ3Ij4KICAgIDxhbmltYXRlIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBiZWdpbj0iLTAuMDgzMzMzMzMzMzMzMzMzMzNzIiBkdXI9IjFzI