Skip to content

Instantly share code, notes, and snippets.

@PuddingNL
Last active April 21, 2022 14:19
Show Gist options
  • Select an option

  • Save PuddingNL/6d54f2a8e16b803ebad677d9b66ed5a1 to your computer and use it in GitHub Desktop.

Select an option

Save PuddingNL/6d54f2a8e16b803ebad677d9b66ed5a1 to your computer and use it in GitHub Desktop.
[SASS] SVG Icon function
@function _buildIcon($icon, $width, $height) {
$icon: '%3Csvg%20viewBox%3D%220%200%20#{$width}%20#{$height}%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22#{$width}%22%20height%3D%22#{$height}%22%3E#{$icon}%3C%2Fsvg%3E';
@return $icon;
}
@function _buildPath($path, $parameters) {
$icon: '%3Cpath%20fill%3D%22#{map-get($parameters, color)}%22%20stroke%3D%22#{map-get($parameters, stroke-color)}%22%20stroke-width%3D%22#{map-get($parameters, stroke-width)}%22%20style%3D%22#{map-get($parameters, css)}%22%20d%3D%22#{$path}%22%20%2F%3E';
@return $icon;
}
@function icon(
$icon-name,
$color,
$width,
$height,
$stroke-color: transparent,
$stroke-width: 0
){
$parameters: (
'color': $color,
'stroke-color': $stroke-color,
'stroke-width': $stroke-width,
'width': $width,
'height': $height
);
$icons: (
arrow_next: _buildPath('M13.921 10.864l.253-.19L2.728 0 0 2.925l8.233 7.678L0 18.016l2.677 2.973s7.45-6.71 11.244-10.125zz', $parameters),
arrow_down: _buildPath('M10.136 13.921l.19.253L21 2.728 18.075 0l-7.678 8.233L2.984 0 .01 2.677s6.71 7.45 10.125 11.244z', $parameters),
arrow_up: _buildPath('M10.864 1.079l-.19-.253L0 12.272 2.925 15l7.678-8.233L18.016 15l2.973-2.677L10.864 1.08z', $parameters),
account: _buildPath('M18.942 2.503c.236.953.259 1.032.238 2.01-.008.378-.225 2.122-.167 2.657.048.441.159.477.332.84.302.633.201 1.507.085 2.144-.063.35-.198.846-.402 1.133-.223.313-.674.315-.873.683-.286.527-.125 1.268-.305 1.838-.207.646-.728.692-.767 1.538.256.036.51.073.767.108.257.548.725 1.647 1.204 1.977.403.112.805.22 1.205.33 1.41.58 2.974 1.27 4.385 1.869 1.287.543 2.825.735 3.29 2.087 0 .914.085 3.082.062 4.283H.005c-.026-1.201.062-3.369.062-4.283.463-1.352 2.001-1.544 3.287-2.087 1.412-.598 2.976-1.29 4.385-1.868.4-.111.803-.22 1.205-.33.48-.331.948-1.43 1.205-1.978l.571-.137c-.129-.723-.575-.78-.76-1.29l-.22-2.306c.002.035-.525-.098-.594-.14-.744-.468-.76-2.368-.832-3.155-.03-.361.469-.658.33-1.318C7.83 3.232 8.996 1.42 10.843.82c1.282-.523 3.677-1.488 5.91-.111l.555.517.897.154c.45.258.737 1.124.737 1.124', $parameters),
cart: _buildPath('M25.874 17.195l5.638-5.636V3.848H7.309L5.9 0H1.826a1.827 1.827 0 0 0 0 3.653h1.522l4.918 13.421-2.62 8.116h23.728a1.827 1.827 0 1 0 0-3.652h-18.71l1.4-4.343h13.81zM8.149 27.058a2.47 2.47 0 1 0 0 4.942 2.47 2.47 0 0 0 0-4.942zm19.436 0a2.47 2.47 0 1 0 0 4.942 2.47 2.47 0 0 0 0-4.942z', $parameters),
booking: _buildPath('M21.154 23.096l-1.458.068V5.063L3.46 3.802c-.535-.05-1.059-.151-1.354-.34a.997.997 0 0 1-.292-.265c-.048-.074-.052-.11-.054-.144.002-.036.006-.072.054-.146.069-.108.257-.274.55-.398a2.83 2.83 0 0 1 1.096-.206h.009l17.686-.494v21.287zM16.07 11.822l-11.655-.934.157-1.977 11.655.934-.157 1.977zm-2.994 4.723l-6.727-.523.153-1.975 6.727.523-.153 1.975zM3.445.543c-.856.005-1.645.215-2.28.613a2.71 2.71 0 0 0-.814.773A2.01 2.01 0 0 0 0 3.053v21.172c-.002.415.138.809.35 1.124.325.476.79.808 1.32 1.036a4.554 4.554 0 0 0 1.748.349L19.696 28v-3.075l3.219-.15V0L3.445.543z', $parameters),
info: _buildPath('M13.013 7.31c-1.275 0-2.004-.712-2.004-2.015 0-1.107.677-1.967 1.978-1.967 1.275 0 2.004.689 2.004 1.967 0 1.13-.676 2.016-1.978 2.016zm1.694 14.793h-3.735l.321-7.965V9.586h3.414v12.517zM25.434 2.826a2.723 2.723 0 0 0-2.26-2.26C19.783 0 14.13 0 13 0 11.87 0 6.217 0 2.826.566a2.723 2.723 0 0 0-2.26 2.26C0 6.217 0 11.87 0 13c0 1.13 0 6.783.566 10.174a2.723 2.723 0 0 0 2.26 2.26C6.217 26 11.87 26 13 26c1.13 0 6.783 0 10.174-.566a2.723 2.723 0 0 0 2.26-2.26C26 19.783 26 14.13 26 13c0-3.393 0-6.783-.566-10.174z', $parameters),
contact: _buildPath('M8.925 11.638a2.713 2.713 0 1 1 0-5.422 2.713 2.713 0 0 1 0 5.422M8.925 0A8.925 8.925 0 0 0 0 8.925C0 13.855 8.925 30 8.925 30s8.926-16.144 8.926-21.075A8.925 8.925 0 0 0 8.925 0', $parameters),
language: _buildPath('M14.216.004C6.485-.16.12 4.98.002 11.487c-.042 2.26.678 4.39 1.96 6.213h-.003c2.203 3.052-.2 8.3-.2 8.3l7.095-3.298c1.528.522 3.19.826 4.931.863 7.73.164 14.095-4.977 14.213-11.484C28.118 5.576 21.947.168 14.216.004', $parameters),
archive: _buildPath('M23.882 12.097v3.377c0 .873-.714 1.587-1.587 1.587h-6.549a1.591 1.591 0 0 1-1.586-1.587v-3.377H1.635v19.042h34.353V12.097H23.882zm14.457-10.51C38.34.713 37.69 0 36.893 0H1.446C.651 0 0 .714 0 1.586v7.6h38.34v-7.6z', $parameters),
chat: _buildPath('M23.073 14.465c-1.127 0-2.04-.882-2.04-1.97 0-1.09.913-1.972 2.04-1.972 1.126 0 2.04.882 2.04 1.971s-.914 1.971-2.04 1.971m-6.797 0c-1.127 0-2.039-.882-2.039-1.97 0-1.09.912-1.972 2.039-1.972 1.127 0 2.04.882 2.04 1.971s-.913 1.971-2.04 1.971m-6.798 0c-1.125 0-2.04-.882-2.04-1.97 0-1.09.915-1.972 2.04-1.972 1.127 0 2.04.882 2.04 1.971s-.913 1.971-2.04 1.971M16.81.004C7.668-.171.142 5.275.002 12.168c-.049 2.395.803 4.652 2.316 6.583 2.603 3.233-.238 8.792-.238 8.792l8.39-3.493c1.809.551 3.773.875 5.832.913 9.141.174 16.667-5.271 16.808-12.164.14-6.893-7.157-12.62-16.3-12.795', $parameters),
check: _buildPath('M30.31 0c-9.464 5.533-16.33 12.517-19.417 16.02l-7.556-5.646L0 12.94l13.057 12.665c2.248-5.49 9.365-16.219 18.054-23.843L30.311 0z', $parameters),
education: _buildPath('M76.364 26.787L42 45.333 0 22.667 42 0l42 22.667v30.222h-7.636V26.787zM42 52.89L15.273 37.024v16.622L42 68.002l26.727-14.356V37.024L42 52.89z', $parameters),
email: _buildPath('M.484 0l18.52 15.84L37.72 0H.484zM0 23.854h38V2.615L18.996 18.701 0 2.452v21.402z', $parameters),
phone: _buildPath('M.429 11.302c6.304 17.799 21.27 21.395 23.564 21.567 5.5.581 9.04-2.864 9.73-8.08 0 0-5.564-3.538-8.338-4.119l-4.387 4.387s-2.361.104-7.53-5.067c-5.169-5.168-5.065-7.529-5.065-7.529l3.775-3.775C11.548 4.859 9.332-1.192 5 .205.731 1.55-.845 7.569.43 11.302', $parameters),
search: _buildPath('M21.184 37.14c-8.744-.054-15.812-7.214-15.756-15.958.056-8.686 7.168-15.756 15.854-15.756h.106A15.757 15.757 0 0 1 32.57 10.14a15.756 15.756 0 0 1 4.572 11.246 15.765 15.765 0 0 1-4.68 11.148 15.763 15.763 0 0 1-11.174 4.606h-.104zm31.79 8.086l-.324-.324-12.948-12.95a21.169 21.169 0 0 0 2.868-10.534C42.646 9.664 33.178.074 21.422 0h-.142C9.592 0 .076 9.44 0 21.148-.074 32.902 9.394 42.492 21.148 42.57h.14c3.908 0 7.568-1.058 10.72-2.898l12.936 12.936h.002l.324.322c.978.98 2.564.98 3.542 0l4.162-4.162a2.505 2.505 0 0 0 0-3.542z', $parameters),
);
$icon: _buildIcon(map-get($icons, $icon-name), $width, $height);
@return url("data:image/svg+xml;charset=utf8,#{$icon}");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment