Skip to content

Instantly share code, notes, and snippets.

@nikolailehbrink
Created December 14, 2022 13:01
Show Gist options
  • Save nikolailehbrink/ac6b052840377bb23b458b2cd783e6fc to your computer and use it in GitHub Desktop.
Save nikolailehbrink/ac6b052840377bb23b458b2cd783e6fc to your computer and use it in GitHub Desktop.
Pseudo-Element with .svg icon that has set width, height and custom color
:after {
content: "";
@apply block w-8 h-8 bg-purple-500;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='1.25' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cline x1='13' y1='18' x2='19' y2='12'%3E%3C/line%3E%3Cline x1='13' y1='6' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E")
no-repeat 50% 50%;
mask-size: cover;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment