Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
アイコンをComposeにする / Compose the Icons
Search
Masatoshi Kubode
October 17, 2023
Programming
0
440
アイコンをComposeにする / Compose the Icons
https://wantedly.connpass.com/event/297601/
で話しました
Masatoshi Kubode
October 17, 2023
Tweet
Share
More Decks by Masatoshi Kubode
See All by Masatoshi Kubode
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
kubode
0
85
Mobile Chapterが目指すところと技術 / Vision and Technology of Mobile Chapter at Wantedly
kubode
0
110
ウォンテッドリーでのKMPワークフロー / KMP workflow at Wantedly
kubode
0
1k
ComposeでのShared Element Transition / Shared Element Transition in Compose
kubode
0
290
K2への完全移行結果 / Results of complete migration to K2
kubode
2
4.2k
Data Bindingの移行を楽にする / Easier migration of Data Binding
kubode
0
810
Compose Shadow Alternative
kubode
0
250
デザインシステムのCompose実装 / Design system Compose implementation
kubode
0
510
KMMのCI/CD
kubode
3
740
Other Decks in Programming
See All in Programming
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
Jetpack for KMP
fornewid
1
290
20240706_CDKConf
takuyay0ne
0
1.2k
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
Featured
See All Featured
KATA
mclloyd
20
13k
How to Think Like a Performance Engineer
csswizardry
4
590
Infographics Made Easy
chrislema
238
18k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
Thoughts on Productivity
jonyablonski
64
4.1k
Building an army of robots
kneath
301
42k
Why Our Code Smells
bkeepers
PRO
332
56k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Transcript
© 2023 Wantedly, Inc. アイコンをComposeにす る モバイル勉強会#11 2023/10/17 久保出雅俊
wantedly.com/id/kubode © 2023 Wantedly, Inc. X: @swiz_ard GitHub: @kubode
最近の活動 © 2023 Wantedly, Inc. https://www.wantedly.com/companies/wantedly/post_articles/547117
今日の内容 今回もComposeと デザインシステムの話 © 2023 Wantedly, Inc.
課題 © 2023 Wantedly, Inc.
課題 アイコンのインポート方法どうしよう © 2023 Wantedly, Inc.
アイコンのインポート方法 • SVGでダウンロードしてVector Asset化(XML) • Composeのコード化 © 2023 Wantedly, Inc.
XMLの課題 • アイコンセット自体がリニューアルしてる ◦ 古いものはXMLリソースとして残っている ◦ アイコン名は一緒なのでそのままだと競合する • Non-transitive R
class ◦ ながい • Androidプラットフォーム依存 © 2023 Wantedly, Inc.
MaterialのIcons © 2023 Wantedly, Inc.
コード化の利点 • パフォーマンス ◦ メモリキャッシュされる ◦ パースしないので高速(なはず • Compose Multiplatform化できる
© 2023 Wantedly, Inc.
アイコンのコード化 © 2023 Wantedly, Inc.
• Figmaから直接コードに ◦ 良さそうなプラグインが見つからず • SVGからコード生成 ◦ MaterialのIconsの手法 コード化の手法 ©
2023 Wantedly, Inc. https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/icons/README.md
• Materialでのコード生成はandroidx-mainにある ◦ パッケージ化されてない • forkしてパッケージ化したものが存在するので利用 ◦ DevSrSouza/svg-to-compose SVGからコード化 ©
2023 Wantedly, Inc. https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/icons/README.md https://github.com/DevSrSouza/svg-to-compose
コード生成のコード © 2023 Wantedly, Inc.
コード生成のコード © 2023 Wantedly, Inc.
生成されたコード © 2023 Wantedly, Inc.
生成されたコード © 2023 Wantedly, Inc.
生成されたコード © 2023 Wantedly, Inc.
🎉🎉🎉 © 2023 Wantedly, Inc.
微妙なところ © 2023 Wantedly, Inc. ✅Material (ComposeCompletionContributor.kt) ✅R Custom
まとめ • アイコンをComposeのコードにする手法を紹介 ◦ 思ったより簡単 • 展望 ◦ CI/CD組んでアイコンの変更を自動で取り込みたい ◦
Figma plugin作ってみたい © 2023 Wantedly, Inc.
Thanks! © 2023 Wantedly, Inc.