@onekeyfe/react-native-native-list 6.7.0-alpha.415 → 6.7.0-alpha.421

package/docs/SPEC.md

@@ -1,5 +1,50 @@
 # NativeList contract
 
+## Shared image SVG integration — Implemented
+
+Static icons use the image package's named resources and SVG implementation:
+the main registry, Activity's ten private glyphs, Market stars/recognized badge,
+Media fallback and Android checkbox. The closed per-platform coverage, including
+the main-line asset-list additions, is recorded under Built-in icon metadata
+generation; unknown-name text fallbacks remain. The NativeList-only legacy name
+`BadgeVerifiedSolid` resolves to canonical `BadgeRecognizedSolid`. Circle and
+dynamic charts/spinners/dotted decoration remain local primitives.
+
+Each iOS glyph slot owns a request owner and revision, including overlays and
+UIButton states. Final graphical identity (name, raster geometry/scale and render
+strategy) controls requests. A private synchronous bind transaction preserves
+both an identical pending request and a ready raster across reset/rebind calls;
+changed or empty identities cancel and clear. Only the current attached revision
+may apply a completion. Detach, reuse and raster geometry changes invalidate
+ownership. UIKit template tint changes reuse the immutable mask. UIButton states
+share one decode, retaining template/original and disabled tint/alpha/action
+behavior. Name validity and descriptor geometry control visibility, layout and
+touch bounds; image availability does not control them.
+Detached binds and auto-height measurement use only known intrinsic metadata;
+they MUST NOT submit named requests or read/decode SVG resources. Initial attach
+starts loading without changing the measured glyph or button dimensions.
+
+iOS original brand/opacity modes and the size overload's always-template behavior
+remain. Android named glyphs preserve their source aspect ratio, fit both source
+dimensions within the view and optional glyph-size limit, and center the result
+on both axes. This includes the non-square 16 × 20 Apple artwork; it MUST NOT
+extend beyond the view. Checkboxes retain their 16 dp glyph plus 2 dp border
+offset in selector geometry, otherwise 80 percent centered geometry. Shared images are immutable; no cross-view mutable
+Drawable bounds or pixel changes are allowed. Named work uses image's existing
+two-worker and bounded cache service. Web consumers use its pure DOM external-icon
+helper while keeping inherited color, action labels, anchors and exact sizes.
+
+Acceptance must cover actual slots, first bind and repeated row reuse, unknown
+and empty inputs, detach/reattach, resize/tint changes, both UIButton states,
+checkboxes, Apple, original brands, legacy badge, and Web/desktop menus. All
+static path readers must be removed from migrated routes; procedural drawings
+and unrelated URI image loading retain their existing ownership.
+
+`NativeListRiskAccessoryTest` checks fractional and integral glyph bounds,
+portrait/landscape sources, rectangular slots and both glyph-size scaling modes.
+Its raw-SVG alpha comparison uses integral destination edges to isolate color
+semantics from fractional bitmap interpolation.
+
 This is the entry point for the package's behavioral contract. The linked
 documents are part of this spec; implementation status is separate from target
 architecture and runtime evidence.
@@ -51,6 +96,55 @@ ordinary press for that gesture. Motion cancellation, row rebind/recycle,
 disabled state and disposal cancel pending recognition. Trailing accessory
 actions remain independent. Omission preserves existing tap behavior.
 
+### Native Swap token menu backport
+
+Status: implemented in local native source, unreleased. Native build and runtime
+acceptance are separate checks. Web and Desktop layout and actions stay unchanged;
+their generated icon artwork is covered in the following section.
+
+iOS and Android render `DotVerSolid` with the app's existing 24-unit solid icon
+geometry. On Android, exactly two identity trailing accessories consisting of
+`valuePair` followed by an `icon` named `DotVerSolid` with `actionKey: 'menu'`
+lay out horizontally, matching iOS. Other icon names or action keys retain the
+existing axis rules. This backport does not change row padding, accessory spacing,
+button dimensions, actions, disabled state, or the public snapshot contract.
+
+`NativeListAccessoryStackTests` checks the iOS image lookup and bound button image.
+`NativeListRiskAccessoryTest` checks Android's actual icon drawing and the target
+horizontal pair, including vertical controls on rebind.
+
+### Built-in icon metadata generation
+
+The closed `scripts/native-list-icons.json` manifest retains platform coverage,
+canonical App source paths and iOS rendering strategy. `Circle` is a local
+primitive. The NativeList-only legacy `BadgeVerifiedSolid` name maps to
+`solid/badge-recognized.svg` / canonical `BadgeRecognizedSolid`, preserving its
+thumbs-up artwork without adding a general alias.
+
+`scripts/generate-icons.mjs --app-root <app-root>` matches each source uniquely
+against image's generated catalog, validates source digests and manifest
+metadata, then emits exactly three small Swift/Kotlin/Web name/geometry tables.
+It writes no SVG, path data or xcassets; image owns the single resource pipeline.
+All validation precedes writes. `--check` is read-only and detects missing or
+ambiguous sources, invalid metadata and stale output. Stable sorting emits no
+machine paths or timestamps. Frozen tests compare exact registry key sets;
+this does not prove that every application-computed name is registered.
+
+The closed manifest contains 43 names with iOS 42, Android 41 and Web 25
+registry entries (including DotVerSolid). Document2Outline, WalletOutline and
+PlusLargeOutline are registered on all three platforms; TicketOutline also
+retains Web and adds native coverage. These main-line names use image-owned
+canonical SVGs, not duplicate NativeList paths or asset catalogs.
+Existing Activity ten-name and Market/Media private call sites resolve canonical
+names through the same DOM helper; their previous coverage does not expand.
+Image preserves raw path order, fill rules, fixed colors, opacity and viewBoxes.
+NativeList retains its layout, button bounds, actions and snapshot interfaces.
+
+Focused SDK fixture acceptance covers native attached lifecycle/rebinding,
+legacy iOS asset comparisons, shared alpha semantics and real Web/Electron
+source/lib consumers. This is not full App, balance, transaction or signed
+release acceptance.
+
 Identity trailing accessories stack vertically, except for the pairs every
 platform lays out side by side: `value` + `checkbox`, `valuePair` + `menu`,
 `valuePair` + an `icon` named `DotVerSolid` whose `actionKey` is `menu`,
@@ -61,13 +155,6 @@ platform lays out side by side: `value` + `checkbox`, `valuePair` + `menu`,
 pair is the Swap token selector's balance column and row menu; stacking it
 clipped both inside the fixed 60dp row on Android.
 
-Icon names are a closed set drawn from the app's 24-unit Icon sources on every
-platform (`iconPaths` on Android, `NativeListIcons.xcassets` on iOS,
-`selectorIcons` on Web); an unmapped name renders an empty slot rather than a
-placeholder. The set includes every name the app's NativeList builders pass,
-including `DotVerSolid`, `Document2Outline`, `WalletOutline`, `PlusLargeOutline`
-and `TicketOutline` (added 2026-10-30 after the OK-66072 audit found them missing
-on native).
 
 A `message` row may opt into `bodyLines: 0`; its complete body wraps within its
 existing text area and determines natural height unless an explicit row or
@@ -1941,6 +2028,23 @@ logo groups retain their4px gap and overlap geometry. No other text-part gaps
 change. Regression acceptance includes Dark/Light recycled visuals, preserved
 network overlays, independent copy actions and Stock hover group spacing.
 
+For token visuals in Web/Electron Market tables, changing only `overlays` MUST
+retain the main image frame, its loaded/error visibility and pending image
+callbacks. Removed overlay images release their pending work. Changes to the
+main image descriptor or other leading-visual fields keep the existing full
+rebind behavior. This is a Web renderer lifecycle rule; it changes neither the
+snapshot schema nor the iOS/Android implementations. Acceptance covers adding,
+replacing and removing overlays before and after image load/failure, including
+consumer row-key changes, and replacing the main image source. Overlay-only
+updates MUST retain the existing circular bitmap clipping of padded square
+badges and their caller-provided geometry.
+Status: implemented on the 6.7.0-alpha.402 publication source. Package DOM
+regressions, the built-module Chromium lifecycle fixture and consuming Electron
+refresh/navigation badge rendering are verified. Consuming Electron acceptance
+also covers a manually locked refresh, user password unlock, first Market entry
+and a complete quote polling cycle. No native implementation or public API
+changes are included.
+
 Gallery collection subtitles retain an 8px trailing text inset whether or not
 a network thumbnail is present. The subtitle uses border-box sizing and its row
 has no extra gap, preserving the same 8px separation with a thumbnail and the
@@ -2036,3 +2140,31 @@ A containing Web pager therefore applies insets, collapse/top commands and route
 restoration to the owned host, with slot content as its padding target. The
 ordinary no-slot viewport and explicit external-host paths keep their existing
 ownership; no Pager dependency or new API is required.
+
+### Shared icon recoloring revision — Implemented; scoped runtime acceptance
+
+Android named glyph slots consume image's typed immutable shape-cache results:
+compatible fixed/single/same-alpha multiple colors update per-view tint without a
+request; new alpha or mixed-color raster requests preserve the last successful
+same-source/geometry bitmap until completion. Name/geometry changes, invalid,
+hidden/detach/recycle clear immediately and revisions reject old callbacks.
+Circle remains local; checkbox rectangles and icon coverage are unchanged.
+Android non-square named glyphs use the aspect-fit geometry defined above.
+iOS retains its existing black template/original request and synchronous retint.
+Web React and DOM use the image package's demand-loaded external per-icon symbol
+URLs, with existing coverage/aliases/action labels and CSS color inheritance.
+
+## Host-owned named resources — Implemented; SDK fixture runtime verified
+
+Image provides decoding and the static Web `#onekey-icon-assets` provider boundary;
+the application owns complete named SVG resources. NativeList keeps its existing
+43-name platform coverage and three generated metadata tables, including its
+legacy `BadgeVerifiedSolid` to canonical `BadgeRecognizedSolid` mapping. No list
+props, naming coverage or rendering strategy changes. Android non-square glyph
+geometry follows the aspect-fit contract above.
+
+The SDK metadata generator validates against the shared 63-sample example/test
+catalog without an App checkout, including raw source digests and viewBox sizes.
+It emits metadata only. Production consumers must supply the complete host icon
+bundle/assets and Web provider; SDK-only fixture tests prove their closed sample
+coverage, while the App's independent generator verifies all 1,909 resources.

package/ios/NativeListAccessoryStack.swift

@@ -1,7 +1,7 @@
 import UIKit
 
 // OneKey patch: explicit summary actions use the source text's physical-pixel line box.
-final class NativeListAccessoryButton: UIButton {
+final class NativeListAccessoryButton: NativeListIconButton {
   var pressedBackgroundColor: UIColor?
   var normalBackgroundColor: UIColor = .clear
   var fixedTextLineHeight: CGFloat?
@@ -197,7 +197,7 @@ final class NativeListAccessoryButton: UIButton {
 final class NativeListAccessoryStack: UIStackView {
   var fonts = NativeListFontFamilies()
   private let accessoryButtons = (0..<2).map { _ in NativeListAccessoryButton(type: .system) }
-  private let checkboxButton = UIButton(type: .system)
+  private let checkboxButton = NativeListIconButton(type: .system)
   private let spinner = UIActivityIndicatorView(style: .medium)
   private var accessoryActions: [(String, NativeSelectionTarget?)] = []
   private var checkboxAction: (String, NativeSelectionTarget?)?
@@ -250,6 +250,8 @@ final class NativeListAccessoryStack: UIStackView {
     checkboxState: (NativeListItem, NativeSelectionTarget?, String) -> String,
     fonts: NativeListFontFamilies
   ) {
+    let iconUpdate = NativeListIconUpdate(self)
+    defer { iconUpdate.finish() }
     self.fonts = fonts
     reset()
     currentItem = item
@@ -501,10 +503,7 @@ final class NativeListAccessoryStack: UIStackView {
       state == "indeterminate"
       ? "CheckboxIndeterminateCustom"
       : "CheckboxCheckedCustom"
-    checkboxButton.setImage(
-      state == "unchecked" ? nil : nativeListIcon(named: glyphName),
-      for: .normal
-    )
+    checkboxButton.bindIcon(state == "unchecked" ? nil : glyphName)
     checkboxButton.tintColor = checkboxIconColor
     // A disabled ListItem already applies 0.5 to its complete content. Avoid
     // multiplying that opacity on the nested control a second time.
@@ -666,16 +665,7 @@ final class NativeListAccessoryStack: UIStackView {
     button.tintColor = tintColor
     let isDecorativeRefresh =
       data.string("name") == "RefreshCcwOutline" && data.string("actionKey").isEmpty
-    let image = isDecorativeRefresh
-      ? nativeListIcon(named: data.string("name"), size: CGSize(width: 16, height: 16))
-      : nativeListIcon(named: data.string("name"))
-    if let image {
-      button.setImage(image, for: .normal)
-      button.setImage(
-        image.withTintColor(tintColor, renderingMode: .alwaysOriginal),
-        for: .disabled
-      )
-    }
+    button.bindIcon(data.string("name"), size: isDecorativeRefresh ? CGSize(width: 16, height: 16) : nil)
     let isDrillIn = data.string("kind") == "chevron"
     let isTertiary = data.string("buttonStyle") == "tertiary"
     if data.string("kind") == "icon" && isTertiary {

package/ios/NativeListDataRowRenderer.swift

@@ -12,7 +12,7 @@ final class NativeListDataRowCell: NativeListRendererCell {
   }
 
   private let visual = NativeListLeadingVisual()
-  private let favorite = UIImageView()
+  private let favorite = NativeListIconImageView()
   private let accessories = NativeListAccessoryStack()
   private let trailingAccessories = NativeListAccessoryStack()
   private let columns = UIStackView()
@@ -51,6 +51,9 @@ final class NativeListDataRowCell: NativeListRendererCell {
     _ item: NativeListItem, theme: [String: Any]?, layout: String,
     checkboxState: (NativeListItem, NativeSelectionTarget?, String) -> String
   ) {
+    let iconUpdate = NativeListIconUpdate(self)
+    defer { iconUpdate.finish() }
+
     let data = item.data
     let style = data.dictionary("style") ?? [:]
     let image = style.dictionary("image") ?? [:]
@@ -64,8 +67,7 @@ final class NativeListDataRowCell: NativeListRendererCell {
     let vp = CGFloat(style.double("verticalPadding", default: layout == "table" ? 10 : 8))
     contentInsets = UIEdgeInsets(top: vp, left: hp, bottom: vp, right: hp)
     favorite.isHidden = !data.bool("favorite") && !data.bool("favoriteActive")
-    favorite.image = nativeListIcon(
-      named: data.bool("favoriteActive") ? "StarSolid" : "StarOutline")
+    favorite.bindIcon(data.bool("favoriteActive") ? "StarSolid" : "StarOutline")
     favorite.tintColor = nativeListColor(
       theme, data.bool("favoriteActive") ? "icon" : "iconSubdued",
       data.bool("favoriteActive") ? "#646464" : "#8D8D8D")
@@ -166,13 +168,18 @@ final class NativeListDataRowCell: NativeListRendererCell {
       NSLayoutConstraint.activate(columnWidthConstraints)
       columnWeights = normalizedWeights
     }
+
   }
   override func bindSelectionContent(
     _ item: NativeListItem,
     checkboxState: (NativeListItem, NativeSelectionTarget?, String) -> String
   ) {
+    let iconUpdate = NativeListIconUpdate(self)
+    defer { iconUpdate.finish() }
+
     accessories.updateSelection(item, checkboxState: checkboxState)
     trailingAccessories.updateSelection(item, checkboxState: checkboxState)
+
   }
   override func recycleContent() {
     visual.recycle()
@@ -185,8 +192,8 @@ final class NativeListDataRowCell: NativeListRendererCell {
 private final class NativeListTableColumnView: UIStackView {
   private let primaryLine = UIStackView()
   private let primaryLabel = NativeListTextLabel()
-  private let titleIconView = UIImageView()
-  private let secondaryTitleIconView = UIImageView()
+  private let titleIconView = NativeListIconImageView()
+  private let secondaryTitleIconView = NativeListIconImageView()
   private let badgesStack = UIStackView()
   private let secondaryLine = UIStackView()
   private let secondaryLeadingLabel = NativeListTextLabel()
@@ -280,7 +287,7 @@ private final class NativeListTableColumnView: UIStackView {
     for (index, descriptor) in descriptors.enumerated() {
       guard let descriptor else { continue }
       let icon = index == 0 ? titleIconView : secondaryTitleIconView
-      icon.image = nativeListIcon(named: descriptor.string("name"))
+      icon.bindIcon(descriptor.string("name"))
       icon.tintColor = UIColor(
         nativeListHex: descriptor.string("tintColor",
           default: theme?["iconSubdued"] as? String ?? "#8D8D8D"),
@@ -303,6 +310,8 @@ private final class NativeListTableColumnView: UIStackView {
     theme: [String: Any]?,
     fonts: NativeListFontFamilies
   ) {
+    let iconUpdate = NativeListIconUpdate(self)
+    defer { iconUpdate.finish() }
     reset()
     let textAlignment: NSTextAlignment
     switch column.string("alignment") {

package/ios/NativeListDesignAssets.swift

@@ -1,8 +1,7 @@
 import CoreText
+import OneKeyImage
 import UIKit
 
-private final class NativeListResourceToken {}
-
 enum NativeListFontWeight {
   case regular
   case medium
@@ -19,19 +18,6 @@ enum NativeListFontWeight {
   }
 }
 
-private enum NativeListResources {
-  static let bundle: Bundle = {
-    let owners = [Bundle(for: NativeListResourceToken.self), .main]
-    for owner in owners {
-      if let url = owner.url(forResource: "NativeListResources", withExtension: "bundle"),
-         let bundle = Bundle(url: url) {
-        return bundle
-      }
-    }
-    return Bundle(for: NativeListResourceToken.self)
-  }()
-}
-
 struct NativeListFontFamilies: Equatable {
   let names: [String: String]
   init(names: [String: String] = [:]) { self.names = names }
@@ -84,76 +70,19 @@ func nativeListTabularFont(
     descriptor: font.fontDescriptor.addingAttributes([.featureSettings: settings]), size: size)
 }
 
-func nativeListIcon(named name: String) -> UIImage? {
-  // OneKey patch: the connection indicator is a solid circle at its requested size.
+func nativeListIconMetadata(named name: String) -> NativeListIconMetadata? {
   if name == "Circle" {
-    return UIGraphicsImageRenderer(size: CGSize(width: 24, height: 24)).image { _ in
-      UIColor.black.setFill()
-      UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: 24, height: 24)).fill()
-    }.withRenderingMode(.alwaysTemplate)
+    return NativeListIconMetadata(name: "Circle", size: CGSize(width: 24, height: 24), original: false)
   }
-  let assetName: String
-  switch name {
-  // OneKey patch: official selector icon geometry.
-  case "AccountErrorCustom": assetName = "onekey_selector_account_error_custom"
-  // OneKey patch: official selector icon geometry.
-  case "CrossedSmallSolid": assetName = "onekey_selector_crossed_small_solid"
-  // OneKey patch: official selector icon geometry.
-  case "AllNetworksSolid": assetName = "onekey_selector_all_networks_solid"
-  // OneKey patch: official selector icon geometry.
-  case "BotIllus": assetName = "onekey_selector_bot_illus"
-  // OneKey patch: official selector icon geometry.
-  case "AppleBrand": assetName = "onekey_selector_apple_brand"
-  // OneKey patch: official selector icon geometry.
-  case "GoogleIllus": assetName = "onekey_selector_google_illus"
-  // OneKey patch: official selector icon geometry.
-  case "LockSolid": assetName = "onekey_selector_lock_solid"
-  // OneKey patch: official selector icon geometry.
-  case "GlobusOutline": assetName = "onekey_selector_globus_outline"
-  case "GasSolid": assetName = "onekey_gas_solid"
-  case "RefreshCcwOutline": assetName = "onekey_refresh_ccw_outline"
-  case "CryptoCoinOutline": assetName = "onekey_crypto_coin_outline"
-  case "ArrowBottomOutline": assetName = "onekey_arrow_bottom"
-  case "ArrowTopOutline": assetName = "onekey_arrow_top"
-  case "ChartTrendingUpOutline": assetName = "onekey_chart_trending_up"
-  case "SwapHorOutline": assetName = "onekey_swap_hor"
-  case "ShieldExclamationOutline": assetName = "onekey_shield_exclamation"
-  case "InfoCircleOutline": assetName = "onekey_info_circle"
-  case "SpeakerPromoteOutline": assetName = "onekey_speaker_promote"
-  case "PlusCircleOutline": assetName = "onekey_plus_circle"
-  case "PlusSmallOutline": assetName = "onekey_plus_small"
-  case "DotHorOutline": assetName = "onekey_dot_hor"
-  case "PencilOutline": assetName = "onekey_pencil"
-  case "MinusCircleSolid": assetName = "onekey_minus_circle_solid"
-  case "MinusCircleOutline": assetName = "onekey_minus_circle"
-  case "ChevronRightSmallOutline": assetName = "onekey_chevron_right_small"
-  case "DragOutline": assetName = "onekey_drag"
-  case "StarOutline": assetName = "onekey_star"
-  case "StarSolid": assetName = "onekey_star_solid"
-  case "BadgeVerifiedSolid": assetName = "onekey_badge_verified_solid"
-  case "ChevronGrabberVerOutline": assetName = "onekey_chevron_grabber_ver"
-  case "ChevronBottomOutline": assetName = "onekey_chevron_bottom"
-  case "ChevronTopOutline": assetName = "onekey_chevron_top"
-  case "CheckboxCheckedCustom": assetName = "onekey_checkbox_checked"
-  case "CheckboxIndeterminateCustom": assetName = "onekey_checkbox_indeterminate"
-  case "ErrorSolid": assetName = "onekey_error_solid"
-  case "QuestionmarkSolid": assetName = "onekey_questionmark_solid"
-  case "ImageSquareWavesOutline": assetName = "onekey_image_square_waves"
-  // Asset-list icons the app passes by name (OK-66072 audit): unmapped names rendered nothing.
-  case "DotVerSolid": assetName = "onekey_dot_ver_solid"
-  case "Document2Outline": assetName = "onekey_document2"
-  case "WalletOutline": assetName = "onekey_wallet"
-  case "PlusLargeOutline": assetName = "onekey_plus_large"
-  case "TicketOutline": assetName = "onekey_ticket"
-  default: return nil
+  if let generated = NativeListGeneratedIcons.icons[name] {
+    return generated
   }
-  return UIImage(named: assetName, in: NativeListResources.bundle, compatibleWith: nil)?
-    .withRenderingMode(["GoogleIllus", "BotIllus", "AccountErrorCustom"].contains(name) ? .alwaysOriginal : .alwaysTemplate)
-}
-
-func nativeListIcon(named name: String, size: CGSize) -> UIImage? {
-  guard let image = nativeListIcon(named: name) else { return nil }
-  return UIGraphicsImageRenderer(size: size).image { _ in
-    image.draw(in: CGRect(origin: .zero, size: size))
-  }.withRenderingMode(.alwaysTemplate)
+  guard let meta = OneKeyNamedSVG.shared.iconMetadata(forName: name) else {
+    return nil
+  }
+  return NativeListIconMetadata(
+    name: name,
+    size: CGSize(width: meta.width, height: meta.height),
+    original: meta.recolorMode == .fixed || meta.recolorMode == .raster
+  )
 }

package/ios/NativeListGeneratedIcons.swift

@@ -0,0 +1,55 @@
+// Generated by scripts/generate-icons.mjs. Coverage and legacy names only; hosts provide SVG resources.
+import UIKit
+
+struct NativeListIconMetadata {
+  let name: String
+  let size: CGSize
+  let original: Bool
+}
+
+enum NativeListGeneratedIcons {
+  static let icons: [String: NativeListIconMetadata] = [
+    "AccountErrorCustom": NativeListIconMetadata(name: "AccountErrorCustom", size: CGSize(width: 18, height: 18), original: true),
+    "AllNetworksSolid": NativeListIconMetadata(name: "AllNetworksSolid", size: CGSize(width: 24, height: 24), original: false),
+    "AppleBrand": NativeListIconMetadata(name: "AppleBrand", size: CGSize(width: 16, height: 20), original: false),
+    "ArrowBottomOutline": NativeListIconMetadata(name: "ArrowBottomOutline", size: CGSize(width: 24, height: 24), original: false),
+    "ArrowTopOutline": NativeListIconMetadata(name: "ArrowTopOutline", size: CGSize(width: 24, height: 24), original: false),
+    "BadgeVerifiedSolid": NativeListIconMetadata(name: "BadgeRecognizedSolid", size: CGSize(width: 24, height: 24), original: false),
+    "BotIllus": NativeListIconMetadata(name: "BotIllus", size: CGSize(width: 24, height: 24), original: true),
+    "ChartTrendingUpOutline": NativeListIconMetadata(name: "ChartTrendingUpOutline", size: CGSize(width: 24, height: 24), original: false),
+    "CheckboxCheckedCustom": NativeListIconMetadata(name: "CheckboxCheckedCustom", size: CGSize(width: 16, height: 16), original: false),
+    "CheckboxIndeterminateCustom": NativeListIconMetadata(name: "CheckboxIndeterminateCustom", size: CGSize(width: 16, height: 16), original: false),
+    "ChevronBottomOutline": NativeListIconMetadata(name: "ChevronBottomOutline", size: CGSize(width: 24, height: 24), original: false),
+    "ChevronGrabberVerOutline": NativeListIconMetadata(name: "ChevronGrabberVerOutline", size: CGSize(width: 24, height: 24), original: false),
+    "ChevronRightSmallOutline": NativeListIconMetadata(name: "ChevronRightSmallOutline", size: CGSize(width: 24, height: 24), original: false),
+    "ChevronTopOutline": NativeListIconMetadata(name: "ChevronTopOutline", size: CGSize(width: 24, height: 24), original: false),
+    "CrossedSmallSolid": NativeListIconMetadata(name: "CrossedSmallSolid", size: CGSize(width: 24, height: 24), original: false),
+    "CryptoCoinOutline": NativeListIconMetadata(name: "CryptoCoinOutline", size: CGSize(width: 24, height: 24), original: false),
+    "Document2Outline": NativeListIconMetadata(name: "Document2Outline", size: CGSize(width: 24, height: 24), original: false),
+    "DotHorOutline": NativeListIconMetadata(name: "DotHorOutline", size: CGSize(width: 24, height: 24), original: false),
+    "DotVerSolid": NativeListIconMetadata(name: "DotVerSolid", size: CGSize(width: 24, height: 24), original: false),
+    "DragOutline": NativeListIconMetadata(name: "DragOutline", size: CGSize(width: 24, height: 24), original: false),
+    "ErrorSolid": NativeListIconMetadata(name: "ErrorSolid", size: CGSize(width: 24, height: 24), original: false),
+    "GasSolid": NativeListIconMetadata(name: "GasSolid", size: CGSize(width: 24, height: 24), original: false),
+    "GlobusOutline": NativeListIconMetadata(name: "GlobusOutline", size: CGSize(width: 24, height: 24), original: false),
+    "GoogleIllus": NativeListIconMetadata(name: "GoogleIllus", size: CGSize(width: 24, height: 24), original: true),
+    "ImageSquareWavesOutline": NativeListIconMetadata(name: "ImageSquareWavesOutline", size: CGSize(width: 24, height: 24), original: false),
+    "InfoCircleOutline": NativeListIconMetadata(name: "InfoCircleOutline", size: CGSize(width: 24, height: 24), original: false),
+    "LockSolid": NativeListIconMetadata(name: "LockSolid", size: CGSize(width: 24, height: 24), original: false),
+    "MinusCircleOutline": NativeListIconMetadata(name: "MinusCircleOutline", size: CGSize(width: 24, height: 24), original: false),
+    "MinusCircleSolid": NativeListIconMetadata(name: "MinusCircleSolid", size: CGSize(width: 24, height: 24), original: false),
+    "PencilOutline": NativeListIconMetadata(name: "PencilOutline", size: CGSize(width: 24, height: 24), original: false),
+    "PlusCircleOutline": NativeListIconMetadata(name: "PlusCircleOutline", size: CGSize(width: 24, height: 24), original: false),
+    "PlusLargeOutline": NativeListIconMetadata(name: "PlusLargeOutline", size: CGSize(width: 24, height: 24), original: false),
+    "PlusSmallOutline": NativeListIconMetadata(name: "PlusSmallOutline", size: CGSize(width: 24, height: 24), original: false),
+    "QuestionmarkSolid": NativeListIconMetadata(name: "QuestionmarkSolid", size: CGSize(width: 24, height: 24), original: false),
+    "RefreshCcwOutline": NativeListIconMetadata(name: "RefreshCcwOutline", size: CGSize(width: 24, height: 24), original: false),
+    "ShieldExclamationOutline": NativeListIconMetadata(name: "ShieldExclamationOutline", size: CGSize(width: 24, height: 24), original: false),
+    "SpeakerPromoteOutline": NativeListIconMetadata(name: "SpeakerPromoteOutline", size: CGSize(width: 24, height: 24), original: false),
+    "StarOutline": NativeListIconMetadata(name: "StarOutline", size: CGSize(width: 24, height: 24), original: false),
+    "StarSolid": NativeListIconMetadata(name: "StarSolid", size: CGSize(width: 24, height: 24), original: false),
+    "SwapHorOutline": NativeListIconMetadata(name: "SwapHorOutline", size: CGSize(width: 24, height: 24), original: false),
+    "TicketOutline": NativeListIconMetadata(name: "TicketOutline", size: CGSize(width: 24, height: 24), original: false),
+    "WalletOutline": NativeListIconMetadata(name: "WalletOutline", size: CGSize(width: 24, height: 24), original: false),
+  ]
+}

package/ios/NativeListIconBinding.swift

@@ -0,0 +1,171 @@
+import OneKeyImage
+import UIKit
+
+/// One request owner per glyph slot; metadata also supplies detached measurement.
+private final class NativeListIconBinding {
+  private weak var view: UIView?
+  private let owner = NSObject()
+  private let apply: (UIImage?) -> Void
+  private var descriptor: NativeListIconMetadata?
+  private var pointSize = CGSize.zero
+  private var template = true
+  private var sizeOverride: CGSize?
+  private var currentImage: UIImage?
+  private var placeholder: UIImage?
+  private var updateDepth = 0
+  private var pendingClear = false
+  private var revision: UInt64 = 0
+  private var identity: String?
+
+  init(view: UIView, apply: @escaping (UIImage?) -> Void) { self.view = view; self.apply = apply }
+
+  func bind(_ name: String?, size: CGSize? = nil) {
+    guard let name, let metadata = nativeListIconMetadata(named: name) else {
+      clearNow(); return
+    }
+    if descriptor?.name == metadata.name, descriptor?.original == metadata.original,
+      descriptor?.size == metadata.size, sizeOverride == size {
+      pendingClear = false
+      apply(currentImage)
+      refresh(); return
+    }
+    clearNow()
+    descriptor = metadata
+    pointSize = size ?? metadata.size
+    sizeOverride = size
+    template = size != nil || !metadata.original
+    let format = UIGraphicsImageRendererFormat(); format.scale = 1
+    placeholder = UIGraphicsImageRenderer(size: pointSize, format: format).image { _ in }
+      .withRenderingMode(template ? .alwaysTemplate : .alwaysOriginal)
+    currentImage = placeholder
+    apply(currentImage)
+    refresh()
+  }
+
+  func clear(display: Bool = true) {
+    if display, updateDepth > 0 {
+      pendingClear = true; apply(nil); return
+    }
+    clearNow(display: display)
+  }
+
+  private func clearNow(display: Bool = true) {
+    revision &+= 1; identity = nil; descriptor = nil; currentImage = nil; placeholder = nil
+    pendingClear = false
+    OneKeyNamedSVG.shared.cancel(owner: owner)
+    if display { apply(nil) }
+  }
+
+  func beginUpdate() { updateDepth += 1 }
+  func endUpdate() {
+    updateDepth -= 1
+    guard updateDepth == 0 else { return }
+    if pendingClear { clearNow() } else { refresh() }
+  }
+
+  func retint() { if descriptor != nil && !pendingClear { apply(currentImage) } }
+
+  func refresh(force: Bool = false) {
+    guard updateDepth == 0, let view, let descriptor else { return }
+    let attached = view.window != nil && !view.isHidden && !view.bounds.isEmpty
+    let screenScale = max(1, view.window?.screen.scale ?? view.traitCollection.displayScale)
+    let fit = min(view.bounds.width / pointSize.width, view.bounds.height / pointSize.height)
+    let rasterScale = ceil(screenScale * max(1, fit))
+    let next = "\(descriptor.name)|\(pointSize)|\(rasterScale)|\(screenScale)|\(attached)|\(template)"
+    guard force || next != identity else { return }
+    identity = next; revision &+= 1
+    let generation = revision
+    OneKeyNamedSVG.shared.cancel(owner: owner)
+    currentImage = placeholder
+    apply(currentImage)
+    guard attached else { return }
+    if descriptor.name == "Circle" {
+      let image = UIGraphicsImageRenderer(size: pointSize).image { _ in
+        UIColor.black.setFill(); UIBezierPath(ovalIn: CGRect(origin: .zero, size: pointSize)).fill()
+      }
+      currentImage = image.withRenderingMode(.alwaysTemplate); apply(currentImage); return
+    }
+    let sourceSize = descriptor.size
+    let sourceScale = sizeOverride == nil ? rasterScale : ceil(rasterScale * max(pointSize.width / sourceSize.width, pointSize.height / sourceSize.height))
+    let pixelWidth = ceil(sourceSize.width * sourceScale), pixelHeight = ceil(sourceSize.height * sourceScale)
+    guard pixelWidth.isFinite, pixelHeight.isFinite, pixelWidth > 0, pixelHeight > 0,
+      pixelWidth <= 4096, pixelHeight <= 4096, pixelWidth * pixelHeight <= 4_194_304 else { return }
+    OneKeyNamedSVG.shared.request(owner: owner, name: descriptor.name, color: "rgba(0,0,0,1)",
+      width: Int(pixelWidth), height: Int(pixelHeight),
+      scale: screenScale) { [weak self] image in
+      guard let self, self.revision == generation, let view = self.view,
+        view.window != nil, !view.isHidden else { return }
+      guard let cgImage = image?.cgImage else { return }
+      var result = UIImage(cgImage: cgImage, scale: sourceScale, orientation: .up)
+      if let size = self.sizeOverride {
+        let format = UIGraphicsImageRendererFormat(); format.scale = rasterScale
+        result = UIGraphicsImageRenderer(size: size, format: format).image { _ in
+          result.draw(in: CGRect(origin: .zero, size: size))
+        }
+      }
+      self.currentImage = result.withRenderingMode(self.template ? .alwaysTemplate : .alwaysOriginal)
+      self.apply(self.currentImage)
+    }
+  }
+
+  deinit { OneKeyNamedSVG.shared.cancel(owner: owner) }
+}
+
+final class NativeListIconImageView: UIImageView {
+  private var applying = false
+  private lazy var iconBinding = NativeListIconBinding(view: self) { [weak self] image in
+    guard let self else { return }
+    self.applying = true; self.image = image; self.applying = false
+  }
+  func bindIcon(_ name: String?, size: CGSize? = nil) { iconBinding.bind(name, size: size) }
+  func beginIconUpdate() { iconBinding.beginUpdate() }
+  func endIconUpdate() { iconBinding.endUpdate() }
+  override var image: UIImage? { didSet { if !applying { iconBinding.clear(display: image == nil) } } }
+  override var isHidden: Bool { didSet { iconBinding.refresh() } }
+  override func layoutSubviews() { super.layoutSubviews(); iconBinding.refresh() }
+  override func didMoveToWindow() { super.didMoveToWindow(); iconBinding.refresh() }
+  override func tintColorDidChange() { super.tintColorDidChange(); iconBinding.retint() }
+  override func traitCollectionDidChange(_ previous: UITraitCollection?) {
+    super.traitCollectionDidChange(previous); iconBinding.refresh()
+  }
+}
+
+class NativeListIconButton: UIButton {
+  private var applying = false
+  private lazy var iconBinding = NativeListIconBinding(view: self) { [weak self] image in
+    guard let self else { return }
+    self.applying = true
+    self.setImage(image, for: .normal)
+    self.setImage(image?.withTintColor(self.tintColor, renderingMode: .alwaysOriginal), for: .disabled)
+    self.applying = false
+  }
+  func bindIcon(_ name: String?, size: CGSize? = nil) { iconBinding.bind(name, size: size) }
+  func beginIconUpdate() { iconBinding.beginUpdate() }
+  func endIconUpdate() { iconBinding.endUpdate() }
+  override func setImage(_ image: UIImage?, for state: UIControl.State) {
+    if !applying && state == .normal { iconBinding.clear(display: image == nil) }
+    super.setImage(image, for: state)
+  }
+  override var isHidden: Bool { didSet { iconBinding.refresh() } }
+  override func layoutSubviews() { super.layoutSubviews(); iconBinding.refresh() }
+  override func didMoveToWindow() { super.didMoveToWindow(); iconBinding.refresh() }
+  override func tintColorDidChange() { super.tintColorDidChange(); iconBinding.retint() }
+  override func traitCollectionDidChange(_ previous: UITraitCollection?) {
+    super.traitCollectionDidChange(previous); iconBinding.refresh()
+  }
+}
+
+/// A synchronous renderer bind may clear then restore the same glyph descriptor.
+final class NativeListIconUpdate {
+  private var images: [NativeListIconImageView] = []
+  private var buttons: [NativeListIconButton] = []
+  init(_ root: UIView) {
+    func collect(_ view: UIView) {
+      if let image = view as? NativeListIconImageView { images.append(image); image.beginIconUpdate() }
+      if let button = view as? NativeListIconButton { buttons.append(button); button.beginIconUpdate() }
+      view.subviews.forEach(collect)
+    }
+    collect(root)
+  }
+  func finish() { images.forEach { $0.endIconUpdate() }; buttons.forEach { $0.endIconUpdate() } }
+}