@symbo.ls/atoms 1.2.13 → 1.2.16

package/Media.js

@@ -120,8 +120,8 @@ const beforeClassAssign = (element, s) => {
 }
 
 export const initUpdate = element => {
-  const { props, class: className } = element
-  const globalTheme = getSystemTheme(element)
+  const { props, context, class: className } = element
+  const globalTheme = context.system.globalTheme
 
   const parentProps = element.parent.props
   if (parentProps && parentProps.spacingRatio && parentProps.inheritSpacingRatio) {

package/Svg.js

@@ -0,0 +1,39 @@
+'use strict'
+
+import { init } from '@symbo.ls/init'
+
+// create SVG symbol
+export const Svg = {
+  tag: 'svg',
+  props: {
+    style: { '*': { fill: 'currentColor' } }
+  },
+  attr: {
+    xmlns: 'http://www.w3.org/2000/svg',
+    'xmlns:xlink': 'http://www.w3.org/1999/xlink'
+  },
+  html: ({ key, props, context, ...el }) => {
+    const SVG = context.system && context.system.SVG
+    const useSvgSprite = props.spriteId || (context.system && context.system.useSvgSprite)
+    const useSVGSymbol = icon => `<use xlink:href="#${icon}" />`
+
+    if (!useSvgSprite) return props.src
+    
+    let spriteId = props.spriteId
+    if (spriteId) return useSVGSymbol(spriteId)
+    
+    const symbolId = Symbol.for(props.src)
+    let SVGKey = SVG[symbolId]
+    if (SVGKey && SVG[SVGKey]) return useSVGSymbol(SVGKey)
+    
+    SVGKey = SVG[symbolId] = Math.random()
+    const conf = init({ 
+      svg: { [SVGKey]: props.src } 
+    }, null, {
+      document: context.document,
+      emotion: context.emotion
+    })
+    
+    return useSVGSymbol(SVGKey)
+  }
+}

package/index.js

@@ -15,7 +15,7 @@ export * from './Collection'
 export * from './Position'
 export * from './Picture'
 export * from './Pseudo'
-export * from './SVG'
+export * from './Svg'
 export * from './Shape'
 export * from './Theme'
 export * from './Text'

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "1.2.13",
+  "version": "1.2.16",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "8fda2aa90bb6eba3f1de567260a01cebf4082ea2",
+  "gitHead": "bc1518b87d8089e706a0f0c2df3a0012c0d1c5a3",
   "dependencies": {
     "@domql/utils": "latest",
     "@symbo.ls/create-emotion": "latest",
+    "@symbo.ls/init": "latest",
     "@symbo.ls/scratch": "latest"
   },
   "source": "src/index.js"

package/SVG.js

@@ -1,16 +0,0 @@
-'use strict'
-
-const useSVGSymbol = file => `<use xlink:href="${file}" />`
-
-// create SVG symbol
-export const SVG = {
-  tag: 'svg',
-  props: {
-    style: { '*': { fill: 'currentColor' } }
-  },
-  attr: {
-    xmlns: 'http://www.w3.org/2000/svg',
-    'xmlns:xlink': 'http://www.w3.org/1999/xlink'
-  },
-  html: ({ key, props }) => useSVGSymbol(props.src)
-}