OOKNET                             [ /  search the index  ]  
──────────────────────────────────────────────────────────────────────────────────────
[ KB ]    [ GIT ]    [ PROJECTS ]    [ ABOUT ]                                      EN
══════════════════════════════════════════════════════════════════════════════════════
OOKNET   [ /  search  ]  
────────────────────────────────────────────────
[ KB ] [ GIT ] [ PROJECTS ] [ ABOUT ]
════════════════════════════════════════════════
 
 
main @ 102 LINES
 
[ HISTORY ]  [ UP ]
 

// _icons.scss
@use "sass:map";

$icon-sizes: (
  "small": 16px,
  "medium": 24px,
  "large": 32px,
);

$icons: (
  discord: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2
4 24'%3E%3Cpath fill='%23000' d='M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.1.1 0 0 0-
.07.03c-.18.33-.39.76-.53 1.09a16.1 16.1 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.0
1-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.
47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.
02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-
.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.5
7 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07
.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72
-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.0
1-.02-.02-.04-.02M8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 
1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12m6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2
.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12'/%3E%3C/svg%3E",
    color: purple,
  ),
  contact: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2
4 24'%3E%3Cpath fill='%23000' d='M6 17c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6m9-9a3 3 0 0
 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3M3 5v14a2 2 0 0 0 2 2h14a2 2 0 0 0
 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2'/%3E%3C/svg%3E",
    color: gold,
  ),
  notes: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5
12 512'%3E%3Cpath fill='%23000' d='M464 48c-67.61.29-117.87 9.6-154.24 25.69c-27.1
4 12-37.76 21.08-37.76 51.84V448c41.57-37.5 78.46-48 224-48V48ZM48 48c67.61.29 117
.87 9.6 154.24 25.69c27.14 12 37.76 21.08 37.76 51.84V448c-41.57-37.5-78.46-48-224
-48V48Z'/%3E%3C/svg%3E",
    color: purple,
  ),
  info: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2
4 24'%3E%3Cpath fill='%23000' d='M11 17h2v-6h-2zm1-8q.425 0 .713-.288T13 8t-.288-.
712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15
.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-
.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675
T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8'/%3E%3C/svg%3E",
    color: blue,
  ),
  git: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2
4 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin
='round' stroke-width='1.5' d='M17 7a2 2 0 1 0 0-4a2 2 0 0 0 0 4M7 7a2 2 0 1 0 0-4
a2 2 0 0 0 0 4m0 14a2 2 0 1 0 0-4a2 2 0 0 0 0 4M7 7v10M17 7v1c0 2.5-2 3-2 3l-6 2s-
2 .5-2 3v1'/%3E%3C/svg%3E",
    color: purple,
  ),
  moon: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2
4 24'%3E%3Cpath fill='%23000' d='M12 22c5.523 0 10-4.477 10-10c0-.463-.694-.54-.93
3-.143a6.5 6.5 0 1 1-8.924-8.924C12.54 2.693 12.463 2 12 2C6.477 2 2 6.477 2 12s4.
477 10 10 10'/%3E%3C/svg%3E",
    color: text,
  ),
  sun: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2
4 24'%3E%3Cpath fill='%23000' d='M18 12a6 6 0 1 1-12 0a6 6 0 0 1 12 0'/%3E%3Cpath 
fill='%23000' fill-rule='evenodd' d='M12 1.25a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1
.5 0V2a.75.75 0 0 1 .75-.75M4.399 4.399a.75.75 0 0 1 1.06 0l.393.392a.75.75 0 0 1-
1.06 1.061l-.393-.393a.75.75 0 0 1 0-1.06m15.202 0a.75.75 0 0 1 0 1.06l-.393.393a.
75.75 0 0 1-1.06-1.06l.393-.393a.75.75 0 0 1 1.06 0M1.25 12a.75.75 0 0 1 .75-.75h1
a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75m19 0a.75.75 0 0 1 .75-.75h1a.75.75 0 0 
1 0 1.5h-1a.75.75 0 0 1-.75-.75m-2.102 6.148a.75.75 0 0 1 1.06 0l.393.393a.75.75 0
 1 1-1.06 1.06l-.393-.393a.75.75 0 0 1 0-1.06m-12.296 0a.75.75 0 0 1 0 1.06l-.393.
393a.75.75 0 1 1-1.06-1.06l.392-.393a.75.75 0 0 1 1.061 0M12 20.25a.75.75 0 0 1 .7
5.75v1a.75.75 0 0 1-1.5 0v-1a.75.75 0 0 1 .75-.75' clip-rule='evenodd'/%3E%3C/svg%
3E",
    color: text,
  ),
  arrow: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2
4 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin
='round' stroke-width='1.5' d='m12 6l-6 6l6 6m6-12l-6 6l6 6'/%3E%3C/svg%3E",
    color: text,
  ),
  menu: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2
4 24'%3E%3Cpath fill='%23000' d='M3 18v-2h18v2zm0-5v-2h18v2zm0-5V6h18v2z'/%3E%3C/s
vg%3E",
    color: text,
  ),
  tip: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2
4 24'%3E%3Cpath fill='%23000' d='M12 3.75c2.928 0 5.25 2.275 5.25 5.02c0 1.71-.44 
2.581-.998 3.373q-.19.266-.417.56c-.524.685-1.154 1.51-1.601 2.699a3.5 3.5 0 0 1-.
353.698l-.056.08a3 3 0 0 1-.42.482c-.406.372-.894.588-1.405.588c-.51 0-.999-.216-1
.406-.588a3 3 0 0 1-.42-.483l-.055-.08a3.5 3.5 0 0 1-.353-.697c-.447-1.19-1.077-2.
014-1.601-2.7a18 18 0 0 1-.417-.56c-.557-.79-.998-1.662-.998-3.373C6.75 6.025 9.07
3 3.75 12 3.75m3.167 13.119c.192-.3.35-.617.471-.94c.362-.963.818-1.562 1.318-2.21
7c.17-.223.345-.453.523-.706c.71-1.008 1.271-2.175 1.271-4.237c0-3.628-3.05-6.519-
6.75-6.519S5.25 5.141 5.25 8.77c0 2.06.561 3.228 1.271 4.236c.178.253.353.483.523.
706c.5.655.956 1.254 1.318 2.217c.121.323.28.64.471.94l.222 2.216a2.96 2.96 0 0 0 
5.89 0zm-1.66 1.53l-.054.536a1.46 1.46 0 0 1-2.906 0l-.053-.536c.45.222.955.351 1.
506.351c.55 0 1.056-.13 1.506-.351M2.423 3.019a.75.75 0 0 1 1.056-.095l1.5 1.25a.7
5.75 0 0 1-.96 1.152l-1.5-1.25a.75.75 0 0 1-.096-1.056m19.152 0a.75.75 0 0 1-.096 
1.057l-1.5 1.25a.75.75 0 1 1-.96-1.152l1.5-1.25a.75.75 0 0 1 1.056.096M1.25 8.25A.
75.75 0 0 1 2 7.5h2A.75.75 0 0 1 4 9H2a.75.75 0 0 1-.75-.75m18 0A.75.75 0 0 1 20 7
.5h2A.75.75 0 0 1 22 9h-2a.75.75 0 0 1-.75-.75M5.17 11.915a.75.75 0 0 1-.335 1.006
l-1.5.75a.75.75 0 1 1-.67-1.342l1.5-.75a.75.75 0 0 1 1.006.336m13.66 0a.75.75 0 0 
1 1.005-.336l1.5.75a.75.75 0 1 1-.67 1.342l-1.5-.75a.75.75 0 0 1-.336-1.006'/%3E%3
C/svg%3E",
    color: green,
  ),
  warning: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2
4 24'%3E%3Cpath d='M1 21L12 2l11 19zm3.45-2h15.1L12 6zM12 18q.425 0 .713-.288T13 1
7t-.288-.712T12 16t-.712.288T11 17t.288.713T12 18m-1-3h2v-5h-2zm1-2.5'/%3E%3C/svg%
3E",
    color: gold,
  ),
  link: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2
4 24'%3E%3Cpath fill='%23000' d='M11 17H7q-2.075 0-3.537-1.463T2 12t1.463-3.537T7 
7h4v2H7q-1.25 0-2.125.875T4 12t.875 2.125T7 15h4zm-3-4v-2h8v2zm5 4v-2h4q1.25 0 2.1
25-.875T20 12t-.875-2.125T17 9h-4V7h4q2.075 0 3.538 1.463T22 12t-1.463 3.538T17 17
z'/%3E%3C/svg%3E",
    color: text,
  ),
);

@mixin icon($name) {
  $icon: map.get($icons, $name);
  --svg: url("#{map.get($icon, 'svg')}");
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  color: var(--clr-#{map.get($icon, "color")});
}

.icon {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  @each $name, $size in $icon-sizes {
    &--#{$name} {
      width: $size;
      height: $size;
    }
  }

  @each $name, $_ in $icons {
    &__#{$name} {
      @include icon($name);
    }
  }
}


// _icons.scss
@use "sass:map";

$icon-sizes: (
  "small": 16px,
  "medium": 24px,
  "large": 32px,
);

$icons: (
  discord: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http
://www.w3.org/2000/svg' viewBox='0 0 24 24'%
3E%3Cpath fill='%23000' d='M19.27 5.33C17.94
 4.71 16.5 4.26 15 4a.1.1 0 0 0-.07.03c-.18.
33-.39.76-.53 1.09a16.1 16.1 0 0 0-4.8 0c-.1
4-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-
.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-
.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.
01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03
.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.0
2-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.
78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.3
3-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1
.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.1
7.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-
1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19
 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-
1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.5
3-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.0
2M8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-
2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.1
7-.84 2.12-1.89 2.12m6.97 0c-1.03 0-1.89-.95
-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 
1.89 2.12c0 1.17-.83 2.12-1.89 2.12'/%3E%3C/
svg%3E",
    color: purple,
  ),
  contact: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http
://www.w3.org/2000/svg' viewBox='0 0 24 24'%
3E%3Cpath fill='%23000' d='M6 17c0-2 4-3.1 6
-3.1s6 1.1 6 3.1v1H6m9-9a3 3 0 0 1-3 3a3 3 0
 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3M3 5v14a
2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2
-2H5a2 2 0 0 0-2 2'/%3E%3C/svg%3E",
    color: gold,
  ),
  notes: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http
://www.w3.org/2000/svg' viewBox='0 0 512 512
'%3E%3Cpath fill='%23000' d='M464 48c-67.61.
29-117.87 9.6-154.24 25.69c-27.14 12-37.76 2
1.08-37.76 51.84V448c41.57-37.5 78.46-48 224
-48V48ZM48 48c67.61.29 117.87 9.6 154.24 25.
69c27.14 12 37.76 21.08 37.76 51.84V448c-41.
57-37.5-78.46-48-224-48V48Z'/%3E%3C/svg%3E",
    color: purple,
  ),
  info: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http
://www.w3.org/2000/svg' viewBox='0 0 24 24'%
3E%3Cpath fill='%23000' d='M11 17h2v-6h-2zm1
-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.7
12.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-
.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2
.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.13
7T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3
.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 1
2t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5
.675T12 20m0-8'/%3E%3C/svg%3E",
    color: blue,
  ),
  git: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http
://www.w3.org/2000/svg' viewBox='0 0 24 24'%
3E%3Cpath fill='none' stroke='%23000' stroke
-linecap='round' stroke-linejoin='round' str
oke-width='1.5' d='M17 7a2 2 0 1 0 0-4a2 2 0
 0 0 0 4M7 7a2 2 0 1 0 0-4a2 2 0 0 0 0 4m0 1
4a2 2 0 1 0 0-4a2 2 0 0 0 0 4M7 7v10M17 7v1c
0 2.5-2 3-2 3l-6 2s-2 .5-2 3v1'/%3E%3C/svg%3
E",
    color: purple,
  ),
  moon: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http
://www.w3.org/2000/svg' viewBox='0 0 24 24'%
3E%3Cpath fill='%23000' d='M12 22c5.523 0 10
-4.477 10-10c0-.463-.694-.54-.933-.143a6.5 6
.5 0 1 1-8.924-8.924C12.54 2.693 12.463 2 12
 2C6.477 2 2 6.477 2 12s4.477 10 10 10'/%3E%
3C/svg%3E",
    color: text,
  ),
  sun: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http
://www.w3.org/2000/svg' viewBox='0 0 24 24'%
3E%3Cpath fill='%23000' d='M18 12a6 6 0 1 1-
12 0a6 6 0 0 1 12 0'/%3E%3Cpath fill='%23000
' fill-rule='evenodd' d='M12 1.25a.75.75 0 0
 1 .75.75v1a.75.75 0 0 1-1.5 0V2a.75.75 0 0 
1 .75-.75M4.399 4.399a.75.75 0 0 1 1.06 0l.3
93.392a.75.75 0 0 1-1.06 1.061l-.393-.393a.7
5.75 0 0 1 0-1.06m15.202 0a.75.75 0 0 1 0 1.
06l-.393.393a.75.75 0 0 1-1.06-1.06l.393-.39
3a.75.75 0 0 1 1.06 0M1.25 12a.75.75 0 0 1 .
75-.75h1a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.
75-.75m19 0a.75.75 0 0 1 .75-.75h1a.75.75 0 
0 1 0 1.5h-1a.75.75 0 0 1-.75-.75m-2.102 6.1
48a.75.75 0 0 1 1.06 0l.393.393a.75.75 0 1 1
-1.06 1.06l-.393-.393a.75.75 0 0 1 0-1.06m-1
2.296 0a.75.75 0 0 1 0 1.06l-.393.393a.75.75
 0 1 1-1.06-1.06l.392-.393a.75.75 0 0 1 1.06
1 0M12 20.25a.75.75 0 0 1 .75.75v1a.75.75 0 
0 1-1.5 0v-1a.75.75 0 0 1 .75-.75' clip-rule
='evenodd'/%3E%3C/svg%3E",
    color: text,
  ),
  arrow: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http
://www.w3.org/2000/svg' viewBox='0 0 24 24'%
3E%3Cpath fill='none' stroke='%23000' stroke
-linecap='round' stroke-linejoin='round' str
oke-width='1.5' d='m12 6l-6 6l6 6m6-12l-6 6l
6 6'/%3E%3C/svg%3E",
    color: text,
  ),
  menu: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http
://www.w3.org/2000/svg' viewBox='0 0 24 24'%
3E%3Cpath fill='%23000' d='M3 18v-2h18v2zm0-
5v-2h18v2zm0-5V6h18v2z'/%3E%3C/svg%3E",
    color: text,
  ),
  tip: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http
://www.w3.org/2000/svg' viewBox='0 0 24 24'%
3E%3Cpath fill='%23000' d='M12 3.75c2.928 0 
5.25 2.275 5.25 5.02c0 1.71-.44 2.581-.998 3
.373q-.19.266-.417.56c-.524.685-1.154 1.51-1
.601 2.699a3.5 3.5 0 0 1-.353.698l-.056.08a3
 3 0 0 1-.42.482c-.406.372-.894.588-1.405.58
8c-.51 0-.999-.216-1.406-.588a3 3 0 0 1-.42-
.483l-.055-.08a3.5 3.5 0 0 1-.353-.697c-.447
-1.19-1.077-2.014-1.601-2.7a18 18 0 0 1-.417
-.56c-.557-.79-.998-1.662-.998-3.373C6.75 6.
025 9.073 3.75 12 3.75m3.167 13.119c.192-.3.
35-.617.471-.94c.362-.963.818-1.562 1.318-2.
217c.17-.223.345-.453.523-.706c.71-1.008 1.2
71-2.175 1.271-4.237c0-3.628-3.05-6.519-6.75
-6.519S5.25 5.141 5.25 8.77c0 2.06.561 3.228
 1.271 4.236c.178.253.353.483.523.706c.5.655
.956 1.254 1.318 2.217c.121.323.28.64.471.94
l.222 2.216a2.96 2.96 0 0 0 5.89 0zm-1.66 1.
53l-.054.536a1.46 1.46 0 0 1-2.906 0l-.053-.
536c.45.222.955.351 1.506.351c.55 0 1.056-.1
3 1.506-.351M2.423 3.019a.75.75 0 0 1 1.056-
.095l1.5 1.25a.75.75 0 0 1-.96 1.152l-1.5-1.
25a.75.75 0 0 1-.096-1.056m19.152 0a.75.75 0
 0 1-.096 1.057l-1.5 1.25a.75.75 0 1 1-.96-1
.152l1.5-1.25a.75.75 0 0 1 1.056.096M1.25 8.
25A.75.75 0 0 1 2 7.5h2A.75.75 0 0 1 4 9H2a.
75.75 0 0 1-.75-.75m18 0A.75.75 0 0 1 20 7.5
h2A.75.75 0 0 1 22 9h-2a.75.75 0 0 1-.75-.75
M5.17 11.915a.75.75 0 0 1-.335 1.006l-1.5.75
a.75.75 0 1 1-.67-1.342l1.5-.75a.75.75 0 0 1
 1.006.336m13.66 0a.75.75 0 0 1 1.005-.336l1
.5.75a.75.75 0 1 1-.67 1.342l-1.5-.75a.75.75
 0 0 1-.336-1.006'/%3E%3C/svg%3E",
    color: green,
  ),
  warning: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http
://www.w3.org/2000/svg' viewBox='0 0 24 24'%
3E%3Cpath d='M1 21L12 2l11 19zm3.45-2h15.1L1
2 6zM12 18q.425 0 .713-.288T13 17t-.288-.712
T12 16t-.712.288T11 17t.288.713T12 18m-1-3h2
v-5h-2zm1-2.5'/%3E%3C/svg%3E",
    color: gold,
  ),
  link: (
    svg:
      "data:image/svg+xml,%3Csvg xmlns='http
://www.w3.org/2000/svg' viewBox='0 0 24 24'%
3E%3Cpath fill='%23000' d='M11 17H7q-2.075 0
-3.537-1.463T2 12t1.463-3.537T7 7h4v2H7q-1.2
5 0-2.125.875T4 12t.875 2.125T7 15h4zm-3-4v-
2h8v2zm5 4v-2h4q1.25 0 2.125-.875T20 12t-.87
5-2.125T17 9h-4V7h4q2.075 0 3.538 1.463T22 1
2t-1.463 3.538T17 17z'/%3E%3C/svg%3E",
    color: text,
  ),
);

@mixin icon($name) {
  $icon: map.get($icons, $name);
  --svg: url("#{map.get($icon, 'svg')}");
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  color: var(--clr-#{map.get($icon, "color")
});
}

.icon {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  @each $name, $size in $icon-sizes {
    &--#{$name} {
      width: $size;
      height: $size;
    }
  }

  @each $name, $_ in $icons {
    &__#{$name} {
      @include icon($name);
    }
  }
}

 
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET