@symbo.ls/icon - npm Package Compare versions

Comparing version 2.11.375 to 2.11.389

index.js

@@ -5,2 +5,12 @@ 'use strict'
 
+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 = {
@@ -10,14 +20,34 @@ extend: 'Svg',
   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)
+    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'"
+          }
+        }
+      }
     }
 
-    const camelCase = toCamelCase(deps.isString(iconName) ? iconName : key)
-
-    const isArray = camelCase.split(/([a-z])([A-Z])/g)
-
     let activeIconName
@@ -24,0 +54,0 @@ if (props.active) {

package.json

 {
   "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"
 }

No alert changes

Improved metrics

Total package byte prevSize

6319

increased by20.55%

Lines of code

121

increased by30.11%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + [e-mail]/utils@latest