`background-color` で [[currentcolor (CSS)|currentcolor]] の役割を持ち、[[SVG]]を塗りつぶしているような挙動をしている。
```css
.hoge {
/* 中略 */
}
.hoge::before {
/* サイズ指定 */
background-size: 18px 18px;
width: 18px;
height: 18px;
margin-right: 2px;
/* ここからが重要 */
display: inline-block;
content: "";
background-color: var(--color);
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 32 32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-crown-icon lucide-crown'><path d='M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z'/><path d='M5 21h14'/></svg>");
}
```
> [!caution]
> ストロークや塗りつぶしが複数存在するケースは上手くできないかも...
> [!unresolved]
> ちゃんと理解はできていない...