@symbo.ls/icon 2.11.36 → 2.11.76

package/README.md

@@ -0,0 +1,41 @@
+# IconText Component
+A simple and flexible IconText component that displays an icon alongside some text. The component extends the Flex component and allows for easy customization.
+
+## Props
+
+- `align`: (string) Alignment of the icon and text. Default value is `'center center'`.
+- `lineHeight`: (number) Line height of the text. Default value is `1`.
+- `icon`: (string) The name of the icon to be displayed. This prop will be removed in the future.
+- `name`: (string) The name of the icon to be displayed.
+- `text`: (string) The text to be displayed alongside the icon.
+
+## Usage
+
+```javascript
+import { IconText } from 'smbls';
+
+const MyComponent = {
+  IconText: {
+    icon: 'star',
+    text: 'Hello, World!'
+  }
+}
+```
+
+## Customization
+
+You can easily customize the appearance of the IconText component by passing additional props to the `Icon` or `text` components.
+
+For example, you can change the color and size of the icon:
+
+```javascript
+const MyComponent = {
+  IconText: {
+    icon: {
+      name: 'star',
+      color: 'blue'
+    },
+    text: 'Hello, World!'
+  }
+}
+```

package/index.js

@@ -69,5 +69,13 @@ export const IconText = {
     if: ({ props }) => props.name || props.icon
   },
 
-  text: ({ props }) => props.text
+  text: ({ props }) => props.text,
+
+  '.reversed': {
+    props: { flow: 'row-reverse' }
+  },
+
+  '.vertical': {
+    props: { flow: 'column' }
+  }
 }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/icon",
-  "version": "2.11.36",
+  "version": "2.11.76",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "dcbcb0c3da036cfdb2fa14632c7dd32f8041af2a",
+  "gitHead": "08b91598dfbcc46a59273441a121ff3798cc0ce8",
   "dependencies": {
     "@symbo.ls/atoms": "latest",
     "@symbo.ls/utils": "latest"