phosphor-icons / flutter Goto Github PK

View Code? Open in Web Editor NEW

104.0 5.0 12.0 4.88 MB

A flexible icon family for Flutter

Home Page: https://phosphoricons.com

License: MIT License

Kotlin 0.01% Swift 0.03% Objective-C 0.01% Dart 99.00% HTML 0.03% CMake 0.41% C++ 0.50% C 0.03%

icons icon-pack flutter svg svg-icons icon-font

flutter's Introduction

phosphor-flutter

Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at phosphoricons.com.

ScreenShots

Installation

Add this to your pubspec.yaml

dependencies:
  phosphor_flutter: ^any

Then run the pub get command

flutter pub get

Usage

`PhosphorIcon` Widget

The easiest way to use all the Phosphor Icon with you app is to use our PhosphorIcon and pass any of our PhosphorIcons to it.

// import the package
import 'package:phosphor_flutter/phosphor_flutter.dart';

// This will show the [Note Pencil] icon in it's fill version
// with a size of 30.0, green color and a semantic label for
// screen readers.
PhosphorIcon(
  PhosphorIcons.fill.notePencil,
  color: Colors.green,
  size: 30.0,
  semanticLabel: 'New Note',
),

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
PhosphorIcon(
  PhosphorIcons.duotone.notePencil,
  color: Colors.green,
),

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

// import the package
import 'package:phosphor_flutter/phosphor_flutter.dart';

// This will show the [Note Pencil] icon in it's duotone version where the
// foreground color will be green and the background color will be yellow
// with an opacity of 50%
PhosphorIcon(
  PhosphorIcons.duotone.notePencil,
  color: Colors.green,
  duotoneSecondaryOpacity: 0.50,
  duotoneSecondaryColor: Color.yellow,
),

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 like any Material Icon

NOTE: Due some limitations with the flutter Icon widget when you pass a duotone icon it will render it as a simple icon, for this case prefer to use our custom PhosphorIcon widget that works the same as Icon but support our duotone style

// With Material Icons
Icon(
  Icons.edit, // Pencil icon
),

// With Phosphor Icons
Icon(
  PhosphorIcons.regular.pencil, // Pencil Icon
),

You could use any property of the Icon widget to personalize the icon.

// This will show the [Note Pencil] icon in it's fill version
// with a size of 30.0, green color and a semantic label for
// screen readers.
Icon(
  PhosphorIcons.fill.notePencil,
  color: Colors.green,
  size: 30.0,
  semanticLabel: 'New Note',
),

All the icons has their thin, light, regular, bold and fill versions.

Migration Guide

To migrate from v1.0.0 to 2.0.0 you just need to change all your PhosphorIcons.iconStyle to the new syntax PhosphorIcons.style.icon. For example:

// previous
Icon(
  PhosphorIcons.pencilFill, // Pencil Fill Icon
)

// new
Icon(
  PhosphorIcons.fill.pencil, // Pencil Fill Icon
)

// new and suggested
PhosphorIcon(
  PhosphorIcons.fill.pencil, // Pencil Fill Icon
)

Also, we encourage you to use our new PhosphorIcon widget to have support for duotone icons.

Example App

You could see all the icons within the example app.

Just clone the repository and run the next commands

cd phosphor_flutter/example
flutter pub get
flutter run

Our Related Projects

phosphor-home ▲ Phosphor homepage and general info
phosphor-react ▲ Phosphor icon component library for React
phosphor-vue ▲ Phosphor icon component library for Vue
phosphor-icons ▲ Phosphor icons for Vanilla JS
phosphor-webcomponents ▲ Phosphor icons as Web Components
phosphor-figma ▲ Phosphor icons Figma plugin
phosphor-sketch ▲ Phosphor icons Sketch plugin

Community Projects

phosphor-react-native ▲ Phosphor icon component library for React Native
phosphor-svelte ▲ Phosphor icons for Svelte apps
phosphor-r ▲ Phosphor icon wrapper for R documents and applications
blade-phosphor-icons ▲ Phosphor icons in your Laravel Blade views
ruby-phosphor-icons ▲ Phosphor icons for Ruby and Rails applications

If you've made a port of Phosphor and you want to see it here, just open a PR here!

License

MIT © Phosphor Icons

flutter's People

Contributors

Stargazers

Watchers

Forkers

rurickdev plugfox linwooddev dkvyk rikiyanuar luis901101 cheymos emirchus cymathew martinsmoises josh-burton aifuxi

flutter's Issues

Please support icons in v2.0.0.

I tried to use the plus-square icon in flutter, but it was not available.

In phosphoricons.com, there is an example saying that it can be used as below, but it seems that it is not actually updated.

Icon(
PhosphorIcons. plusSquareThin,
size: 32.0;
)

Export icons by type

Hey @rektdeckard 👋

Great icon set! Would you mind also exporting lists or maps of icons grouped by type? e.g.: normal, bold, etc.

Thanks!

Update package

Can you please update the package to 1.3.1 and add a link to the pub page in the readme?

TikTokLogoFill Icon has extra padding on the right

I am using phosphor icons in one of my projects and the tiktok filled icon has extra padding on the right.

Code ->

CircleAvatar(
                    backgroundColor: Colors.black,
                    child: Icon(PhosphorIcons.tiktokLogoFill, color: Colors.white,),
                  )

When I use same thing with any other icon it gives exact results

CircleAvatar(
                    backgroundColor: Colors.black,
                    child: Icon(PhosphorIcons.tiktokLogo, color: Colors.white,),
                  )

Can you please check this out and let me know how to fix this ? Would be happy to open a PR

Make weight classes implements an interface

I would do something like

PhosphorIcon((state.saved
                                ? PhosphorIcons.fill
                                : PhosphorIcons.light)
                            .floppyDisk)

but PhosphorIcons.fill and PhosphorIcons.light doesn't share the same interface.
Maybe an abstract class PhosphorFontSet that has these abstract properties

Duotone icons looks like regular in master branch

Hello!
Thank you for your great icons,

After upgrade from 1.4 to master, not 2.0.0 due to the const problem; I tested the PhosphorIconsDuotone implementation.
with the code :
Icon(PhosphorIconsDuotone.bookmarkSimple)

look exactly like
Icon(PhosphorIconsRegular.bookmarkSimple)

best regards,

Alexandre

Can not Import Phosphor Icons

phosphor_flutter: ^2.1.0

I'm operating using Android Studio and macOS 14.5

Error to build apk with: phosphor_flutter: ^2.0.0

Future support

Its been over a year since this Flutter library for Phosphor Icons has been updated.

Are there any plans to update this soon?

Icons misalign on Chrome for Android

While deploying the flutter app on the web, icons do not align properly in Chrome for Android.

However, they align properly when viewed in Firefox for Android and Safar for iOS. Also, icons align as expected on Chrome for Desktop.

Below are the screenshots of the issue.

Static icon classes and its members should be const

Hello, thanks for the great set of icons!

I've noticed that different types of icons have been put into separate classes as static members of the abstract class PhosphorIcons since I've upgraded to version 2.0.0 which is really nice.

My latest builds failed for a reason that I believe is related to the way PhosphorIcons are accessed.
Error (Xcode): This application cannot tree shake icons fonts. It has non-constant instances of IconData at the following locations:

Since each class and its members are auto generated and do not change at any time I believe both classes such as PhosphorIconsBold() and all of it's members could and should be const. This way each icon could be accessed in a constant way which improves performance.

Implement dual tone

This type of icons looks very good.

This weight is not yet supported

Is currently written on the website.

Non-Constant Invocations of IconData in v 2.0.0

I just upgraded to v 2.0.0 of the package and I get the following error when building the app.
Flutter build cannot tree shake icons .
Is it possible to add tree-shake support out of the box.
Here is part of the log.
file:///...../Pub/Cache/hosted/pub.dev/phosphor_flutter-2.0.0/lib/src/phosphor_icons_light.dart:3746:19 file:///.....Pub/Cache/hosted/pub.dev/phosphor_flutter-2.0.0/lib/src/phosphor_icons_light.dart:3749:23 Target aot_android_asset_bundle failed: Exception: Avoid non-constant invocations of IconData or try to build again with --no-tree-shake-icons.

Implement an initial rotation

Hello !
It would be great if we could set a rotation to the icon.
For example, I would like to use the triangle icon to point downward. Instead of requesting a new icon for each angle desired, it could be easier to just pass a double for degrees or radians to the PhosphorIcon class.

Support for gradient on icon

release date?

Hi there,

Thank you for phosphor-icons!

Will it be ready soon as a Flutter package?

Downloading all fonts on the web, even when using only one type of icon

I'm using only the duotone, and it is tree shaking as expected, but the other font files are kept with their original size, increasing the load time drastically without benefit.

sealCheckFill Icon is missing

The icon with the label sealCheckFill is missing. According to https://phosphoricons.com/ it should have been included in release 1.2.0.

Duotone icons not working on web

Testing on web, duotone icons are not showing up, I get this error:
Could not find a set of Noto fonts to display all missing characters. Please add a font asset for the missing characters.

Seemed to work great on MacOS so issue is restricted to web as far as I can tell.

List of all icons in the package

It would be nice to have a way to get a list of all icons.

I am creating an icon picker. And I can't create support for phosphor_icon (without a lot of extra code).

It would be nice to have something like this.

PhosphorIcons.allIcons()

Exporting this in a way would be nice:

https://github.com/phosphor-icons/flutter/blob/main/example/lib/constants/all_icons.dart

An error occurs when building flutter for Android

An error occurs when building flutter for Android.

I saw the warning message and added the '--no-tree-shake-icons' option and the build succeeded, but I think this should be a patch.

cmd:
flutter build apk

error:
This application cannot tree shake icons fonts. It has non-constant instances of IconData at the following locations:

file:///C:/Users/sgbai/AppData/Local/Pub/Cache/hosted/pub.dev/phosphor_flutter-2.0.0/lib/src/phosphor_icons_bold.dart:8:23
file:///C:/Users/sgbai/AppData/Local/Pub/Cache/hosted/pub.dev/phosphor_flutter-2.0.0/lib/src/phosphor_icons_bold.dart:11:29

...

Target aot_android_asset_bundle failed: Exception: Avoid non-constant invocations of IconData or try to build again with --no-tree-shake-icons.