@symbo.ls/icon 1.1.5 → 1.2.0

package/index.js

@@ -1,14 +1,50 @@
 'use strict'
 
-import style from './style'
-
-import { SVG } from '@symbo.ls/svg'
+import { Flex, SVG } from '@symbo.ls/atoms'
 
 export const Icon = {
-  extends: SVG,
-  style,
-  define: { name: param => param },
-  name: ({ props }) => props.icon,
-  attr: { viewBox: '0 0 24 24' },
-  src: ({ key, name }) => name || key || 'noIcon'
+  extend: SVG,
+  props: ({ key, props, parent, context }) => {
+    const { ICONS } = context && context.system
+    const iconName = props.inheritedString || props.name || props.icon || key
+    const camelCase = toCamelCase(iconName)
+
+    const isArray = camelCase.split(/([a-z])([A-Z])/g)
+
+    let activeIconName
+    if (props.active) {
+      activeIconName = props['.active'].name || props['.active'].icon
+    }
+    if (parent.props.active && parent.props['.active'] && parent.props['.active'].icon) {
+      activeIconName = parent.props['.active'].icon.name || parent.props['.active'].icon.icon || parent.props['.active'].icon
+    }
+
+    const iconFromLibrary = ICONS[activeIconName] || ICONS[camelCase] || (ICONS[isArray[0] + isArray[1]]) || ICONS[isArray[0]] || ICONS['noIcon']
+
+    return {
+      width: 'A',
+      height: 'A',
+      display: 'inline-block',
+      src: iconFromLibrary,
+      style: { fill: 'currentColor' }
+    }
+  },
+  attr: { viewBox: '0 0 24 24' }
 }
+
+export const IconText = {
+  extend: Flex,
+
+  props: {
+    align: 'center center',
+    lineHeight: 1
+  },
+
+  icon: {
+    extend: Icon,
+    if: ({ parent }) => parent.props.icon,
+    props: 'match'
+  },
+
+  text: ({ props }) => props.text
+}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/icon",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "8590863dfd2c60cbe59db0b4bb8239c8a7585259",
+  "gitHead": "769d39aee2ab66f0d64b1e0052893442857e7432",
   "dependencies": {
     "@symbo.ls/svg": "latest"
   },