@symbo.ls/icon 2.11.375 → 2.11.389

package/index.js

@@ -2,22 +2,52 @@
 
 import { isString, replaceLiteralsWithObjectFields } from '@domql/utils'
 
+const getIconName = ({ key, props, context, deps, state }) => {
+  let iconName = props.name || props.icon || key
+
+  if (isString(iconName) && iconName.includes('{{')) {
+    iconName = deps.replaceLiteralsWithObjectFields(iconName, state)
+  }
+
+  return deps.isString(iconName) ? iconName : key
+}
+
 export const Icon = {
   extend: 'Svg',
   deps: { isString, replaceLiteralsWithObjectFields },
   props: ({ key, props, parent, context, deps, state }) => {
-    const { ICONS, useIconSprite, verbose } = context && context.designSystem
+    const { ICONS, SEMANTIC_ICONS, useIconSprite, verbose } = context && context.designSystem
     const { toCamelCase } = context && context.utils
-    let iconName = props.name || props.icon || key
-
-    if (isString(iconName) && iconName.includes('{{')) {
-      iconName = deps.replaceLiteralsWithObjectFields(iconName, state)
-    }
-
-    const camelCase = toCamelCase(deps.isString(iconName) ? iconName : key)
 
+    let iconName = getIconName({ key, props, parent, context, deps, state })
+    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', 'Segoe UI'"
+          }
+        }
+      }
+    }
+
     let activeIconName
     if (props.active) {
       activeIconName = props['.active'].name || props['.active'].icon

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@symbo.ls/icon",
-  "version": "2.11.375",
+  "version": "2.11.389",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "4fddad68b778dbfd8298ac6ca8d500bdabbb2282",
+  "gitHead": "e260280a4a50ca08fd7df53104a884086dc3da88",
   "dependencies": {
-    "@symbo.ls/atoms": "latest"
+    "@symbo.ls/atoms": "latest",
+    "@symbo.ls/utils": "latest"
   },
   "source": "src/index.js"
 }