refactor: remove shad image in favor of icon

CHANGELOG.md

@@ -1,7 +1,8 @@
-## 0.17.7
+## 0.18.0
 
-- **FIX**: Remove `applyIconColorFilter` from `ShadButton`.
-- **FIX** The `iconSize` of a `ShadButton` is now applied only if you use a `ShadImage`.
+- **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.
+- **FIX** The `iconSize` of a `ShadButton` is now applied only if you use an `Icon` widget, wrap with a `SizedBox` to set the size otherwise.
 - **FIX**: Move `iconSize` from `ShadButtonTheme` to `ShadButtonSizesTheme`.
 
 ## 0.17.6

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

@@ -76,7 +76,7 @@ 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(
@@ -113,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')),

example/lib/pages/input.dart

@@ -42,7 +42,7 @@ class _InputPageState extends State<InputPage> {
           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,
@@ -52,10 +52,7 @@ class _InputPageState extends State<InputPage> {
               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);
             },

example/lib/pages/input_form_field.dart

@@ -72,10 +72,7 @@ class _InputFormFieldPageState extends State<InputFormFieldPage> {
               children: [
                 ShadInputFormField(
                   id: 'username',
-                  prefix: const ShadImage.square(
-                    size: 16,
-                    LucideIcons.user,
-                  ),
+                  prefix: const Icon(LucideIcons.user),
                   label: const Text('Username'),
                   placeholder: const Text('Enter your username'),
                   description: const Text('This is your public display name.'),

example/lib/pages/input_otp.dart

@@ -67,7 +67,7 @@ class _InputOTPPageState extends State<InputOTPPage> {
                   ShadInputOTPSlot(),
                 ],
               ),
-              ShadImage.square(size: 24, LucideIcons.dot),
+              Icon(LucideIcons.dot),
               ShadInputOTPGroup(
                 children: [
                   ShadInputOTPSlot(),

example/lib/pages/input_otp_form_field.dart

@@ -90,7 +90,7 @@ class _InputOTPFormFieldPageState extends State<InputOTPFormFieldPage> {
                         ShadInputOTPSlot(),
                       ],
                     ),
-                    ShadImage.square(size: 24, LucideIcons.dot),
+                    Icon(LucideIcons.dot),
                     ShadInputOTPGroup(
                       children: [
                         ShadInputOTPSlot(),

example/lib/pages/time_picker.dart

@@ -15,7 +15,7 @@ class TimePickerPage extends StatelessWidget {
           child: ShadTimePicker(
             trailing: const Padding(
               padding: EdgeInsets.only(left: 8, top: 14),
-              child: ShadImage.square(LucideIcons.clock4, size: 16),
+              child: Icon(LucideIcons.clock4),
             ),
             onChanged: (time) {
               print('time: $time');

lib/shadcn_ui.dart

@@ -26,7 +26,6 @@ export 'src/components/form/fields/switch.dart';
 export 'src/components/form/fields/time_picker.dart';
 export 'src/components/form/fields/input_otp.dart';
 export 'src/components/form/form.dart';
-export 'src/components/image.dart';
 export 'src/components/input.dart';
 export 'src/components/input_otp.dart';
 export 'src/components/popover.dart';

lib/src/app.dart

@@ -689,6 +689,7 @@ class _ShadAppState extends State<ShadApp> {
         selectionColor: themeData.colorScheme.selection,
         selectionHandleColor: themeData.colorScheme.primary,
       ),
+      iconTheme: const IconThemeData(size: 16),
     );
     mTheme = mTheme.copyWith(
       textTheme:

lib/src/components/accordion.dart

@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_animate/flutter_animate.dart';
 import 'package:lucide_icons_flutter/lucide_icons.dart';
-import 'package:shadcn_ui/src/components/image.dart';
 import 'package:shadcn_ui/src/raw_components/focusable.dart';
 import 'package:shadcn_ui/src/theme/theme.dart';
 import 'package:shadcn_ui/src/utils/animation_builder.dart';
@@ -92,7 +91,7 @@ class ShadAccordionItem<T> extends StatefulWidget {
     required this.child,
     this.separator,
     this.icon,
-    this.iconSrc,
+    this.iconData,
     this.iconEffects,
     this.padding,
     this.underlineTitleOnHover,
@@ -108,7 +107,7 @@ class ShadAccordionItem<T> extends StatefulWidget {
   final Widget child;
   final Widget? separator;
   final Widget? icon;
-  final ShadImageSrc? iconSrc;
+  final IconData? iconData;
   final List<Effect<dynamic>>? iconEffects;
   final EdgeInsets? padding;
   final bool? underlineTitleOnHover;
@@ -195,13 +194,13 @@ class _ShadAccordionItemState<T> extends State<ShadAccordionItem<T>>
           ),
         ];
 
-    final effectiveIconSrc = widget.iconSrc ??
-        theme.accordionTheme.iconSrc ??
+    final effectiveIconData = widget.iconData ??
+        theme.accordionTheme.iconData ??
         LucideIcons.chevronDown;
 
     final effectiveIcon = widget.icon ??
-        ShadImage.square(
-          effectiveIconSrc,
+        Icon(
+          effectiveIconData,
           color: theme.colorScheme.foreground,
           size: 16,
         );

lib/src/components/alert.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/cupertino.dart';
-import 'package:shadcn_ui/src/components/image.dart';
 import 'package:shadcn_ui/src/theme/components/decorator.dart';
 import 'package:shadcn_ui/src/theme/theme.dart';
 import 'package:shadcn_ui/src/utils/border.dart';
@@ -14,14 +13,13 @@ class ShadAlert extends StatelessWidget {
   const ShadAlert({
     super.key,
     this.icon,
-    this.iconSrc,
+    this.iconData,
     this.title,
     this.description,
     this.textDirection,
     this.decoration,
     this.iconPadding,
     this.iconColor,
-    this.iconSize,
     this.titleStyle,
     this.descriptionStyle,
     this.mainAxisAlignment,
@@ -32,14 +30,13 @@ class ShadAlert extends StatelessWidget {
   const ShadAlert.destructive({
     super.key,
     this.icon,
-    this.iconSrc,
+    this.iconData,
     this.title,
     this.description,
     this.textDirection,
     this.decoration,
     this.iconPadding,
     this.iconColor,
-    this.iconSize,
     this.titleStyle,
     this.descriptionStyle,
     this.mainAxisAlignment,
@@ -51,14 +48,13 @@ class ShadAlert extends StatelessWidget {
     super.key,
     required this.variant,
     this.icon,
-    this.iconSrc,
+    this.iconData,
     this.title,
     this.description,
     this.textDirection,
     this.decoration,
     this.iconPadding,
     this.iconColor,
-    this.iconSize,
     this.titleStyle,
     this.descriptionStyle,
     this.mainAxisAlignment,
@@ -68,14 +64,13 @@ class ShadAlert extends StatelessWidget {
 
   final ShadAlertVariant variant;
   final Widget? icon;
-  final ShadImageSrc? iconSrc;
+  final IconData? iconData;
   final Widget? title;
   final Widget? description;
   final TextDirection? textDirection;
   final ShadDecoration? decoration;
   final EdgeInsets? iconPadding;
   final Color? iconColor;
-  final Size? iconSize;
   final TextStyle? titleStyle;
   final TextStyle? descriptionStyle;
   final MainAxisAlignment? mainAxisAlignment;
@@ -115,18 +110,13 @@ class ShadAlert extends StatelessWidget {
         effectiveAlertTheme.iconColor ??
         theme.colorScheme.foreground;
 
-    final effectiveIconSize =
-        iconSize ?? effectiveAlertTheme.iconSize ?? const Size.square(16);
-
-    final hasIcon = icon != null || iconSrc != null;
+    final hasIcon = icon != null || iconData != null;
     final effectiveIcon = hasIcon
         ? Padding(
             padding: effectiveIconPadding,
             child: icon ??
-                ShadImage(
-                  iconSrc!,
-                  width: effectiveIconSize.width,
-                  height: effectiveIconSize.height,
+                Icon(
+                  iconData,
                   color: effectiveIconColor,
                 ),
           )

lib/src/components/avatar.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:shadcn_ui/shadcn_ui.dart';
 import 'package:shadcn_ui/src/utils/debug_check.dart';
+import 'package:universal_image/universal_image.dart';
 
 class ShadAvatar extends StatelessWidget {
   const ShadAvatar(
@@ -14,7 +15,7 @@ class ShadAvatar extends StatelessWidget {
     this.fit,
   });
 
-  final ShadImageSrc src;
+  final dynamic src;
   final Widget? placeholder;
   final Size? size;
   final ShapeBorder? shape;
@@ -64,7 +65,7 @@ class ShadAvatar extends StatelessWidget {
         shape: effectiveShape(theme),
         color: effectiveBackgroundColor(theme),
       ),
-      child: ShadImage(src, placeholder: placeholder),
+      child: UniversalImage(src, placeholder: placeholder),
     );
   }
 }