@seeqdev/qomponents 0.0.245-beta.74765a171d.20260902 → 0.0.245-beta.9ccd9e6eec.20260918

package/README.md

@@ -61,7 +61,7 @@ TextArea, as well as Select.
 
 <h3>1) I use webpack and I get a strange error once I added qomponents to my package.json!</h3>
 
-Webpack needs a little help :)  
+Webpack needs a little help :)
 Add the following to the <code>rules</code> array in your <code>webpack.config</code>
 
 ```
@@ -126,6 +126,24 @@ For Example:
 @import "@fortawesome/fontawesome-free/css/solid.css";
 ```
 
+**Using icons with components:**
+
+The `Icon` component and other icon-accepting props (like `<Button icon>`) accept either a string class name or an
+`IconDefinition` object from Font Awesome:
+
+```tsx
+import { Icon, Button } from '@seeqdev/qomponents';
+
+// String format (Font Awesome class names)
+<Icon icon="fa-solid fa-check" />
+<Button icon="fa-solid fa-plus" label="Add Item" />
+
+// IconDefinition object format
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+<Icon icon={faCheck} />
+<Button icon={faCheck} label="Add Item" />
+```
+
 <h3>4) How can I see all the props that are available?</h3>
 Take a look at the <code>.types.d.ts</code> files that can be found in the <code>dist/{component name}/</code>
 folder. This file contains all available properties including some descriptive text that tells you more about them.