fix: button icon size and color (#245)

.github/workflows/flutter-test.yaml

@@ -0,0 +1,32 @@
+name: Flutter test
+
+on:
+  pull_request:
+    paths-ignore:
+      - "**.md"
+  push:
+    branches:
+      - main
+      - dev
+    paths-ignore:
+      - "**.md"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    concurrency:
+      group: ${{ github.head_ref || github.run_id }}
+      cancel-in-progress: true
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: subosito/flutter-action@v2.18.0
+        with:
+          channel: "stable"
+
+      - name: Install dependencies
+        run: flutter pub get
+
+      - name: Test
+        run: flutter test

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.18.0
+
+- **BREAKING CHANGE**: Remove `applyIconColorFilter` from `ShadButton`.
+- **BREAKING CHANGE**: Remove `ShadImage` component. Prefer using the `Icon` widget for `IconData`, the `Image` widget for normal images, and `SvgPicture` (from the [flutter_svg package](https://pub.dev/packages/flutter_svg) for SVG images. If you want a fallback, use `UniversalImage`.
+- **BREAKING CHANGE**: Rename `iconSrc` in `iconData` around components.
+
 ## 0.17.6
 
 - **FIX**: Fix the iconSize of `ShadButton`, add `iconSize` to `ShadButton`.

docs/src/content/docs/Components/alert.mdx

@@ -3,30 +3,35 @@ title: Alert
 sidebar:
   order: 4
 ---
-import Preview from '../../../components/Preview.astro';
+
+import Preview from "../../../components/Preview.astro";
 
 Displays a callout for user attention.
 
 <Preview src="https://shadcn-ui-playground.pages.dev/alert?style=primary">
- ```dart
+
+```dart
 ShadAlert(
-  iconSrc: LucideIcons.terminal,
+  iconData: LucideIcons.terminal,
   title: Text('Heads up!'),
   description:
       Text('You can add components to your app using the cli.'),
 ),
 ```
+
 </Preview>
 
 ## Destructive
 
 <Preview src="https://shadcn-ui-playground.pages.dev/alert?style=destructive">
- ```dart
+
+```dart
 ShadAlert.destructive(
-  iconSrc: LucideIcons.circleAlert,
+  iconData: LucideIcons.circleAlert,
   title: Text('Error'),
   description:
       Text('Your session has expired. Please log in again.'),
 )
 ```
+
 </Preview>

docs/src/content/docs/Components/button.mdx

@@ -92,7 +92,7 @@ ShadButton.link(
 
 ```dart
 ShadButton.outline(
-  icon: const ShadImage(LucideIcons.chevronRight),
+  icon: const Icon(LucideIcons.chevronRight),
   onPressed: () {},
 ),
 ```
@@ -107,7 +107,7 @@ ShadButton.outline(
 ShadButton(
   onPressed: () {},
   child: const Text('Login with Email'),
-  icon: const ShadImage(LucideIcons.mail),
+  icon: const Icon(LucideIcons.mail),
 )
 ```
 
@@ -121,7 +121,13 @@ ShadButton(
 ShadButton(
   onPressed: () {},
   child: const Text('Please wait'),
-  icon: const CircularProgressIndicator(strokeWidth: 2),
+  icon: const SizedBox.square(
+    dimension: 16,
+    child: CircularProgressIndicator(
+      strokeWidth: 2,
+      color: ShadTheme.of(context).colorScheme.primaryForeground,
+    ),
+  ),
 )
 ```
 

docs/src/content/docs/Components/card.mdx

@@ -121,7 +121,7 @@ class _CardNotificationsState extends State<CardNotifications> {
         width: double.infinity,
         icon: const Padding(
           padding: EdgeInsets.only(right: 8),
-          child: ShadImage.square(LucideIcons.check, size: 16),
+          child: Icon(LucideIcons.check),
         ),
         onPressed: () {},
         child: const Text('Mark all as read'),
@@ -137,7 +137,7 @@ class _CardNotificationsState extends State<CardNotifications> {
             ),
             child: Row(
               children: [
-                ShadImage.square(
+                Icon(
                   LucideIcons.bellRing,
                   size: 24,
                   color: theme.colorScheme.foreground,

docs/src/content/docs/Components/context-menu.mdx

@@ -37,10 +37,7 @@ class ContextMenuPage extends StatelessWidget {
               child: Text('Reload'),
             ),
             const ShadContextMenuItem.inset(
-              trailing: ShadImage.square(
-                LucideIcons.chevronRight,
-                size: 16,
-              ),
+              trailing: Icon(LucideIcons.chevronRight),
               items: [
                 ShadContextMenuItem(
                   child: Text('Save Page As...'),
@@ -60,7 +57,7 @@ class ContextMenuPage extends StatelessWidget {
             ),
             const Divider(height: 8),
             const ShadContextMenuItem(
-              leading: ShadImage.square(LucideIcons.check, size: 16),
+              leading: Icon(LucideIcons.check),
               child: Text('Show Bookmarks Bar'),
             ),
             const ShadContextMenuItem.inset(child: Text('Show Full URLs')),

docs/src/content/docs/Components/input-otp.mdx

@@ -22,7 +22,7 @@ ShadInputOTP(
         ShadInputOTPSlot(),
       ],
     ),
-    ShadImage.square(size: 24, LucideIcons.dot),
+    Icon(size: 24, LucideIcons.dot),
     ShadInputOTPGroup(
       children: [
         ShadInputOTPSlot(),
@@ -92,7 +92,7 @@ ShadInputOTPFormField(
         ShadInputOTPSlot(),
       ],
     ),
-    ShadImage.square(size: 24, LucideIcons.dot),
+    Icon(size: 24, LucideIcons.dot),
     ShadInputOTPGroup(
       children: [
         ShadInputOTPSlot(),

docs/src/content/docs/Components/input.mdx

@@ -44,7 +44,7 @@ class _PasswordInputState extends State<PasswordInput> {
       obscureText: obscure,
       prefix: const Padding(
         padding: EdgeInsets.all(4.0),
-        child: ShadImage.square(size: 16, LucideIcons.lock),
+        child: Icon(LucideIcons.lock),
       ),
       suffix: ShadButton(
         width: 24,
@@ -54,10 +54,7 @@ class _PasswordInputState extends State<PasswordInput> {
           secondaryBorder: ShadBorder.none,
           secondaryFocusedBorder: ShadBorder.none,
         ),
-        icon: ShadImage.square(
-          size: 16,
-          obscure ? LucideIcons.eyeOff : LucideIcons.eye,
-        ),
+        icon: Icon(obscure ? LucideIcons.eyeOff : LucideIcons.eye),
         onPressed: () {
           setState(() => obscure = !obscure);
         },

docs/src/content/docs/Components/time-picker.mdx

@@ -21,7 +21,7 @@ class PrimaryTimePicker extends StatelessWidget {
       child: const ShadTimePicker(
         trailing: Padding(
           padding: EdgeInsets.only(left: 8, top: 14),
-          child: ShadImage.square(LucideIcons.clock4, size: 16),
+          child: Icon(LucideIcons.clock4),
         ),
       ),
     );

docs/src/content/docs/packages.md

@@ -29,6 +29,6 @@ A nice raw table (very performant) implementation used by the [ShadTable](../com
 
 The intl package provides internationalization and localization facilities, including message translation.
 
-### [flutter_svg](https://pub.dev/packages/flutter_svg)
+### [universal_image](https://pub.dev/packages/universal_image)
 
-Draw SVG images. Used by the [ShadImage](../components/image) component.
+Support multiple image formats. Used by the [ShadAvatar](../components/avatar) component.

example/lib/main.dart

@@ -12,7 +12,6 @@ import 'package:example/pages/context_menu.dart';
 import 'package:example/pages/date_picker.dart';
 import 'package:example/pages/date_picker_form_field.dart';
 import 'package:example/pages/dialog.dart';
-import 'package:example/pages/image.dart';
 import 'package:example/pages/input.dart';
 import 'package:example/pages/input_form_field.dart';
 import 'package:example/pages/input_otp.dart';
@@ -60,7 +59,6 @@ final routes = <String, WidgetBuilder>{
   '/date-picker': (_) => const DatePickerPage(),
   '/date-picker-form-field': (_) => const DatePickerFormFieldPage(),
   '/dialog': (_) => const DialogPage(),
-  '/image': (_) => const ImagePage(),
   '/input': (_) => const InputPage(),
   '/input-form-field': (_) => const InputFormFieldPage(),
   '/input-OTP': (_) => const InputOTPPage(),

example/lib/pages/alert.dart

@@ -14,7 +14,7 @@ class AlertPage extends StatelessWidget {
         ConstrainedBox(
           constraints: const BoxConstraints(maxWidth: 600),
           child: const ShadAlert(
-            iconSrc: LucideIcons.terminal,
+            iconData: LucideIcons.terminal,
             title: Text('Heads up!'),
             description:
                 Text('You can add components to your app using the cli.'),
@@ -23,7 +23,7 @@ class AlertPage extends StatelessWidget {
         ConstrainedBox(
           constraints: const BoxConstraints(maxWidth: 600),
           child: const ShadAlert.destructive(
-            iconSrc: LucideIcons.circleAlert,
+            iconData: LucideIcons.circleAlert,
             title: Text('Error'),
             description: Text('Your session has expired. Please log in again.'),
           ),

example/lib/pages/button.dart

@@ -18,6 +18,7 @@ class _ButtonPageState extends State<ButtonPage> {
 
   @override
   Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
     return FocusTraversalGroup(
       policy: WidgetOrderTraversalPolicy(),
       child: BaseScaffold(
@@ -75,13 +76,19 @@ class _ButtonPageState extends State<ButtonPage> {
           ShadButton(
             size: size,
             enabled: enabled,
-            icon: const ShadImage(LucideIcons.mail),
+            icon: const Icon(LucideIcons.mail),
             child: const Text('Login with Email'),
           ),
           ShadButton(
             size: size,
             enabled: enabled,
-            icon: const CircularProgressIndicator(strokeWidth: 2),
+            icon: SizedBox.square(
+              dimension: 16,
+              child: CircularProgressIndicator(
+                strokeWidth: 2,
+                color: theme.colorScheme.primaryForeground,
+              ),
+            ),
             child: const Text('Please wait'),
           ),
           ShadButton(
@@ -106,7 +113,7 @@ class _ButtonPageState extends State<ButtonPage> {
             child: ShadButton.outline(
               size: size,
               enabled: enabled,
-              icon: const ShadImage(LucideIcons.chevronRight),
+              icon: const Icon(LucideIcons.chevronRight),
             ),
           ),
         ],

example/lib/pages/card.dart

@@ -98,7 +98,7 @@ class _CardPageState extends State<CardPage> {
             width: double.infinity,
             icon: const Padding(
               padding: EdgeInsets.only(right: 8),
-              child: ShadImage.square(LucideIcons.check, size: 16),
+              child: Icon(LucideIcons.check),
             ),
             onPressed: () {},
             child: const Text('Mark all as read'),
@@ -114,7 +114,7 @@ class _CardPageState extends State<CardPage> {
                 ),
                 child: Row(
                   children: [
-                    ShadImage.square(
+                    Icon(
                       LucideIcons.bellRing,
                       size: 24,
                       color: theme.colorScheme.foreground,

example/lib/pages/context_menu.dart

@@ -25,10 +25,7 @@ class ContextMenuPage extends StatelessWidget {
               child: Text('Reload'),
             ),
             const ShadContextMenuItem.inset(
-              trailing: ShadImage.square(
-                LucideIcons.chevronRight,
-                size: 16,
-              ),
+              trailing: Icon(LucideIcons.chevronRight),
               items: [
                 ShadContextMenuItem(
                   child: Text('Save Page As...'),
@@ -48,7 +45,7 @@ class ContextMenuPage extends StatelessWidget {
             ),
             const Divider(height: 8),
             const ShadContextMenuItem(
-              leading: ShadImage.square(LucideIcons.check, size: 16),
+              leading: Icon(LucideIcons.check),
               child: Text('Show Bookmarks Bar'),
             ),
             const ShadContextMenuItem.inset(child: Text('Show Full URLs')),