diff options
Diffstat (limited to 'sass/include/_icons.scss')
| -rw-r--r-- | sass/include/_icons.scss | 102 |
1 files changed, 102 insertions, 0 deletions
diff --git a/sass/include/_icons.scss b/sass/include/_icons.scss new file mode 100644 index 0000000..b98930b --- /dev/null +++ b/sass/include/_icons.scss @@ -0,0 +1,102 @@ +/** + * SVG Icons + * https://github.com/feathericons/feather + * https://github.com/tabler/tabler-icons/find/master + * + * https://yqnn.github.io/svg-path-editor/ + * https://jakearchibald.github.io/svgomg/ + * https://codepen.io/yoksel/pen/MWKeKK + */ + +@function icon($icon-name,$stroke,$stroke-width: 1,$fill:'none'){ + $sc:"%23888";//stroke color + @if $ic { + $sc: $stroke + } + $p: ( + 's': $sc, + 'sw': $stroke-width, + 'f': $fill + ); + $icons: ( + //template-fill: "%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d=''/%3E%3C/svg%3E", + //template-stroke: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d=''/%3E%3C/svg%3E", + ffolder: "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='#{map-get($p, f)}' d='M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z'/%3E%3C/svg%3E", + ftag: "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='#{map-get($p, f)}' d='M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0133.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 010 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z'/%3E%3C/svg%3E", + bitbucket: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M3.648 4a.64.64 0 0 0-.64.744l3.14 14.528c.07.417.43.724.852.728h10a.644.644 0 0 0 .642-.539l3.35-14.71a.641.641 0 0 0-.64-.744L3.648 4z'/%3E%3Cpath d='M14 15h-4L9 9h6z'/%3E%3C/svg%3E", + check: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E", + chevron: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E", + clock: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E", + date: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E", + docker: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M22 12.54c-1.804-.345-2.701-1.08-3.523-2.94-.487.696-1.102 1.568-.92 2.4.028.238-.32 1.002-.557 1H3c0 5.208 3.164 7 6.196 7 4.124.022 7.828-1.376 9.854-5 1.146-.101 2.296-1.505 2.95-2.46z'/%3E%3Cpath d='M5 10h3v3H5zM8 10h3v3H8zM11 10h3v3h-3zM8 7h3v3H8zM11 7h3v3h-3zM11 4h3v3h-3zM4.571 18c1.5 0 2.047-.074 2.958-.78M10 16v.01'/%3E%3C/svg%3E%0A", + element: "%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-1.314 4.715c3.289 0 5.956 2.66 5.956 5.943a.879.879 0 0 1-1.758 0 4.194 4.194 0 0 0-4.198-4.189.878.878 0 1 1 0-1.754zm-5.092 9.504a.879.879 0 0 1-.879-.877 5.95 5.95 0 0 1 5.956-5.945.878.878 0 1 1 0 1.753 4.195 4.195 0 0 0-4.198 4.191.88.88 0 0 1-.879.878zm7.735 5.067c-3.29 0-5.957-2.662-5.957-5.944a.88.88 0 0 1 1.758 0 4.194 4.194 0 0 0 4.199 4.189.879.879 0 1 1 0 1.755zm0-2.683a.88.88 0 0 1-.88-.876.88.88 0 0 1 .88-.878 4.195 4.195 0 0 0 4.199-4.19.878.878 0 0 1 1.758 0c0 3.282-2.667 5.944-5.957 5.944z'/%3E%3C/svg%3E", + facebook: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E", + folder: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E", + github: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22'/%3E%3C/svg%3E", + gitlab: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M22.65 14.39 12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z'/%3E%3C/svg%3E", + globe: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E", + home: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E", + instagram: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37zM17.5 6.5h.01'/%3E%3C/svg%3E", + linkedin: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E", + mail: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E", + mastodon: "%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M1.004 7.879c0 6.197-.347 13.894 5.559 15.486 2.132.574 3.964.696 5.438.61 2.674-.15 4.175-.969 4.175-.969l-.09-1.977s-1.911.61-4.059.54c-2.127-.075-4.37-.235-4.717-2.892a5.514 5.514 0 0 1-.047-.745c4.507 1.12 8.349.488 9.408.359 2.954-.359 5.528-2.212 5.855-3.905.515-2.667.474-6.508.474-6.508 0-5.206-3.353-6.733-3.353-6.733-3.291-1.537-12.029-1.521-15.288 0-.002.002-3.355 1.528-3.355 6.734zm4.923-2.667c1.363-1.548 4.201-1.65 5.465.327l.611 1.044.611-1.044c1.269-1.987 4.112-1.864 5.465-.327 1.248 1.463.969 2.838.969 9.373h-2.455V8.469c0-2.662-3.369-2.764-3.369.369v3.348h-2.437V8.838c0-3.133-3.369-3.031-3.369-.369v6.117H4.959c0-6.54-.274-7.922.968-9.374z'/%3E%3C/svg%3E", + matrix: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M.632.55v22.9H3V24H0V0h3v.55zm7.043 7.26v1.157h.033C10.867 6.726 12 9 12.49 9.329 14.918 6.697 18 8 18 11v5h-1.504v-5a1 1 0 0 0-3.488.019v5h-1.69v-4.973a1 1 0 0 0-3.679-.027V16H6V7.83zm15.693 15.64V.55H21V0h3v24h-3v-.55z'/%3E%3C/svg%3E", + minus: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E", + moon: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E", + pinterest: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='m8 20 4-9m-1.3 3c.437 1.263 1.43 2 2.55 2 2.071 0 3.75-1.554 3.75-4a5 5 0 1 0-9.7 1.7'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E", + python: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 9H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h3M12 15h7a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3'/%3E%3Cpath d='M8 9V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4M11 6v.01M13 18v.01'/%3E%3C/svg%3E", + rss: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16'/%3E%3Ccircle cx='5' cy='19' r='1'/%3E%3C/svg%3E", + search: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E", + stack: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1M8 16h8M8.322 12.582l7.956.836M8.787 9.168l7.826 1.664M10.096 5.764l7.608 2.472'/%3E%3C/svg%3E", + sun: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E", + tag: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m20.59 13.41-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82zM7 7h.01'/%3E%3C/svg%3E", + twitch: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7'/%3E%3C/svg%3E", + twitter: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z'/%3E%3C/svg%3E", + x: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E", + youtube: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z'/%3E%3Cpath d='m9.75 15.02 5.75-3.27-5.75-3.27v6.54z'/%3E%3C/svg%3E" + ); + $icon: map-get($icons, $icon-name); + @return url("data:image/svg+xml,#{$icon}"); +} +@if $enable-icons { + @if $icon-ffolder {.ffolder { background-image: icon(ffolder, "none", 1, "%23888") }} + @if $icon-ftag {.ftag { background-image: icon(ftag, "none", 1, "%23888") }} + @if $icon-bitbucket {.bitbucket { background-image: icon(bitbucket, "%232684ff", 2, "none") }} + @if $icon-check {.check { background-image: icon(check, "%23888", 2, "none") }} + @if $icon-chevron {.chevron { background-image: icon(chevron, "%23888", 2, "none") }} + @if $icon-clock {.clock { background-image: icon(clock, "%23888", 2, "none") }} + @if $icon-date {.date { background-image: icon(date, "%23888", 2, "none") }} + @if $icon-docker {.docker { background-image: icon(docker, "%232391e5", 2, "none") }} + @if $icon-element {.element { background-image: icon(element, "none", 1, "%230dbd8b") }} + @if $icon-facebook {.facebook { background-image: icon(facebook, "%23395498", 2, "none") }} + @if $icon-folder {.folder { background-image: icon(folder, "%23888", 2, "none") }} + @if $icon-github {.github { background-image: icon(github, "%23888", 2, "none") }} + @if $icon-gitlab {.gitlab { background-image: icon(gitlab, "%23ef6824", 2, "none") }} + @if $icon-globe {.globe { background-image: icon(globe, "%23888", 2, "none") }} + @if $icon-home {.home { background-image: icon(home, "%23888", 2, "none") }} + @if $icon-instagram {.instagram { background-image: icon(instagram, "%23e90077", 2, "none") }} + @if $icon-linkedin {.linkedin { background-image: icon(linkedin, "%232362aa", 2, "none") }} + @if $icon-mail {.mail { background-image: icon(mail, "%23888", 2, "none") }} + @if $icon-mastodon {.mastodon { background-image: icon(mastodon, "none", 1, "%232989ce") }} + @if $icon-matrix {.matrix { background-image: icon(matrix, "%23888", 2, "none") }} + @if $icon-minus {.minus { background-image: icon(minus, "%23888", 2, "none") }} + @if $icon-moon {.moon { background-image: icon(moon, "%23888", 2, "none") }} + @if $icon-pinterest {.pinterest { background-image: icon(pinterest, "%23b7081c", 2, "none") }} + @if $icon-python {.python { background-image: icon(python, "%23f2ca45", 2, "none") }} + @if $icon-rss {.rss { background-image: icon(rss, "%23eb9036", 2, "none") }} + @if $icon-search {.search { background-image: icon(search, "%23888", 2, "none") }} + @if $icon-stack {.stack { background-image: icon(stack, "%23e77923", 2, "none") }} + @if $icon-sun {.sun { background-image: icon(sun, "%23888", 2, "none") }} + @if $icon-tag {.tag { background-image: icon(tag, "%23888", 2, "none") }} + @if $icon-twitch {.twitch { background-image: icon(twitch, "%23a970ff", 2, "none") }} + @if $icon-twitter {.twitter { background-image: icon(twitter, "%232ba5da", 2, "none") }} + @if $icon-x {.x { background-image: icon(x, "%23888", 2, "none") }} + @if $icon-youtube {.youtube { background-image: icon(youtube, "%23f00", 2, "none") }} + .svg { + width: 1.5rem; + height: 1.5rem; + display: inline-block; + overflow: hidden; + vertical-align: middle + } +} |