ondras · January 21, 2026 09:31
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <style>
      li {
        display: flex;
        align-items: center;
        gap: 8px;
 	  }

      [data-icon]::before {
        content: "";
        width: 30px;
        height: 30px;
      }

      [data-color=original] {
        [data-icon=circle]::before { background-image: url(library.svg#circle); }
        [data-icon=square]::before { background-image: url(library.svg#square); }
      }

      [data-color=lime] {
        [data-icon]::before { background-color: lime; }
        [data-icon=circle]::before { mask-image: url(library.svg#circle); }
        [data-icon=square]::before { mask-image: url(library.svg#square); }
      }
    </style>
  </head>
  <body>
    <h2>Original colors</h2>
    <ul data-color="original">
      <li data-icon="circle">Item with circle icon</li>
      <li data-icon="square">Item with square icon</li>
    </ul>

    <h2>Lime colors</h2>
    <ul data-color="lime">
      <li data-icon="circle">Item with circle icon</li>
      <li data-icon="square">Item with square icon</li>
    </ul>
 </body>
 </html>
diff --git a/library.svg b/library.svg
 <svg xmlns="http://www.w3.org/2000/svg">
 	<style>use:not(:target) {display: none}</style>

 	<symbol id="circle-def" viewBox="0 0 20 20">
 		<circle cx="10" cy="10" r="8" fill="red" />
 	</symbol>

 	<symbol id="square-def" viewBox="0 0 50 50">
 		<path d="M 10 10 v 30 h 30 v -30 Z" stroke="blue" fill="none" stroke-width="5" />
 	</symbol>

 	<use href="#circle-def" id="circle" />
 	<use href="#square-def" id="square" />
 </svg>
diff --git a/requirements.md b/requirements.md
	<!doctype html>
	<html>
	<head>
	<style>
	li {
	display: flex;
	align-items: center;
	gap: 8px;
	}

	[data-icon]::before {
	content: "";
	width: 30px;
	height: 30px;
	}

	[data-color=original] {
	[data-icon=circle]::before { background-image: url(library.svg#circle); }
	[data-icon=square]::before { background-image: url(library.svg#square); }
	}

	[data-color=lime] {
	[data-icon]::before { background-color: lime; }
	[data-icon=circle]::before { mask-image: url(library.svg#circle); }
	[data-icon=square]::before { mask-image: url(library.svg#square); }
	}
	</style>
	</head>
	<body>
	<h2>Original colors</h2>
	<ul data-color="original">
	<li data-icon="circle">Item with circle icon</li>
	<li data-icon="square">Item with square icon</li>
	</ul>

	<h2>Lime colors</h2>
	<ul data-color="lime">
	<li data-icon="circle">Item with circle icon</li>
	<li data-icon="square">Item with square icon</li>
	</ul>
	</body>
	</html>
	<svg xmlns="http://www.w3.org/2000/svg">
	<style>use:not(:target) {display: none}</style>

	<symbol id="circle-def" viewBox="0 0 20 20">
	<circle cx="10" cy="10" r="8" fill="red" />
	</symbol>

	<symbol id="square-def" viewBox="0 0 50 50">
	<path d="M 10 10 v 30 h 30 v -30 Z" stroke="blue" fill="none" stroke-width="5" />
	</symbol>

	<use href="#circle-def" id="circle" />
	<use href="#square-def" id="square" />
	</svg>