Color Changable SVG as background images
* SVG Icon Generatior
* Accept hex color only
* Use as background-image: url(svgIconName(#hex-code));
Last active
September 29, 2022 19:00
-
-
Save iamsaief/e65b5f6a40c832a65742887418102fed to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * SVG Icon Generatior | |
| * Accept hex color only | |
| * Use as background-image: url(svgIconName(#hex-code)); | |
| */ | |
| @function svgIconClose($color: #010101) { | |
| $hexColor: '%23' + str-slice('#{$color}', 2, -1); | |
| @return "data:image/svg+xml,%3Csvg width='32' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Z' stroke='#{$hexColor}' stroke-width='1.5' stroke-miterlimit='10'/%3E%3Cpath d='m20 12-8 8M20 20l-8-8' stroke='#{$hexColor}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment