Inline SVG function [SASS]
// Replace letters | |
@function str-replace($string, $search, $replace: '') { | |
$index: str-index($string, $search); | |
@if $index { | |
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); | |
} | |
@return $string; | |
} | |
// Encode symbols | |
@function url-encode($string) { | |
$map: ( | |
"%": "%25", | |
"<": "%3C", | |
">": "%3E", | |
" ": "%20", | |
"!": "%21", | |
"*": "%2A", | |
"'": "%27", | |
'"': "%22", | |
"(": "%28", | |
")": "%29", | |
";": "%3B", | |
":": "%3A", | |
"@": "%40", | |
"&": "%26", | |
"=": "%3D", | |
"+": "%2B", | |
"$": "%24", | |
",": "%2C", | |
"/": "%2F", | |
"?": "%3F", | |
"#": "%23", | |
"[": "%5B", | |
"]": "%5D" | |
); | |
$new: $string; | |
@each $search, $replace in $map { | |
$new: str-replace($new, $search, $replace); | |
} | |
@return $new; | |
} | |
// Format the SVG as a URL | |
@function inline-svg($string) { | |
@return url('data:image/svg+xml,#{url-encode($string)}'); | |
} |
This comment has been minimized.
This comment has been minimized.
Forked! Thank you |
This comment has been minimized.
This comment has been minimized.
This is awesome! |
This comment has been minimized.
This comment has been minimized.
write please how to use |
This comment has been minimized.
This comment has been minimized.
Nice one! Thank you. |
This comment has been minimized.
This comment has been minimized.
Thanks! This saved me some time to figure out. Cheers |
This comment has been minimized.
This comment has been minimized.
Hi Thanks for this function ! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Nice work. Functions perfectly.👍