Last active
April 21, 2022 14:19
-
-
Save PuddingNL/6d54f2a8e16b803ebad677d9b66ed5a1 to your computer and use it in GitHub Desktop.
[SASS] SVG Icon function
This file contains hidden or 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
| @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