https://kotlinlang.org logo
Join Slack
Powered by
I was tired of adding svgs to my projects and I wa...
# compose
a
I was tired of adding svgs to my projects and I wanted nice icons so I converted most of the Material Symbols (2993 icons) to composable functions. Made a site so that you can copy-paste any in your projects: https://www.composables.com/icons
❤️ 23
t
Wonderful job I was too lazy to do it 🙂 Any plans to support the parameters of those icons like weight and optical size?
a
yes! the work has already been done. it's a matter of adding the options on the UI now
ran out of time to do that. will do whenever i get the chance (cause I also need that)
t
Well then I officially love you 😛 Migrated from material to symbol on a non compose app some times ago and while a small change most icons looked more polished and in place.
a
this project started with having a page with all the material icons because I didnt want to have the extended lib in my projects. then I realized the symbols are the updated version.
t
Yes much nicer, but I gave up on the manual conversion for compose with all the params. You should make this highly visible on your home page. Was requested quite a few time here including by me.
r
@Alex Styl What's the issue you were having with material-extended?
a
@romainguy • finding any jetpack compose dependency is a pain, so i have to dig the web to find the right one (that's why i made jetpackcomposeversion.com but i havent updated w/ the extended yet) • i felt like it slowed my building time (maybe the first one, didn't measure) • hard to know if an icon i wanted was there or not
t
On recent AS versions it propose to add most of the proper one and now have preview of compose icons. Great QOL changes. But in all cases Symbol icons are nicer IMO and there's still no official support.
e
@romainguy my issue with material-extended is that it is large and you have to use R8 or proguard to mitigate that (which doesn't help debug builds). It also causes a massive slowdown when building my project for Canvas/JS. I think the issue is the js minifier takes a long time to run through it. I'm assuming it'll cause similar issues on iOS, but I don't know how minification works there. I've found it easier to just add the specific icon I need to my project.
@Alex Styl what was the reasoning behind using 
remember
instead of the way Google does it with "caching" it
a
@eygraber it worked better for my case, as I wanted to inline icons in components I am building. If you are using the icons in multiple places then extracting to a variable might be better
t
@Alex Styl So testing them today and it seems the icons copied when clicking is not the icons shown in the UI. Seems it's either high emphasis or higher weight.
a
@Tolriq could you send me the name of the ones you found don't match, so that I can have a look?
t
The rounded pause was the most obvious but all seems to have this. I tested by manually converting them and they were ok.
The filled one.
a
thanks! Will have a look asap
j
curious to know! how did you add path and all those information to all individual icon in composable? don't say manually? @Alex Styl
e
@Alex Styl I see that the svg to composable you added has the ability to specify using a val or a function. Any plans on extending that to icons? Also, Compose team has mentioned that they used the val pattern that they did because of overhead from lazy. If you do offer the ability to copy as a val, an option to use lazy would be nice as well 😄 Thanks for all of your hard work on this! https://kotlinlang.slack.com/archives/CJLTWPH7S/p1686590486158029?thread_ts=1686551244.633989&cid=CJLTWPH7S
a
@eygraber about icons you mean composables.com/icons? i am a bit confused about the lazy. if there is an overhead on lazy how come you want a lazy version?
e
Yes. The overhead on lazy was because they have so many of them. If there's a (much) smaller subset of them in the project it shouldn't be a problem. I'll try to find the message about it later (pretty sure there was a conversation in this slack about it)
3 Views
Open in Slack
PreviousNext
Powered by