# graphicHostStyle

> The flex-item layout and current-color declarations shared by a leading graphic slot — whichever of an icon or a loading graphic currently occupies that slot — so the two stay laid out identically and a host can swap between them without the rest of its layout shifting.

```ts
import { graphicHostStyle } from "@sdxc/ui/styles";
```

A shrink-resistant, nudged-down, current-colored mixin for a leading
graphic slot, keeping an icon and a loading graphic laid out identically.
`fg("currentcolor")` matches `@sdxc/u`'s case-normalized token lookup.

## Signature

```ts
graphicHostStyle<Node extends Element = Element>(): MixinDescriptor<
	Node,
	[styles: CSSStyles],
	ElementProps
>
```

Returns: A `css()` mixin ready for a host element's `mix` prop.

## Examples

```tsx
<div data-slot="icon" mix={[graphicHostStyle(), css({ ...ownStyles })]}>
  <CircleCheckIcon />
</div>;
```