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
620
アイコンを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
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
2
960
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
390
技術を根付かせる / How to make technology take root
kubode
1
360
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
kubode
0
440
Google Play Consoleデベロッパー アカウントの確認 / Verifying your Play Console developer account
kubode
1
1.2k
Make your Android app into Multiplatform app
kubode
0
160
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
kubode
1
1.1k
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
kubode
0
810
Mobile Chapterが目指すところと技術 / Vision and Technology of Mobile Chapter at Wantedly
kubode
0
360
Other Decks in Programming
See All in Programming
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
190
Deep Dive into ~/.claude/projects
hiragram
14
7k
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
190
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
200
CDK引数設計道場100本ノック
badmintoncryer
1
230
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
990
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
150
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
830
生成AI時代のコンポーネントライブラリの作り方
touyou
1
250
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
The Invisible Side of Design
smashingmag
301
51k
Visualization
eitanlees
146
16k
Side Projects
sachag
455
42k
Code Reviewing Like a Champion
maltzj
524
40k
Automating Front-end Workflow
addyosmani
1370
200k
How STYLIGHT went responsive
nonsquared
100
5.6k
Fireside Chat
paigeccino
37
3.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
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.