@symbo.ls/icon 2.11.204 → 2.11.210

package/README.md

@@ -31,7 +31,7 @@ For example, you can change the color and size of the icon:
 ```javascript
 const MyComponent = {
   IconText: {
-    icon: {
+    Icon: {
       name: 'star',
       color: 'blue'
     },

package/index.js

@@ -1,14 +1,16 @@
 'use strict'
 
 import { Flex, Svg } from '@symbo.ls/atoms'
+import { isString } from '@domql/utils'
 
 export const Icon = {
   extend: Svg,
-  props: ({ key, props, parent, context }) => {
+  deps: { isString },
+  props: ({ key, props, parent, context, deps }) => {
     const { ICONS, useIconSprite, verbose } = context && context.designSystem
     const { toCamelCase } = context && context.utils
     const iconName = props.inheritedString || props.name || props.icon || key
-    const camelCase = toCamelCase(iconName)
+    const camelCase = toCamelCase(deps.isString(iconName) ? iconName : key)
 
     const isArray = camelCase.split(/([a-z])([A-Z])/g)
 
@@ -58,15 +60,9 @@ export const IconText = {
     lineHeight: 1
   },
 
-  // TODO: remove this variant
-  icon: {
-    extend: Icon,
-    if: ({ parent }) => parent.props.icon
-  },
-
   Icon: {
-    props: {},
-    if: ({ props }) => props.name || props.icon
+    props: ({ parent, props }) => ({ icon: parent.props.icon || props.name || props.icon }),
+    if: ({ parent, props }) => parent.props.icon || parent.props.Icon || props.name || props.icon
   },
 
   text: ({ props }) => props.text,

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/icon",
-  "version": "2.11.204",
+  "version": "2.11.210",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "dab7f6d84335bca5af356b849c51204910670e76",
+  "gitHead": "45ec4a9a2ab3233c83b705202980d45b0c3cb91e",
   "dependencies": {
     "@symbo.ls/atoms": "latest"
   },