@symbo.ls/icon 3.2.3 → 3.3.4

package/index.js

@@ -3,6 +3,7 @@
 const inheritFromIsActive = el => {
   const { props } = el
   const propsActive = props['.isActive']
+  if (!propsActive) return
   return el.call('exec', propsActive.name || propsActive.icon)
 }
 
@@ -29,6 +30,64 @@ export const Icon = {
     const { ICONS, useIconSprite, verbose } = ctx && ctx.designSystem
     const { toCamelCase } = ctx && ctx.utils
 
+    const inheritFromIsActive = (el) => {
+      const { props } = el
+      const propsActive = props['.isActive']
+      if (!propsActive) return
+      return el.call('exec', propsActive.name || propsActive.icon)
+    }
+
+    const getSemanticIcon = (el, s, ctx) => {
+      const { SEMANTIC_ICONS } = ctx && ctx.designSystem
+      const { toCamelCase } = ctx && ctx.utils
+
+      let iconName = getIconName(el, s)
+      const camelCase = toCamelCase(iconName)
+      const isArray = camelCase.split(/([a-z])([A-Z])/g)
+      const semanticIconRootName = isArray[1]
+        ? isArray[0]
+        : iconName.split('.')[0].split(' ')[0]
+      const semanticIcon =
+        SEMANTIC_ICONS && SEMANTIC_ICONS[semanticIconRootName]
+      if (semanticIcon) {
+        const iconKey = iconName.includes('.')
+          ? 'sfsymbols.' + iconName.split('.').slice(1).join('.')
+          : 'sfsymbols'
+        iconName =
+          semanticIcon[iconKey] ||
+          semanticIcon[iconName.split('.')[0].split(' ')[0]]
+        return {
+          tag: 'span',
+          semantic_symbols: true,
+          width: 'A',
+          height: 'A',
+          lineHeight: '1em',
+          ':after': {
+            fontSize: 'Z',
+            fontWeight: '300',
+            content: `"${iconName}"`,
+            textAlign: 'center',
+            display: 'inline-block',
+            style: {
+              color: 'currentColor',
+              fontFamily: "'SF Pro Icons', 'SF Pro', 'SF Symbols', 'Segoe UI'"
+            }
+          }
+        }
+      }
+    }
+
+    const getIconName = (el, s) => {
+      const { key, props } = el
+      let icon = el.call('exec', props.name || props.icon || key, el)
+
+      if (el.call('isString', icon) && icon.includes('{{')) {
+        icon = el.call('replaceLiteralsWithObjectFields', icon)
+      }
+
+      return el.call('isString', icon) ? icon : key
+    }
+
     const iconName = getIconName(el, s)
     const camelCase = toCamelCase(iconName)
     const isArray = camelCase.split(/([a-z])([A-Z])/g)
@@ -110,7 +169,7 @@ export const IconText = {
         el
       )
     },
-    icon: el => el.call('exec', el.parent.props.icon, el.parent)
+    icon: (el) => el.call('exec', el.parent.props.icon, el.parent)
   },
 
   text: ({ props }) => props.text

package/package.json

@@ -1,12 +1,20 @@
 {
   "name": "@symbo.ls/icon",
-  "version": "3.2.3",
+  "version": "3.3.4",
   "main": "index.js",
   "license": "MIT",
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "dependencies": {
-    "@symbo.ls/atoms": "^3.2.3",
-    "@symbo.ls/utils": "^3.2.3"
+    "@symbo.ls/atoms": "^3.3.4",
+    "@symbo.ls/smbls-utils": "^3.3.4"
   },
-  "source": "src/index.js"
+  "source": "index.js",
+  "type": "module",
+  "module": "index.js",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "default": "./index.js"
+    }
+  }
 }