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
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>
No results found