@symbo.ls/scratch 2.10.261 → 2.10.271

package/dist/cjs/utils/sprite.js

@@ -280,14 +280,14 @@ var require_types = __commonJS({
       is: () => is,
       isArray: () => isArray,
       isBoolean: () => isBoolean,
-      isDefined: () => isDefined,
+      isDefined: () => isDefined2,
       isFunction: () => isFunction,
       isHtmlElement: () => isHtmlElement,
       isNode: () => isNode,
       isNot: () => isNot,
       isNull: () => isNull,
       isNumber: () => isNumber,
-      isObject: () => isObject,
+      isObject: () => isObject2,
       isObjectLike: () => isObjectLike,
       isString: () => isString2,
       isUndefined: () => isUndefined,
@@ -297,7 +297,7 @@ var require_types = __commonJS({
     var import_globals = require_cjs();
     var import_tags = require_cjs2();
     var isValidHtmlTag = (arg) => import_tags.HTML_TAGS.body.indexOf(arg);
-    var isObject = (arg) => {
+    var isObject2 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object" && arg.constructor === Object;
@@ -319,8 +319,8 @@ var require_types = __commonJS({
     var isHtmlElement = (obj) => {
       return typeof import_globals.window.HTMLElement === "object" ? obj instanceof import_globals.window.HTMLElement : obj && typeof obj === "object" && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === "string";
     };
-    var isDefined = (arg) => {
-      return isObject(arg) || isObjectLike(arg) || isString2(arg) || isNumber(arg) || isFunction(arg) || isArray(arg) || isObjectLike(arg) || isBoolean(arg) || isNull(arg);
+    var isDefined2 = (arg) => {
+      return isObject2(arg) || isObjectLike(arg) || isString2(arg) || isNumber(arg) || isFunction(arg) || isArray(arg) || isObjectLike(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
@@ -328,7 +328,7 @@ var require_types = __commonJS({
     var TYPES = {
       boolean: isBoolean,
       array: isArray,
-      object: isObject,
+      object: isObject2,
       string: isString2,
       number: isNumber,
       null: isNull,
@@ -336,7 +336,7 @@ var require_types = __commonJS({
       objectLike: isObjectLike,
       node: isNode,
       htmlElement: isHtmlElement,
-      defined: isDefined
+      defined: isDefined2
     };
     var is = (arg) => {
       return (...args) => {
@@ -375,10 +375,10 @@ var require_object = __commonJS({
     var object_exports = {};
     __export2(object_exports, {
       clone: () => clone,
-      deepClone: () => deepClone,
+      deepClone: () => deepClone2,
       deepCloneExclude: () => deepCloneExclude,
       deepDestringify: () => deepDestringify,
-      deepMerge: () => deepMerge,
+      deepMerge: () => deepMerge2,
       deepStringify: () => deepStringify,
       detachFunctionsFromObject: () => detachFunctionsFromObject,
       diff: () => diff,
@@ -423,7 +423,7 @@ var require_object = __commonJS({
       }
       return element;
     };
-    var deepMerge = (element, extend) => {
+    var deepMerge2 = (element, extend) => {
       for (const e in extend) {
         const extendProp = extend[e];
         if (e === "parent" || e === "props")
@@ -431,7 +431,7 @@ var require_object = __commonJS({
         if (element[e] === void 0) {
           element[e] = extendProp;
         } else if ((0, import_types.isObjectLike)(element[e]) && (0, import_types.isObjectLike)(extendProp)) {
-          deepMerge(element[e], extendProp);
+          deepMerge2(element[e], extendProp);
         } else {
           element[e] = extendProp;
         }
@@ -469,11 +469,11 @@ var require_object = __commonJS({
       return o;
     };
     var mergeArrayExclude = (arr, excl = []) => {
-      return arr.reduce((acc, curr) => deepMerge(acc, deepCloneExclude(curr, excl)), {});
+      return arr.reduce((acc, curr) => deepMerge2(acc, deepCloneExclude(curr, excl)), {});
     };
-    var deepClone = (obj) => {
+    var deepClone2 = (obj) => {
       if ((0, import_types.isArray)(obj)) {
-        return obj.map(deepClone);
+        return obj.map(deepClone2);
       }
       const o = {};
       for (const prop in obj) {
@@ -482,9 +482,9 @@ var require_object = __commonJS({
           objProp = mergeArray(objProp);
         }
         if ((0, import_types.isArray)(objProp)) {
-          o[prop] = objProp.map((v) => (0, import_types.isObject)(v) ? deepClone(v) : v);
+          o[prop] = objProp.map((v) => (0, import_types.isObject)(v) ? deepClone2(v) : v);
         } else if ((0, import_types.isObject)(objProp)) {
-          o[prop] = deepClone(objProp);
+          o[prop] = deepClone2(objProp);
         } else
           o[prop] = objProp;
       }
@@ -642,14 +642,14 @@ var require_object = __commonJS({
     };
     var mergeIfExisted = (a, b) => {
       if ((0, import_types.isObjectLike)(a) && (0, import_types.isObjectLike)(b))
-        return deepMerge(a, b);
+        return deepMerge2(a, b);
       return a || b;
     };
     var mergeArray = (arr) => {
-      return arr.reduce((a, c) => deepMerge(a, deepClone(c)), {});
+      return arr.reduce((a, c) => deepMerge2(a, deepClone2(c)), {});
     };
     var mergeAndCloneIfArray = (obj) => {
-      return (0, import_types.isArray)(obj) ? mergeArray(obj) : deepClone(obj);
+      return (0, import_types.isArray)(obj) ? mergeArray(obj) : deepClone2(obj);
     };
     var flattenRecursive = (param, prop, stack = []) => {
       const objectized = mergeAndCloneIfArray(param);
@@ -860,17 +860,241 @@ __export(sprite_exports, {
   generateSprite: () => generateSprite
 });
 module.exports = __toCommonJS(sprite_exports);
+var import_utils2 = __toESM(require_cjs3(), 1);
+
+// src/factory.js
 var import_utils = __toESM(require_cjs3(), 1);
+
+// src/defaultConfig/index.js
+var defaultConfig_exports = {};
+__export(defaultConfig_exports, {
+  ANIMATION: () => ANIMATION,
+  BREAKPOINTS: () => BREAKPOINTS,
+  CASES: () => CASES,
+  COLOR: () => COLOR,
+  DEVICES: () => DEVICES,
+  DOCUMENT: () => DOCUMENT,
+  FONT: () => FONT,
+  FONT_FACE: () => FONT_FACE,
+  FONT_FAMILY: () => FONT_FAMILY,
+  FONT_FAMILY_TYPES: () => FONT_FAMILY_TYPES,
+  GRADIENT: () => GRADIENT,
+  ICONS: () => ICONS,
+  MEDIA: () => MEDIA,
+  RESET: () => RESET,
+  SEQUENCE: () => SEQUENCE,
+  SPACING: () => SPACING,
+  SVG: () => SVG,
+  SVG_DATA: () => SVG_DATA,
+  THEME: () => THEME,
+  TIMING: () => TIMING,
+  TYPOGRAPHY: () => TYPOGRAPHY,
+  UNIT: () => UNIT
+});
+
+// src/defaultConfig/sequence.js
+var SEQUENCE = {
+  "minor-second": 1.067,
+  "major-second": 1.125,
+  "minor-third": 1.2,
+  "major-third": 1.25,
+  "perfect-fourth": 1.333,
+  "augmented-fourth": 1.414,
+  "perfect-fifth": 1.5,
+  "minor-sixth": 1.6,
+  phi: 1.618,
+  // golden-ratio
+  "major-sixth": 1.667,
+  "square-root-3": 1.732,
+  // theodorus
+  "minor-seventh": 1.778,
+  "major-seventh": 1.875,
+  octave: 2,
+  "square-root-5": 2.23,
+  // pythagoras
+  "major-tenth": 2.5,
+  "major-eleventh": 2.667,
+  "major-twelfth": 3,
+  pi: 3.14,
+  // archimedes
+  "double-octave": 4
+};
+
+// src/defaultConfig/unit.js
+var UNIT = {
+  default: "em"
+};
+
+// src/defaultConfig/typography.js
+var defaultProps = {
+  browserDefault: 16,
+  base: 16,
+  type: "font-size",
+  ratio: SEQUENCE["minor-third"],
+  range: [-3, 12],
+  h1Matches: 6,
+  lineHeight: 1.5,
+  unit: "em",
+  templates: {},
+  sequence: {},
+  scales: {},
+  vars: {}
+};
+var TYPOGRAPHY = defaultProps;
+
+// src/defaultConfig/font.js
+var FONT = {};
+
+// src/defaultConfig/font-family.js
+var FONT_FAMILY = {};
+var FONT_FAMILY_TYPES = {
+  "sans-serif": "Helvetica, Arial, sans-serif, --system-default",
+  serif: "Times New Roman, Georgia, serif, --system-default",
+  monospace: "Courier New, monospace, --system-default"
+};
+var FONT_FACE = {};
+
+// src/defaultConfig/media.js
+var MEDIA = {
+  tv: "(min-width: 2780px)",
+  screenL: "(max-width: 1920px)",
+  "screenL<": "(min-width: 1920px)",
+  screenM: "(max-width: 1680px)",
+  "screenM<": "(min-width: 1680px)",
+  screenS: "(max-width: 1440px)",
+  "screenS<": "(min-width: 1440px)",
+  tabletL: "(max-width: 1366px)",
+  "tabletL<": "(min-width: 1366px)",
+  tabletM: "(max-width: 1280px)",
+  "tabletM<": "(min-width: 1280px)",
+  tabletS: "(max-width: 1024px)",
+  "tabletS<": "(min-width: 1024px)",
+  mobileL: "(max-width: 768px)",
+  "mobileL<": "(min-width: 768px)",
+  mobileM: "(max-width: 560px)",
+  "mobileM<": "(min-width: 560px)",
+  mobileS: "(max-width: 480px)",
+  "mobileS<": "(min-width: 480px)",
+  mobileXS: "(max-width: 375px)",
+  "mobileXS<": "(min-width: 375px)",
+  light: "(prefers-color-scheme: light)",
+  dark: "(prefers-color-scheme: dark)",
+  print: "print"
+};
+
+// src/defaultConfig/spacing.js
+var defaultProps2 = {
+  base: TYPOGRAPHY.base,
+  type: "spacing",
+  ratio: SEQUENCE.phi,
+  range: [-5, 15],
+  subSequence: true,
+  unit: "em",
+  sequence: {},
+  scales: {},
+  vars: {}
+};
+var SPACING = defaultProps2;
+
+// src/defaultConfig/color.js
+var COLOR = {};
+var GRADIENT = {};
+
+// src/defaultConfig/theme.js
+var THEME = {};
+
+// src/defaultConfig/icons.js
+var ICONS = {};
+
+// src/defaultConfig/timing.js
+var defaultProps3 = {
+  default: 150,
+  base: 150,
+  type: "timing",
+  ratio: SEQUENCE["perfect-fourth"],
+  range: [-3, 12],
+  unit: "ms",
+  sequence: {},
+  scales: {},
+  vars: {}
+};
+var TIMING = defaultProps3;
+
+// src/defaultConfig/document.js
+var DOCUMENT = {};
+
+// src/defaultConfig/responsive.js
+var BREAKPOINTS = {
+  screenL: 1920,
+  screenM: 1680,
+  screenS: 1440,
+  tabletL: 1366,
+  tabletM: 1280,
+  tabletS: 1024,
+  mobileL: 768,
+  mobileM: 560,
+  mobileS: 480,
+  mobileXS: 375
+};
+var DEVICES = {
+  screenL: [1920, 1024],
+  screenM: [1680, 1024],
+  screenS: [1440, 978],
+  tabletL: [1366, 926],
+  tabletM: [1280, 768],
+  tabletS: [1024, 768],
+  mobileL: [768, 375],
+  mobileM: [560, 768],
+  mobileS: [480, 768],
+  mobileXS: [375, 768]
+};
+
+// src/defaultConfig/cases.js
+var CASES = {};
+
+// src/defaultConfig/animation.js
+var ANIMATION = {};
+
+// src/defaultConfig/svg.js
+var SVG = {};
+var SVG_DATA = {};
+
+// src/defaultConfig/index.js
+var RESET = {};
+
+// src/factory.js
+var CSS_VARS = {};
+var CONFIG = {
+  verbose: false,
+  useVariable: true,
+  useReset: true,
+  CSS_VARS,
+  ...defaultConfig_exports
+};
+var cachedConfig = (0, import_utils.deepClone)(CONFIG);
+var FACTORY = {
+  active: "0",
+  0: CONFIG
+};
+var getActiveConfig = (def) => {
+  return FACTORY[def || FACTORY.active];
+};
+
+// src/utils/sprite.js
 var generateSprite = (icons) => {
-  let sprite = '<svg aria-hidden="true" width="0" height="0" style="position:absolute">';
+  const CONFIG2 = getActiveConfig();
+  let sprite = "";
   for (const key in icons) {
+    if (CONFIG2.__svg_cache[key])
+      continue;
+    else
+      CONFIG2.__svg_cache[key] = true;
     sprite += icons[key];
   }
-  sprite += "</svg>";
   return sprite;
 };
 var parseRootAttributes = (htmlString) => {
-  if (!(0, import_utils.isString)(htmlString)) {
+  if (!(0, import_utils2.isString)(htmlString)) {
     return console.warn(`parseRootAttributes: ${htmlString} is not a string`);
   }
   const match = htmlString.match(/<svg\s+(.*?)>/);
@@ -894,8 +1118,8 @@ var convertSvgToSymbol = (key, code) => {
     "<svg",
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   );
-  symbol = symbol.replace(/width="[^"]*/, "");
-  symbol = symbol.replace(/height="[^"]*/, "");
+  symbol = symbol.replace(/width="[^"]*"/, "");
+  symbol = symbol.replace(/height="[^"]*"/, "");
   symbol = symbol.replace("</svg", "</symbol");
   return symbol;
 };

package/dist/cjs/utils/var.js

@@ -287,7 +287,7 @@ var require_types = __commonJS({
       isNot: () => isNot,
       isNull: () => isNull,
       isNumber: () => isNumber,
-      isObject: () => isObject,
+      isObject: () => isObject2,
       isObjectLike: () => isObjectLike2,
       isString: () => isString,
       isUndefined: () => isUndefined,
@@ -297,7 +297,7 @@ var require_types = __commonJS({
     var import_globals = require_cjs();
     var import_tags = require_cjs2();
     var isValidHtmlTag = (arg) => import_tags.HTML_TAGS.body.indexOf(arg);
-    var isObject = (arg) => {
+    var isObject2 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object" && arg.constructor === Object;
@@ -320,7 +320,7 @@ var require_types = __commonJS({
       return typeof import_globals.window.HTMLElement === "object" ? obj instanceof import_globals.window.HTMLElement : obj && typeof obj === "object" && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === "string";
     };
     var isDefined2 = (arg) => {
-      return isObject(arg) || isObjectLike2(arg) || isString(arg) || isNumber(arg) || isFunction(arg) || isArray(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
+      return isObject2(arg) || isObjectLike2(arg) || isString(arg) || isNumber(arg) || isFunction(arg) || isArray(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined = (arg) => {
       return arg === void 0;
@@ -328,7 +328,7 @@ var require_types = __commonJS({
     var TYPES = {
       boolean: isBoolean,
       array: isArray,
-      object: isObject,
+      object: isObject2,
       string: isString,
       number: isNumber,
       null: isNull,
@@ -378,7 +378,7 @@ var require_object = __commonJS({
       deepClone: () => deepClone2,
       deepCloneExclude: () => deepCloneExclude,
       deepDestringify: () => deepDestringify,
-      deepMerge: () => deepMerge,
+      deepMerge: () => deepMerge2,
       deepStringify: () => deepStringify,
       detachFunctionsFromObject: () => detachFunctionsFromObject,
       diff: () => diff,
@@ -423,7 +423,7 @@ var require_object = __commonJS({
       }
       return element;
     };
-    var deepMerge = (element, extend) => {
+    var deepMerge2 = (element, extend) => {
       for (const e in extend) {
         const extendProp = extend[e];
         if (e === "parent" || e === "props")
@@ -431,7 +431,7 @@ var require_object = __commonJS({
         if (element[e] === void 0) {
           element[e] = extendProp;
         } else if ((0, import_types.isObjectLike)(element[e]) && (0, import_types.isObjectLike)(extendProp)) {
-          deepMerge(element[e], extendProp);
+          deepMerge2(element[e], extendProp);
         } else {
           element[e] = extendProp;
         }
@@ -469,7 +469,7 @@ var require_object = __commonJS({
       return o;
     };
     var mergeArrayExclude = (arr, excl = []) => {
-      return arr.reduce((acc, curr) => deepMerge(acc, deepCloneExclude(curr, excl)), {});
+      return arr.reduce((acc, curr) => deepMerge2(acc, deepCloneExclude(curr, excl)), {});
     };
     var deepClone2 = (obj) => {
       if ((0, import_types.isArray)(obj)) {
@@ -642,11 +642,11 @@ var require_object = __commonJS({
     };
     var mergeIfExisted = (a, b) => {
       if ((0, import_types.isObjectLike)(a) && (0, import_types.isObjectLike)(b))
-        return deepMerge(a, b);
+        return deepMerge2(a, b);
       return a || b;
     };
     var mergeArray = (arr) => {
-      return arr.reduce((a, c) => deepMerge(a, deepClone2(c)), {});
+      return arr.reduce((a, c) => deepMerge2(a, deepClone2(c)), {});
     };
     var mergeAndCloneIfArray = (obj) => {
       return (0, import_types.isArray)(obj) ? mergeArray(obj) : deepClone2(obj);
@@ -1076,10 +1076,6 @@ var FACTORY = {
   0: CONFIG
 };
 var getActiveConfig = (def) => {
-  if ((0, import_utils.isDefined)(def) && !FACTORY[def]) {
-    FACTORY[def] = (0, import_utils.deepClone)(cachedConfig);
-    return FACTORY[def];
-  }
   return FACTORY[def || FACTORY.active];
 };
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "2.10.261",
+  "version": "2.10.271",
   "files": [
     "src",
     "dist"
@@ -32,5 +32,5 @@
   "peerDependencies": {
     "@emotion/css": "^11.5.0"
   },
-  "gitHead": "39a07b63363c6c6547fe25b904fc3e713ee84284"
+  "gitHead": "cb6c3e1938e3e65f85daf51f2d74d46fee36ae93"
 }

package/src/factory.js

@@ -1,6 +1,11 @@
 'use strict'
 
-import { deepClone, isDefined } from '@domql/utils'
+import {
+  deepClone,
+  deepMerge,
+  isDefined,
+  isObject
+} from '@domql/utils'
 import * as CONF from './defaultConfig'
 
 export const CSS_VARS = {}
@@ -25,14 +30,12 @@ export const activateConfig = (def) => {
 }
 
 export const getActiveConfig = (def) => {
-  if (isDefined(def) && !FACTORY[def]) {
-    FACTORY[def] = deepClone(cachedConfig)
-    return FACTORY[def]
-  }
   return FACTORY[def || FACTORY.active]
 }
 
-export const setActiveConfig = (def) => {
-  FACTORY.active = FACTORY[def]
-  return FACTORY.active
+export const setActiveConfig = (newConfig) => {
+  if (!isObject(newConfig)) return
+  FACTORY.active = '1'
+  FACTORY['1'] = deepMerge(newConfig, deepClone(cachedConfig))
+  return newConfig
 }

package/src/set.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { FACTORY, getActiveConfig } from './factory.js' // eslint-disable-line no-unused-vars
+import { FACTORY, getActiveConfig, setActiveConfig } from './factory.js' // eslint-disable-line no-unused-vars
 import {
   setColor,
   setGradient,
@@ -94,8 +94,7 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
   } = recivedConfig
 
   if (options.newConfig) {
-    FACTORY.active = options.newConfig
-    CONFIG = getActiveConfig(options.newConfig)
+    CONFIG = setActiveConfig(options.newConfig)
   }
 
   if (verbose !== undefined) CONFIG.verbose = verbose
@@ -108,6 +107,8 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
   if (globalTheme !== undefined) CONFIG.globalTheme = globalTheme
   if (CONFIG.verbose) console.log(CONFIG)
 
+  if (!CONFIG.__svg_cache) CONFIG.__svg_cache = {}
+
   const keys = Object.keys(config)
   keys.map(key => setEach(key, config[key]))
 

package/src/system/reset.js

@@ -13,7 +13,7 @@ export const applyReset = (reset = {}) => {
       const configTemplates = TYPOGRAPHY.templates
 
       configReset.body = {
-        ...getMediaTheme('document', `@${CONFIG.globalTheme}`),
+        ...(CONFIG.useDocumentTheme ? getMediaTheme('document', `@${CONFIG.globalTheme}`) : {}),
         ...configTemplates.body
       }
       configReset.h1 = configTemplates.h1

package/src/system/svg.js

@@ -21,20 +21,11 @@ export const setSVG = (val, key) => {
 
 export const appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG = getActiveConfig()
-  const doc = options.document || document
 
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG.SVG
   for (const key in LIBRARY) lib[key] = CONFIG.SVG[key]
 
-  const SVGsprite = generateSprite(lib)
-  if (!doc) {
-    console.warn('To append SVG sprites it should be run in browser environment')
-    return SVGsprite
-  }
-
-  const svgSpriteDOM = doc.createElement('template')
-  svgSpriteDOM.innerHTML = SVGsprite
-  doc.body.appendChild(svgSpriteDOM.content)
+  appendSVG(lib, options)
 }
 
 export const setIcon = (val, key) => {
@@ -46,18 +37,47 @@ export const setIcon = (val, key) => {
 
 export const appendIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG = getActiveConfig()
-  const doc = options.document || document
 
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG.ICONS
   for (const key in LIBRARY) lib[key] = CONFIG.ICONS[key]
 
-  const SVGsprite = generateSprite(lib)
+  appendSVG(lib, options)
+}
+
+const createSVGSpriteElement = (options = { isRoot: true }) => {
+  const svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+  if (options.isRoot) {
+    svgElem.setAttribute('aria-hidden', 'true')
+    svgElem.setAttribute('width', '0')
+    svgElem.setAttribute('height', '0')
+    svgElem.setAttribute('style', 'position:absolute')
+    svgElem.setAttribute('id', 'svgSprite')
+  }
+  return svgElem
+}
+
+const appendSVG = (lib, options = DEF_OPTIONS) => {
+  const CONFIG = getActiveConfig()
+  const doc = options.document || document
+
   if (!doc) {
-    console.warn('To append SVG Icon sprites it should be run in browser environment')
-    return SVGsprite
+    if (CONFIG.verbose) {
+      console.warn('To append SVG sprites it should be run in browser environment')
+    }
+    return generateSprite(lib)
   }
 
-  const iconsSpriteDOM = doc.createElement('template')
-  iconsSpriteDOM.innerHTML = SVGsprite
-  doc.body.appendChild(iconsSpriteDOM.content)
+  const exists = doc.querySelector('#svgSprite')
+  const SVGsprite = generateSprite(lib)
+
+  if (exists) {
+    const tempSVG = createSVGSpriteElement({ isRoot: false })
+    // const svgSpriteWithoutRoot = doc.createElement('template')
+    tempSVG.innerHTML = SVGsprite
+    exists.append(...tempSVG.children)
+  } else {
+    const svgSpriteDOM = createSVGSpriteElement()
+    svgSpriteDOM.innerHTML = SVGsprite
+    doc.body.prepend(svgSpriteDOM)
+  }
 }

package/src/utils/sprite.js

@@ -1,17 +1,19 @@
 'use strict'
 
 import { isString } from '@domql/utils'
+import { getActiveConfig } from '../factory'
 
 export const generateSprite = (icons) => {
-  let sprite =
-    '<svg aria-hidden="true" width="0" height="0" style="position:absolute">'
+  const CONFIG = getActiveConfig()
+
+  let sprite = ''
 
   for (const key in icons) {
+    if (CONFIG.__svg_cache[key]) continue
+    else CONFIG.__svg_cache[key] = true
     sprite += icons[key]
   }
 
-  sprite += '</svg>'
-
   return sprite
 }
 
@@ -44,8 +46,8 @@ export const convertSvgToSymbol = (key, code) => {
   let symbol = code.replace('<svg',
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   )
-  symbol = symbol.replace(/width="[^"]*/, '')
-  symbol = symbol.replace(/height="[^"]*/, '')
+  symbol = symbol.replace(/width="[^"]*"/, '')
+  symbol = symbol.replace(/height="[^"]*"/, '')
   symbol = symbol.replace('</svg', '</symbol')
   return symbol
 }