diff --git a/README.md b/README.md index 8c579e2..3f6e1bc 100644 --- a/README.md +++ b/README.md @@ -75,7 +75,7 @@ you could also use the duotone style like this // import the package import 'package:phosphor_flutter/phosphor_flutter.dart'; -// This will show the [Note Pencil] icon in it's duotone version +// This will show the [Note Pencil] icon in its duotone version PhosphorIcon( PhosphorIconsDuotone.notePencil, color: Colors.green, @@ -83,26 +83,23 @@ PhosphorIcon( ``` by default the secondary color will be the same as the one passed here but with -a 20% of opacity, but you can easily override that behavior with the -`duotoneSecondaryOpacity` and `duotoneSecondaryColor` properties +a 20% of opacity, but you can easily override that behavior by passing a custom +`secondaryDuotoneColor` property ```dart // import the package import 'package:phosphor_flutter/phosphor_flutter.dart'; -// This will show the [Note Pencil] icon in it's duotone version where the +// This will show the [Note Pencil] icon in its duotone version where the // foreground color will be green and the background color will be yellow // with an opacity of 50% PhosphorIcon( PhosphorIconsDuotone.notePencil, color: Colors.green, - duotoneSecondaryOpacity: 0.50, - duotoneSecondaryColor: Colors.yellow, + secondaryDuotoneColor: Colors.yellow.withValues(alpha: 0.5), ), ``` -you can even make the opacity 100% to have a real duocolor icon. - ### Flutter `Icon` Widget You can use the native flutter `Icon()` widget passing any `PhosphorIcon` value @@ -128,7 +125,7 @@ Icon( You could use any property of the [`Icon widget`](https://api.flutter.dev/flutter/widgets/Icon-class.html) to personalize the icon. ```dart -// This will show the [Note Pencil] icon in it's fill version +// This will show the [Note Pencil] icon in its fill version // with a size of 30.0, green color and a semantic label for // screen readers. Icon( @@ -141,6 +138,25 @@ Icon( All the icons has their thin, light, regular, bold and fill versions. +### Theming + +To define a global theme for duotone icons, simply add `PhosphorIconTheme` +to your application's theme extensions: + +```dart +MaterialApp( + theme: ThemeData( + extensions: [ + PhosphorIconTheme( + secondaryDuotoneColor: Colors.yellow.withValues(alpha: 0.33), + ), + ], + ... + ), + ... +) +``` + ## Migration Guide To migrate from v1.0.0 to 2.1.0 you just need to change all your diff --git a/lib/phosphor_flutter.dart b/lib/phosphor_flutter.dart index 6ce08b3..1707a9c 100644 --- a/lib/phosphor_flutter.dart +++ b/lib/phosphor_flutter.dart @@ -3,3 +3,4 @@ library phosphor_flutter; export 'package:phosphor_flutter/src/phosphor_icon_data.dart'; export 'package:phosphor_flutter/src/phosphor_icon.dart'; export 'package:phosphor_flutter/src/phosphor_icons.dart'; +export 'package:phosphor_flutter/src/phosphor_icon_theme.dart'; \ No newline at end of file diff --git a/lib/src/phosphor_icon.dart b/lib/src/phosphor_icon.dart index 6e99d6d..7070c3f 100644 --- a/lib/src/phosphor_icon.dart +++ b/lib/src/phosphor_icon.dart @@ -2,6 +2,7 @@ library phosphor_flutter; import 'package:flutter/material.dart'; import 'package:phosphor_flutter/phosphor_flutter.dart'; +import 'package:phosphor_flutter/src/phosphor_icon_theme.dart'; class PhosphorIcon extends Icon { const PhosphorIcon( @@ -16,8 +17,7 @@ class PhosphorIcon extends Icon { List? shadows, String? semanticLabel, TextDirection? textDirection, - this.duotoneSecondaryOpacity = 0.20, - this.duotoneSecondaryColor, + this.secondaryDuotoneColor, }) : super( icon, color: color, @@ -32,31 +32,30 @@ class PhosphorIcon extends Icon { weight: weight, ); - final double duotoneSecondaryOpacity; - final Color? duotoneSecondaryColor; + final Color? secondaryDuotoneColor; @override Widget build(BuildContext context) { if (icon is PhosphorDuotoneIconData) { + final duotoneIconTheme = Theme.of(context).extension(); final duotoneIcon = icon as PhosphorDuotoneIconData; return Stack( alignment: Alignment.center, children: [ - Opacity( - opacity: duotoneSecondaryOpacity, - child: Icon( - duotoneIcon.secondary, - key: key, - size: size, - fill: fill, - weight: weight, - grade: grade, - opticalSize: opticalSize, - color: duotoneSecondaryColor ?? color, - shadows: shadows, - semanticLabel: semanticLabel, - textDirection: textDirection, - ), + Icon( + duotoneIcon.secondary, + key: key, + size: size, + fill: fill, + weight: weight, + grade: grade, + opticalSize: opticalSize, + color: secondaryDuotoneColor ?? + duotoneIconTheme?.secondaryDuotoneColor ?? + color?.withValues(alpha: 0.2), + shadows: shadows, + semanticLabel: semanticLabel, + textDirection: textDirection, ), super.build(context), ], diff --git a/lib/src/phosphor_icon_theme.dart b/lib/src/phosphor_icon_theme.dart new file mode 100644 index 0000000..fd4274f --- /dev/null +++ b/lib/src/phosphor_icon_theme.dart @@ -0,0 +1,24 @@ +import 'package:flutter/material.dart'; + +class PhosphorIconTheme extends ThemeExtension { + final Color secondaryDuotoneColor; + + const PhosphorIconTheme({required this.secondaryDuotoneColor}); + + @override + PhosphorIconTheme copyWith({Color? secondaryDuotoneColor}) => + PhosphorIconTheme( + secondaryDuotoneColor: + secondaryDuotoneColor ?? this.secondaryDuotoneColor, + ); + + @override + PhosphorIconTheme lerp( + covariant ThemeExtension? other, double t) { + if (other is! PhosphorIconTheme) return this; + return PhosphorIconTheme( + secondaryDuotoneColor: + t < 0.5 ? secondaryDuotoneColor : other.secondaryDuotoneColor, + ); + } +} diff --git a/pubspec.yaml b/pubspec.yaml index 943a3a4..3afdf41 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: phosphor_flutter description: Implementation of Phosphoricons for Flutter. 772 icons and counting. Thin, Light, Regular, Bold, Fill. -version: 2.1.0 +version: 3.0.0 maintainer: Rurick Maqueo Poisot @rurickdev homepage: https://phosphoricons.com/ repository: https://github.com/phosphor-icons/phosphor-flutter