Reorganised github and added .zip with all the icons

website/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

website/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "crossorigin"
+    ]
+}

website/api/strapi.js

@@ -0,0 +1,65 @@
+import axios from 'axios'
+
+async function getIconsFromStrapi() {
+    let icons = await axios.get('https://api.macosicons.com/api/icon-brews?populate=*')
+    let iconsArr = []
+
+    for(let icon in icons.data.data){
+      let iconImage = icons.data.data[icon].attributes
+
+      icons.data.data[icon].attributes.iconImage24px = 'https://api.macosicons.com'+iconImage['iconImage24px'].data.attributes.url
+      icons.data.data[icon].attributes.iconImage18px = 'https://api.macosicons.com'+iconImage['iconImage18px'].data.attributes.url
+
+      iconsArr.push(icons.data.data[icon].attributes)
+    }
+    return iconsArr
+}
+
+async function getCategoriesFromStrapi() {
+    let categories = await axios.get('https://api.macosicons.com/api/icon-brew-categories?populate=*')
+    let categoriesArr = []
+
+    for(let category in categories.data.data){
+      category = categories.data.data[category]
+      category.attributes.id = category.id;
+      categoriesArr.push(category.attributes);
+    }
+
+    return categoriesArr;
+}
+
+async function getHomeData() {
+    let homeData = await axios.get('https://api.macosicons.com/api/icon-brew-home?populate=*')
+
+    return homeData.data.data.attributes;
+}
+
+async function getSinglePage(id) {
+    let singelPageData = await axios.get('https://api.macosicons.com/api/'+id+'?populate=*')
+    return singelPageData.data.data.attributes;
+}
+
+async function getTagsFromStrapi() {
+
+    let icons = await axios.get('https://api.macosicons.com/api/icon-brews?populate=*')
+    let iconsArr = []
+
+    for(let icon in icons.data.data){
+      let iconImage = icons.data.data[icon].attributes
+
+      icons.data.data[icon].attributes.iconImage24px = 'https://api.macosicons.com'+iconImage['iconImage24px'].data.attributes.url
+      icons.data.data[icon].attributes.iconImage18px = 'https://api.macosicons.com'+iconImage['iconImage18px'].data.attributes.url
+
+      iconsArr.push(icons.data.data[icon].attributes)
+    }
+
+    return iconsArr
+}
+
+export {
+    getIconsFromStrapi,
+    getCategoriesFromStrapi,
+    getTagsFromStrapi,
+    getHomeData,
+    getSinglePage
+}

website/assets/iconBrewIcons.scss

@@ -0,0 +1,110 @@
+// Characters to encode.
+$encodings: (
+  ('<', '%3C'),
+  ('>', '%3E'),
+  ('#', '%23'),
+  ('"', '%22')
+);
+// Replaces $search in $string with $replace.
+@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;
+}
+// Returns background-image property value for icon.
+@function get-icon($content, $viewBox) {
+  $svg: '<svg viewBox="' + $viewBox + '" xmlns="http://www.w3.org/2000/svg">' + $content + '</svg>';
+  @each $char, $encoded in $encodings {
+    $svg: str-replace($svg, $char, $encoded);
+  }
+  @return url('data:image/svg+xml;charset=utf-8,' + $svg);
+}
+
+  // Function to generate the circle icon.
+  @function get-icon-at($fill) {
+    $content: '<path fill="#{$fill}" d="M1100 775q0-108-53.5-169t-147.5-61q-63 0-124 30.5t-110 84.5-79.5 137-30.5 180q0 112 53.5 173t150.5 61q96 0 176-66.5t122.5-166 42.5-203.5zm564 121q0 111-37 197t-98.5 135-131.5 74.5-145 27.5q-6 0-15.5.5t-16.5.5q-95 0-142-53-28-33-33-83-52 66-131.5 110t-173.5 44q-161 0-249.5-95.5t-88.5-269.5q0-157 66-290t179-210.5 246-77.5q87 0 155 35.5t106 99.5l2-19 11-56q1-6 5.5-12t9.5-6h118q5 0 13 11 5 5 3 16l-120 614q-5 24-5 48 0 39 12.5 52t44.5 13q28-1 57-5.5t73-24 77-50 57-89.5 24-137q0-292-174-466t-466-174q-130 0-248.5 51t-204 136.5-136.5 204-51 248.5 51 248.5 136.5 204 204 136.5 248.5 51q228 0 405-144 11-9 24-8t21 12l41 49q8 12 7 24-2 13-12 22-102 83-227.5 128t-258.5 45q-156 0-298-61t-245-164-164-245-61-298 61-298 164-245 245-164 298-61q344 0 556 212t212 556z"/>';
+    @return get-icon($content, '0 0 1792 1792');
+  }
+
+
+
+  .icon-at {
+  background-image: get-icon-at(rgb(187, 68, 68));
+  height: 48px;
+  width: 48px;
+}
+
+.ib{
+  transition: 0.2s;
+}
+
+.ib-24{
+  width: 24px;
+  height: 24px;
+
+  @extend .ib;
+}
+
+.ib-18{
+  width: 18px;
+  height: 18px;
+
+  @extend .ib;
+}
+
+
+.ib-close-24{
+  background-image: url(./icons/24px/outline/close-24px.svg);
+  @extend .ib-24;
+}
+
+.ib-close-18{
+  background-image: url(./icons/18px/outline/close-18px.svg);
+  @extend .ib-18;
+}
+
+
+.ib-academic-book-24{
+  background-image: url(./icons/24px/outline/academic-book-24px.svg);
+  @extend .ib-24;
+}
+
+.ib-academic-book-18{
+  background-image: url(./icons/18px/outline/academic-book-18px.svg);
+  @extend .ib-18;
+}
+
+
+.ib-close-24{
+  background-image: url(./icons/24px/outline/close-24px.svg);
+  @extend .ib-24;
+}
+
+.ib-close-18{
+  background-image: url(./icons/18px/outline/close-18px.svg);
+  @extend .ib-18;
+}
+
+
+.ib-arrow-switch-24{
+  background-image: url(./icons/24px/outline/arrow-switch-24px.svg);
+  @extend .ib-24;
+}
+
+.ib-arrow-switch-18{
+  background-image: url(./icons/18px/outline/arrow-switch-18px.svg);
+  @extend .ib-18;
+}
+
+
+.ib-chevron-double-right-24{
+  background-image: url(./icons/24px/outline/chevron-double-right-24px.svg);
+  @extend .ib-24;
+}
+
+.ib-chevron-double-right-18{
+  background-image: url(./icons/18px/outline/chevron-double-right-18px.svg);
+  @extend .ib-18;
+}