Skip to content

Instantly share code, notes, and snippets.

@joar

joar/magic-icon.svg

Last active February 13, 2019 06:35
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joar/acd2f788110f5d41ad6553fbec0ea576 to your computer and use it in GitHub Desktop.
Save joar/acd2f788110f5d41ad6553fbec0ea576 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
magic-icon.svg
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<style>
.filled {
fill: context-fill #0c0c0c;
}
.icon {
opacity: 0;
}
@media all and (max-width: 16px) {
#icon-16 { opacity: 1; }
}
@media all and (max-width: 20px) and (min-width: 17px) {
#icon-20 { opacity: 1; }
}
@media all and (min-width: 24px) {
#icon-24 { opacity: 1; }
}</style><g class="icon" id="icon-16" transform="matrix(1.5714285714285714 0 0 1.5714285714285714 -0.36363636363636365 -0.36363636363636365)">
<path class="filled" d="M12,1H4C2.346,1,1,2.346,1,4v8c0,1.654,1.346,3,3,3h8c1.654,0,3-1.346,3-3V4C15,2.346,13.654,1,12,1z M3,4 c0-0.551,0.449-1,1-1h8c0.552,0,1,0.449,1,1v2H4C3.5,6,3,5.5,3,5V4z M7,10c-0.5,0-1-0.5-1-1H5.99V7H13v3H7z M12,13h-2 c-0.5,0-1-0.5-1-1v-1h4v1C13,12.552,12.552,13,12,13z" />
<circle class="filled" cx="4.5" cy="4.5" r="0.5" />
<circle class="filled" cx="7.5" cy="8.5" r="0.5" />
<circle class="filled" cx="10.5" cy="12" r="0.5" />
</g>
<g class="icon" id="icon-20" transform="matrix(1.2222222222222223 0 0 1.2222222222222223 -0.18181818181818188 -0.18181818181818188)">
<path class="filled" d="M16,1H4C2.346,1,1,2.346,1,4v12c0,1.654,1.346,3,3,3h12c1.654,0,3-1.346,3-3V4C19,2.346,17.654,1,16,1z M8,12c-0.5,0-1-0.5-1-1V8h10v4H8z M3,4c0-0.551,0.449-1,1-1h12c0.552,0,1,0.449,1,1v3H4C3.5,7,3,6.5,3,6V4z M16,17h-4 c-0.5,0-1-0.5-1-1v-3h6v3C17,16.552,16.552,17,16,17z" />
<circle class="filled" cx="5" cy="5" r="1" />
<circle class="filled" cx="9" cy="10" r="1" />
<circle class="filled" cx="13" cy="15" r="1" />
</g>
<g class="icon" id="icon-24" transform="matrix(1.0 0 0 1.0 -0.0 -0.0)">
<path class="filled" d="M20,1H4C2.346,1,1,2.346,1,4v16c0,1.654,1.346,3,3,3h16c1.654,0,3-1.346,3-3V4C23,2.346,21.654,1,20,1z M9,15c-0.5,0-1-0.5-1-1v-4h13v5H9z M3,4c0-0.551,0.449-1,1-1h16c0.552,0,1,0.449,1,1v5H4C3.5,9,3,8.5,3,8V4z M20,21h-6 c-0.5,0-1-0.5-1-1v-4h8v4C21,20.552,20.552,21,20,21z" />
<circle class="filled" cx="6" cy="6" r="1" />
<circle class="filled" cx="11" cy="12.375" r="1" />
<circle class="filled" cx="16" cy="18.5" r="1" />
</g>
</svg>
Raw
magic-test.html
<!doctype html>
<html>
<head>
<style>
div {
--bg-color: white;
--fg-color: black;
padding: 5px 10px;
background-color: var(--bg-color);
color: var(--fg-color);
}
.default img {
-moz-context-properties: none;
}
.dark {
--bg-color: black;
--fg-color: #f9f9fa;
}
.colorful {
--fg-color: red;
}
img {
-moz-context-properties: fill;
fill: currentColor;
border: thin solid var(--fg-color);
}
.img-32 { width: 32px; }
.img-24 { width: 24px; }
.img-20 { width: 20px; }
.img-16 { width: 16px; }
</style>
</head>
<body>
<div class="default">
<p>Without -moz-context-properties:</p>
<img class="img-24" src="magic-icon.svg">
<img class="img-20" src="magic-icon.svg">
<img class="img-16" src="magic-icon.svg">
<img class="img-32" src="magic-icon.svg">
</div>
<div class="dark">
<p>Dark theme</p>
<img class="img-24" src="magic-icon.svg">
<img class="img-20" src="magic-icon.svg">
<img class="img-16" src="magic-icon.svg">
<img class="img-32" src="magic-icon.svg">
</div>
<div class="light">
<p>Light theme</p>
<img class="img-24" src="magic-icon.svg">
<img class="img-20" src="magic-icon.svg">
<img class="img-16" src="magic-icon.svg">
<img class="img-32" src="magic-icon.svg">
</div>
<div class="colorful">
<p>Arbitrary foreground</p>
<img class="img-24" src="magic-icon.svg">
<img class="img-20" src="magic-icon.svg">
<img class="img-16" src="magic-icon.svg">
<img class="img-32" src="magic-icon.svg">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment