currentColor · CSS theming

SVG fill/stroke에 **currentColor**를 쓰면 부모의 CSS color로 아이콘 테마가 바뀝니다.

데모에서 볼 것

• toolbar color — 부모 color 변경
• A/B/C 세 개 SVG — currentColorAttributes("both") (fill+stroke)
• readout: parent { color: … } + attrs JSON

API

import { currentColorAttributes } from "svg-matrix-core";

currentColorAttributes("fill");
// { fill: "currentColor" }

currentColorAttributes("stroke");
// { fill: "none", stroke: "currentColor", "stroke-width": "2" }

currentColorAttributes("both");
// fill + stroke currentColor

CSS

.btn-icon { color: var(--text-primary); }
.btn-icon:hover { color: var(--accent); }

<span class="btn-icon" style="color:#2563eb">
  <svg>… fill="currentColor" …</svg>
</span>

color는 상속 — 루트 한 곳만 바꿔도 <use> 자식에 전파 (046).

vs 하드코딩 hex

Core API

관련

• 046 · 049 · 045

오늘의 핵심

디자인 시스템 tint = SVG 안 hex 대신 currentColor + CSS color.