Introduce FIcon

docs/pages/docs/_meta.json

@@ -1,7 +1,7 @@
 {
   "index": "Getting Started",
   "themes": "Themes",
-  "icon": "Icon",
+  "icon-library": "Icon",
   "api_reference": {
     "title": "API Reference ↗",
     "href": "https://pub.dev/documentation/forui",

docs/pages/docs/alert.mdx

@@ -30,7 +30,7 @@ Displays a callout for user attention.
 
 ```dart
 FAlert(
-  icon: FAlertIcon(icon: FAssets.icons.badgeAlert),
+  icon: FIcon(FAssets.icons.badgeAlert),
   title: const Text('Heads Up!'),
   subtitle: const Text('You can add components to your app using the cli.'),
 );

docs/pages/docs/bottom-navigation-bar.mdx

@@ -34,23 +34,23 @@ It is used to navigate between a small number of views, typically between three
               onChange: (index) => setState(() => this.index = index),
               children: [
                 FBottomNavigationBarItem(
-                  icon: FAssets.icons.home,
+                  icon: FIcon(FAssets.icons.home),
                   label: const Text('Home'),
                 ),
                 FBottomNavigationBarItem(
-                  icon: FAssets.icons.layoutGrid,
+                  icon: FIcon(FAssets.icons.layoutGrid),
                   label: const Text('Browse'),
                 ),
                 FBottomNavigationBarItem(
-                  icon: FAssets.icons.radio,
+                  icon: FIcon(FAssets.icons.radio),
                   label: const Text('Radio'),
                 ),
                 FBottomNavigationBarItem(
-                  icon: FAssets.icons.libraryBig,
+                  icon: FIcon(FAssets.icons.libraryBig),
                   label: const Text('Library'),
                 ),
                 FBottomNavigationBarItem(
-                  icon: FAssets.icons.search,
+                  icon: FIcon(FAssets.icons.search),
                   label: const Text('Search'),
                 ),
               ],
@@ -74,81 +74,9 @@ FBottomNavigationBar(
     onChange: (index) => {},
     children: [
       FBottomNavigationBarItem(
-        icon: FAssets.icons.home,
+        icon: FIcon(FAssets.icons.home),
         label: const Text('Home'),
       ),
     ],
   )
 ```
-
-## Examples
-
-### Custom Icon
-
-<Tabs items={['Preview', 'Code']}>
-    <Tabs.Tab>
-        <Widget name='bottom-navigation-bar' variant='custom'/>
-    </Tabs.Tab>
-    <Tabs.Tab>
-      ```dart
-      class Application extends StatefulWidget {
-        const Application({super.key});
-
-        @override
-        State<Application> createState() => _ApplicationState();
-      }
-
-      class _ApplicationState extends State<Application> {
-        int index = 1;
-
-        @override
-        Widget build(BuildContext context) => FBottomNavigationBar(
-              index: index,
-              onChange: (index) => setState(() => this.index = index),
-              children: [
-                FBottomNavigationBarItem.customIcon(
-                  iconBuilder: (_, data, __) => Icon(
-                    Icons.home_outlined,
-                    size: data.itemStyle.iconSize,
-                    color: data.selected ? data.itemStyle.activeIconColor : data.itemStyle.inactiveIconColor,
-                  ),
-                  label: const Text('Home'),
-                ),
-                FBottomNavigationBarItem.customIcon(
-                  iconBuilder: (_, data, __) => Icon(
-                    Icons.browse_gallery_outlined,
-                    size: data.itemStyle.iconSize,
-                    color: data.selected ? data.itemStyle.activeIconColor : data.itemStyle.inactiveIconColor,
-                  ),
-                  label: const Text('Browse'),
-                ),
-                FBottomNavigationBarItem.customIcon(
-                  iconBuilder: (_, data, __) => Icon(
-                    Icons.radio_outlined,
-                    size: data.itemStyle.iconSize,
-                    color: data.selected ? data.itemStyle.activeIconColor : data.itemStyle.inactiveIconColor,
-                  ),
-                  label: const Text('Radio'),
-                ),
-                FBottomNavigationBarItem.customIcon(
-                  iconBuilder: (_, data, __) => Icon(
-                    Icons.library_books_outlined,
-                    size: data.itemStyle.iconSize,
-                    color: data.selected ? data.itemStyle.activeIconColor : data.itemStyle.inactiveIconColor,
-                  ),
-                  label: const Text('Library'),
-                ),
-                FBottomNavigationBarItem.customIcon(
-                  iconBuilder: (_, data, __) => Icon(
-                    Icons.search_outlined,
-                    size: data.itemStyle.iconSize,
-                    color: data.selected ? data.itemStyle.activeIconColor : data.itemStyle.inactiveIconColor,
-                  ),
-                  label: const Text('Search'),
-                ),
-              ],
-            );
-      }
-      ```
-    </Tabs.Tab>
-</Tabs>

docs/pages/docs/button.mdx

@@ -122,7 +122,7 @@ FButton.raw(
   <Tabs.Tab>
     ```dart {2}
     FButton(
-      prefix: FButtonIcon(icon: FAssets.icons.mail),
+      prefix: FIcon(icon: FAssets.icons.mail),
       label: const Text('Login with Email'),
       onPress: () {},
     ),
@@ -138,7 +138,7 @@ FButton.raw(
   <Tabs.Tab>
     ```dart {2}
     FButton.icon(
-      icon: FButtonIcon(icon: FAssets.icons.chevronRight),
+      icon: FIcon(icon: FAssets.icons.chevronRight),
       onPress: () {},
     ),
     ```

docs/pages/docs/icon-library.mdx

@@ -0,0 +1,57 @@
+import {Callout} from "nextra/components";
+
+
+# Icon
+
+Forui Assets is flutter library that provides a set of high-quality icons from [Lucide](https://lucide.dev/).
+
+
+## Installation
+
+<Callout type="info">
+    Forui Assets is bundled with forui package. You don't need to install it separately if you installed `forui`.
+</Callout>
+
+From your Flutter project directory, run the following command to install Forui Assets.
+
+```bash filename="bash"
+flutter pub install forui_assets
+```
+
+
+## Usage
+
+<Callout type="info">
+    The best way to find a list of icons is to visit the [Lucide](https://lucide.dev/icons/) website.
+    We periodically update the icons in the Forui Assets package.
+    If you notice a missing icon in Forui Assets, please [open an issue](https://github.com/forus-labs/forui/issues/new).
+</Callout>
+
+<Callout type="info">
+    While you can use an icon from `forui_assets` directly, it is recommended to wrap it in an [FIcon](/docs/icon) to
+    automatically configure its color and size.
+</Callout>
+
+```dart
+import 'package:forui/forui.dart';
+
+// alternatively; if you've only installed forui_assets.
+import 'package:forui_assets/forui_assets.dart';
+
+// Dog icon as a Widget. It is recommended to wrap icons in FIcon if you're using Forui.
+final dogIconWidget = FIcon(FAssets.icons.dog);
+
+// Bird icon as a Widget.
+final birdIconWidget = FAssets.icons.bird();
+
+// White cat icon with a size of 24x24.
+final catIconWidget = FAssets.icons.cat(
+  width: 24,
+  height: 24,
+  colorFilter: const ColorFilter.mode(Color(0xFFFFFFFF), BlendMode.srcIn),
+);
+
+// Saving an icon to a variable for later use.
+final rabbitSvgAsset = FAssets.icons.rabbit;
+final rabbitIconWidget = rabbitSvgAsset();
+```