SwAdIcon

Ad Placement Four Essentials
Use case: app recommendation grid / horizontal row (page top / middle / bottom, inside list feeds; slotKey e.g. home_icon)
Industry form: Icon ads (a common format in the domestic market; AdSDK format icon)
Visual form: icon + name in a grid (grid) or horizontal row (image) layout
Tracking events: same as banner — adImpression (once on entering the viewport via IntersectionObserver) / adClick; built-in zero-config, silent no-op when the tracker gate is off
Picking the wrong scenario = wrong ad_type / timing in tracking. See Ad Component Selection.

SwAdIcon is the icon ad slot component — an "image-type" self-rendering component of the ad foundation. It supports two layouts: grid (multi-icon grid, e.g. a homepage shortcut row) and image (single icon, e.g. a floating entry). Impression / click tracking is built in.

加载中...

Props

Name	Type	Required	Default	Description
`items`	`SwAdItem[]`	✓	—	Ad creative array
`slotKey`	`string`	✓	—	Ad slot key → `ad_slot_key`
`slotName`	`string`		`undefined`	Ad slot name → `ad_slot_name`
`pageKey`	`string`		`undefined`	Page key → `page_key`
`pageName`	`string`		`undefined`	Page name → `page_name`
`ratio`	`string`		`'1/1'`	Icon aspect ratio, default square
`radius`	`number \| string`		`8`	Corner radius (number = px, string passed to SwImage as-is, e.g. `'1.125rem'`)
`showAdLabel`	`boolean`		`undefined`	"Ad" compliance badge; when not set it follows the global `swiftConfig.ad.showLabel` (default `true`), an explicit value always wins
`layout`	`'grid' \| 'image'`		`'grid'`	Layout: grid / single icon
`gridColumns`	`number \| { mobile?, tablet?, desktop? }`		`5`	`grid` columns. Object form sets per-breakpoint tiers (<768 / 768-1023 / ≥1024), missing tiers fall back to the nearest one (same pattern as SwGallery `columns`)
`minItemWidth`	`number \| string`		`undefined`	Minimum card width. A number is treated as px; a string is passed through as-is (same as `radius` / `gridGap`). When set and `gridColumns` is not, the grid switches to auto-fill flow mode (column count adapts to container width); `gridColumns` takes precedence
`gridGap`	`number \| string`		`8`	Gap (number = px, string used as-is — can reference a token)

Events

Name	Payload	Description
`load`	—	Rendered
`empty`	—	`items` empty
`impression`	`items: SwAdItem[]`	Impression (auto tracking)
`click`	`item: SwAdItem`	Click (auto tracking)
`error`	—	Render / load error

Single-icon mode

layout="image" renders a single icon, suited to a floating campaign entry:

加载中...

<!-- Grid shortcut row -->
<SwAdIcon :items="icons" slot-key="home_kingkong" :grid-columns="5" :radius="12" />

<!-- Responsive columns: 4 on mobile / 6 on tablet / 8 on desktop -->
<SwAdIcon :items="icons" slot-key="home_kingkong" :grid-columns="{ mobile: 4, tablet: 6, desktop: 8 }" />

<!-- Flow mode: no locked column count, each card at least 72px wide, columns adapt to container width -->
<SwAdIcon :items="icons" slot-key="home_kingkong" :min-item-width="72" />

<!-- gridGap / radius accept strings: tokens / rem -->
<SwAdIcon :items="icons" slot-key="home_kingkong" grid-gap="0.75rem" radius="1.125rem" />

<!-- Floating single-icon entry -->
<SwAdIcon :items="[entry]" slot-key="float_entry" layout="image" :radius="12" />

CSS variables

Layout is no longer inline style — everything lands as CSS variables, so business CSS can override the layout with plain rules, no !important needed:

Variable	Default	Description
`--sw-ad-icon-gap`	`8px`	Grid / row gap (maps to `gridGap`)
`--sw-ad-icon-cols-mobile` / `--sw-ad-icon-cols-tablet` / `--sw-ad-icon-cols-desktop`	`5`	Grid column count per breakpoint (maps to `gridColumns`)
`--sw-ad-icon-min`	—	Minimum card width in flow mode (maps to `minItemWidth`, flow mode only)
`--sw-ad-icon-item-width`	`4.5rem`	Card width of the `layout="image"` horizontal row

Caveats

grid columns are set by gridColumns (number or breakpoint object); setting minItemWidth without gridColumns switches to auto-fill flow mode.
image mode ignores gridColumns / minItemWidth; gridGap still applies. With multiple icons the items don't shrink (flex: 0 0 auto) so overflow scrolls horizontally; tune card width via --sw-ad-icon-item-width.
Tracking is built in and gated.