Step1 Manage Icons

ui/core/static/index.slint

set icon type and icon collection

set tabbar icon, header icon and popover icon struct to import icons

finally, use IIcons struct to export in ROOT_GLOBAL, then we can use in slint components

#![allow(unused)]
fn main() {
export struct TabbarIconType {
    clicked: image,
    unclicked: image
}

export struct TabbarIcon {
    email: TabbarIconType,
    calendar: TabbarIconType,
    source: TabbarIconType,
    more: TabbarIconType,
    file: TabbarIconType,
    connection: TabbarIconType,
}
export struct HeaderIcon {
    remind: image,
    search: image,
}

export struct PopoverIcon {
   email: image,
   unread: image,
   flag: image,
   pin: image,
   person: image,
   link: image,
   at: image,
}

export struct IIcons {
    tabbar: TabbarIcon,
    header: HeaderIcon,
    logo: image,
    popover: PopoverIcon,
}
}

ui/core/index.slint

export * from "./static/index.slint";

ui/global.slint

In ROOT_GLOBAL, use @image-url() to import needed icons

#![allow(unused)]
fn main() {
import { IIcons } from "./core/index.slint";

//! global styles
export global ROOT_GLOBAL {
  // ...
  out property <IIcons> icons: {
    tabbar: {
      email: {
        clicked: @image-url("./assets/tabbar/email.svg"),
        unclicked: @image-url("./assets/tabbar/email_unclicked.svg"),
      },
      calendar: {
        clicked: @image-url("./assets/tabbar/calendar.svg"),
        unclicked: @image-url("./assets/tabbar/calendar_unclicked.svg"),
      },
      source: {
        clicked: @image-url("./assets/tabbar/source.svg"),
        unclicked: @image-url("./assets/tabbar/source_unclicked.svg"),
      },
      more: {
        clicked: @image-url("./assets/tabbar/more.svg"),
        unclicked: @image-url("./assets/tabbar/more_unclicked.svg"),
      },
      file: {
        clicked: @image-url("./assets/tabbar/file.svg"),
        unclicked: @image-url("./assets/tabbar/file_unclicked.svg"),
      },
      connection: {
        clicked: @image-url("./assets/tabbar/connection.svg"),
        unclicked: @image-url("./assets/tabbar/connection_unclicked.svg"),
      },
    },
    header: {
      remind: @image-url("./assets/header/remind.svg"),
      search: @image-url("./assets/header/search.svg"),
    },
    logo: @image-url("./assets/logo.svg"),
    popover: {
      email: @image-url("./assets/tabbar/email_unclicked.svg"),
      unread: @image-url("./assets/popover/unread-email.svg"),
      flag: @image-url("./assets/popover/flag.svg"),
      pin: @image-url("./assets/popover/pin.svg"),
      person: @image-url("./assets/popover/person.svg"),
      link: @image-url("./assets/popover/link.svg"),
      at: @image-url("./assets/popover/at-sign.svg"),
    }
  };
}
}