# Asset Hash Busting

> Use when Icon or SVG sprite components fetch sprites.svg repeatedly causing excessive bandwidth, or when asset() is called inside a component render function for a constant URL.

- Skill: `decocms/asset-hash-busting` (Agent Skill)
- Install (CLI): `npx skillmds@latest add decocms/asset-hash-busting`
- Raw SKILL.md: https://api.skillmd.com/api/skills/decocms/asset-hash-busting/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: decocms (https://skillmd.com/u/decocms)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/decocms/asset-hash-busting

---


# SVG Sprites — prevent repeated fetch loop

## Problem

Calling `asset()` inside the component body recomputes the URL on every render. Since `<Icon>` is rendered once per icon on the page, each instance triggers a separate fetch to `sprites.svg` — causing the sprite file to be downloaded repeatedly in a loop instead of once.

```tsx
// ❌ recomputed on every <Icon> render
function Icon({ id }: Props) {
  const spritesUrl = asset("/sprites.svg");
  return <svg><use href={`${spritesUrl}#${id}`} /></svg>;
}
```

## Fix — hoist to module level

```tsx
// ✅ computed once, shared across all renders
const spritesUrl = asset("/sprites.svg");

function Icon({ id }: Props) {
  return <svg><use href={`${spritesUrl}#${id}`} /></svg>;
}
```

## General rule

Any `asset()` call whose result does not depend on props belongs outside the component.