$30 off During Our Annual Pro Sale. View Details »

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

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

Masatoshi Kubode

October 17, 2023
Tweet

More Decks by Masatoshi Kubode

Other Decks in Programming

Transcript

  1. © 2023 Wantedly, Inc.
    アイコンをComposeにす

    モバイル勉強会#11
    2023/10/17 久保出雅俊

    View Slide

  2. wantedly.com/id/kubode
    © 2023 Wantedly, Inc.
    X: @swiz_ard
    GitHub: @kubode

    View Slide

  3. 最近の活動
    © 2023 Wantedly, Inc.
    https://www.wantedly.com/companies/wantedly/post_articles/547117

    View Slide

  4. 今日の内容
    今回もComposeと
    デザインシステムの話
    © 2023 Wantedly, Inc.

    View Slide

  5. 課題
    © 2023 Wantedly, Inc.

    View Slide

  6. 課題
    アイコンのインポート方法どうしよう
    © 2023 Wantedly, Inc.

    View Slide

  7. アイコンのインポート方法
    ● SVGでダウンロードしてVector Asset化(XML)
    ● Composeのコード化
    © 2023 Wantedly, Inc.

    View Slide

  8. XMLの課題
    ● アイコンセット自体がリニューアルしてる
    ○ 古いものはXMLリソースとして残っている
    ○ アイコン名は一緒なのでそのままだと競合する
    ● Non-transitive R class
    ○ ながい
    ● Androidプラットフォーム依存
    © 2023 Wantedly, Inc.

    View Slide

  9. MaterialのIcons
    © 2023 Wantedly, Inc.

    View Slide

  10. コード化の利点
    ● パフォーマンス
    ○ メモリキャッシュされる
    ○ パースしないので高速(なはず
    ● Compose Multiplatform化できる
    © 2023 Wantedly, Inc.

    View Slide

  11. アイコンのコード化
    © 2023 Wantedly, Inc.

    View Slide

  12. ● Figmaから直接コードに
    ○ 良さそうなプラグインが見つからず
    ● SVGからコード生成
    ○ MaterialのIconsの手法
    コード化の手法
    © 2023 Wantedly, Inc.
    https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/icons/README.md

    View Slide

  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

    View Slide

  14. コード生成のコード
    © 2023 Wantedly, Inc.

    View Slide

  15. コード生成のコード
    © 2023 Wantedly, Inc.

    View Slide

  16. 生成されたコード
    © 2023 Wantedly, Inc.

    View Slide

  17. 生成されたコード
    © 2023 Wantedly, Inc.

    View Slide

  18. 生成されたコード
    © 2023 Wantedly, Inc.

    View Slide

  19. 🎉🎉🎉
    © 2023 Wantedly, Inc.

    View Slide

  20. 微妙なところ
    © 2023 Wantedly, Inc.
    ✅Material (ComposeCompletionContributor.kt)
    ✅R
    󰢃Custom

    View Slide

  21. まとめ
    ● アイコンをComposeのコードにする手法を紹介
    ○ 思ったより簡単
    ● 展望
    ○ CI/CD組んでアイコンの変更を自動で取り込みたい
    ○ Figma plugin作ってみたい
    © 2023 Wantedly, Inc.

    View Slide

  22. Thanks!
    © 2023 Wantedly, Inc.

    View Slide