How to add thumbnail/Icon for my forge app with custom UI static resource?

Forge Forge UI Kit and Custom UI
1

Hi all, I’m currently trying to add icon and thumbnail for my app but I can’t figure how.
My app using React so my manifest look like this:

modules:
  jira:globalPage:
    - key: app-main-page
      title: my-first-app
      resource: main
      icon: https://i.ibb.co/gLR2CqLd/stitch-Icon-150.png
      resolver:
        function: resolver
  jira:dashboardGadget:
    - key: my-first-app-dashboard-gadget
      title: my-first-app
      description: some app
      thumbnail: src_ui/static/stitch-logo.png
      resource: main
      resolver:
        function: resolver
      edit:
        resource: main
  function:
    - key: resolver
      handler: index.handler
resources:
  - key: main
    path: src_ui/dist

and my folder structure look like this:

my-forge-app/
├── src/
│   ├── app/
│   │   ├── dist/           # Built React app
│   └── static/             # Static assets (like images)
│       ├── logo.png        # App logo
│       ├── thumbnail.png   # App thumbnail
└── manifest.yml

I have no problem using external link for gadget thumbnail and app icon. But I’m trying to deploy my app with local image in code.

2

You need to declare a new resource in your manifest and reference it when declaring your icon.

modules:
  jira:globalPage:
    - key: app-main-page
      title: my-first-app
      resource: main
      icon: resource:static;logo.png
resources:
  - key: static
    path: src/app/static

Docs: https://developer.atlassian.com/platform/forge/extend-ui-with-custom-options/#icons