アイコンをComposeにする / Compose the Icons

https://wantedly.connpass.com/event/297601/ で話しました

Transcript

1. © 2023 Wantedly, Inc. アイコンをComposeにす る モバイル勉強会#11 2023/10/17 久保出雅俊
2. wantedly.com/id/kubode © 2023 Wantedly, Inc. X: @swiz_ard GitHub: @kubode
3. 最近の活動 © 2023 Wantedly, Inc. https://www.wantedly.com/companies/wantedly/post_articles/547117
4. 今日の内容 今回もComposeと デザインシステムの話 © 2023 Wantedly, Inc.
5. 課題 © 2023 Wantedly, Inc.
6. 課題 アイコンのインポート方法どうしよう © 2023 Wantedly, Inc.
7. アイコンのインポート方法 • SVGでダウンロードしてVector Asset化(XML) • Composeのコード化 © 2023 Wantedly, Inc.
8. XMLの課題 • アイコンセット自体がリニューアルしてる ◦ 古いものはXMLリソースとして残っている ◦ アイコン名は一緒なのでそのままだと競合する • Non-transitive R class ◦ ながい • Androidプラットフォーム依存 © 2023 Wantedly, Inc.
9. MaterialのIcons © 2023 Wantedly, Inc.
10. コード化の利点 • パフォーマンス ◦ メモリキャッシュされる ◦ パースしないので高速（なはず • Compose Multiplatform化できる © 2023 Wantedly, Inc.
11. アイコンのコード化 © 2023 Wantedly, Inc.
12. • Figmaから直接コードに ◦ 良さそうなプラグインが見つからず • SVGからコード生成 ◦ MaterialのIconsの手法 コード化の手法 © 2023 Wantedly, Inc. https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/icons/README.md
13. • 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
14. コード生成のコード © 2023 Wantedly, Inc.
15. コード生成のコード © 2023 Wantedly, Inc.
16. 生成されたコード © 2023 Wantedly, Inc.
17. 生成されたコード © 2023 Wantedly, Inc.
18. 生成されたコード © 2023 Wantedly, Inc.
19. 🎉🎉🎉 © 2023 Wantedly, Inc.
20. 微妙なところ © 2023 Wantedly, Inc. ✅Material (ComposeCompletionContributor.kt) ✅R 󰢃Custom
21. まとめ • アイコンをComposeのコードにする手法を紹介 ◦ 思ったより簡単 • 展望 ◦ CI/CD組んでアイコンの変更を自動で取り込みたい ◦ Figma plugin作ってみたい © 2023 Wantedly, Inc.
22. Thanks! © 2023 Wantedly, Inc.