Comments (5)
Flutter's Icon class is a wrapper around a font glyph, and fonts don't support multiple colors or intrinsic opacity, making it impossible to render anything with multiple colors or tones (in the general sense) as an Icon
.
While there are other possible approaches, using using flutter_svg
package or Skia directly to render vector images like our duotone icons, they simply aren't idiomatic Flutter, and would break the ability to use them in places where an Icon
is expected, e.g. IconButton
.
We definitely want to bring duotone to the Flutter package eventually, but it simply requires a bit more thinking and effort. If you need duotone icons in a context that doesn't require a Flutter Icon
, I would recommend sourcing the assets you need from our website and relying on flutter_svg
to render them in your app.
Disclaimer: I'm not really a Flutter guy, so if anyone with experience or ideas on a better approach wants to jump in with a PR, I'm all ears!
cc @rurickdev
from flutter.
I've created a PoC for this idea. Check it out: https://github.com/johnnyasantoss/flutter_duotone_icon_poc
Worked pretty well
from flutter.
Thanks, IconButton supports normal Widgets so SVG can work https://api.flutter.dev/flutter/material/IconButton/icon.html
from flutter.
@rektdeckard what if you had the icon split in two fonts (eg. address-book-duotone-bg & address-book-duotone-fg)? and then with a special DuoTone
class it could have both icons stacked on top of each other looking just like layers on photoshop, rendering it perfectly (and with the benefit of being tree-shakable)
from flutter.
Duotone support is added in v2.0.0.
from flutter.
Related Issues (20)
- TikTokLogoFill Icon has extra padding on the right HOT 3
- Icons misalign on Chrome for Android HOT 1
- Any update for 2.0 icons? HOT 2
- sealCheckFill Icon is missing HOT 1
- Please support icons in v2.0.0. HOT 2
- Non-Constant Invocations of IconData in v 2.0.0 HOT 4
- Make weight classes implements an interface
- An error occurs when building flutter for Android HOT 4
- Duotone icons not working on web HOT 5
- Implement an initial rotation HOT 2
- Static icon classes and its members should be const HOT 4
- Duotone icons looks like regular in master branch HOT 3
- Downloading all fonts on the web, even when using only one type of icon HOT 1
- Error to build apk with: phosphor_flutter: ^2.0.0 HOT 4
- Error to build app phosphor_flutter-2.0.0 HOT 4
- Why api changed in a minor version? HOT 2
- Missing some fill icons HOT 1
- Support for gradient on icon
- Future support HOT 3
- Can not Import Phosphor Icons
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flutter.