From ed1687b7a5a193d5f2d5a4df6a5320447e8ba821 Mon Sep 17 00:00:00 2001
From: Zain Fathoni <me@zainf.dev>
Date: Sun, 6 Aug 2023 14:49:30 +0800
Subject: [PATCH] refactor(icons): replace Duotone House inline SVG with SVG
 sprites

---
 app/components/breadcrumbs.tsx | 10 +++++--
 app/components/icons.tsx       | 25 +++++++++++++++++
 app/icons/duotone.tsx          | 21 --------------
 public/images/duotone.svg      | 51 ++++++++++++++++++++++++++++++++++
 public/images/light.svg        | 15 ++++++++++
 public/images/solid.svg        |  6 ++++
 6 files changed, 104 insertions(+), 24 deletions(-)
 create mode 100644 app/components/icons.tsx
 create mode 100644 public/images/duotone.svg
 create mode 100644 public/images/light.svg
 create mode 100644 public/images/solid.svg

diff --git a/app/components/breadcrumbs.tsx b/app/components/breadcrumbs.tsx
index 335c8a8..55f0c37 100644
--- a/app/components/breadcrumbs.tsx
+++ b/app/components/breadcrumbs.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react'
 import { Link, useMatches } from '@remix-run/react'
+import * as React from 'react'
 import { categoriesRecord } from '../model/categories'
-import { House } from '../icons/duotone'
+import { Duotone } from './icons'
 
 export default function Breadcrumbs() {
   const matches = useMatches()
@@ -15,7 +15,11 @@ export default function Breadcrumbs() {
           <li className="flex">
             <div className="flex items-center">
               <Link to="/" className="text-gray-500 hover:text-gray-700">
-                <House className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
+                <Duotone
+                  id="house"
+                  className="flex-shrink-0 h-5 w-5"
+                  aria-hidden="true"
+                />
                 <span className="sr-only">Aktivitas</span>
               </Link>
             </div>
diff --git a/app/components/icons.tsx b/app/components/icons.tsx
new file mode 100644
index 0000000..1249e25
--- /dev/null
+++ b/app/components/icons.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+
+export function Duotone({ id, ...props }) {
+  return (
+    <svg {...props}>
+      <use href={`/images/duotone.svg#${id}`} />
+    </svg>
+  )
+}
+
+export function Light({ id, ...props }) {
+  return (
+    <svg {...props}>
+      <use href={`/images/light.svg#${id}`} />
+    </svg>
+  )
+}
+
+export function Solid({ id, ...props }) {
+  return (
+    <svg {...props}>
+      <use href={`/images/solid.svg#${id}`} />
+    </svg>
+  )
+}
diff --git a/app/icons/duotone.tsx b/app/icons/duotone.tsx
index e2a3504..1098cb4 100644
--- a/app/icons/duotone.tsx
+++ b/app/icons/duotone.tsx
@@ -124,27 +124,6 @@ export const PenToSquare = (props: React.SVGProps<SVGSVGElement>) => (
   </svg>
 )
 
-export const House = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 576 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      className="fa-primary"
-      d="M266.9 7.918c11.2-10.557 30.1-10.557 42.2 0l256 223.982c13.3 11.7 14.6 31.9 3 45.2-11.7 13.3-31.9 14.6-45.2 3L288 74.52 53.07 280.1c-13.3 11.6-33.51 10.3-45.152-3-11.638-13.3-10.29-33.5 3.012-45.2L266.9 7.918z"
-    />
-    <path
-      d="M288 74.52 512.1 270.6l.4 201.3c.1 22.1-17.8 40.1-40 40.1H392c-22.1 0-40-17.9-40-40v-88.3c0-17.7-14.3-32-32-32h-64c-17.7 0-32 14.3-32 32V472c0 22.1-17.9 40-40 40h-79.9c-23 0-40.01-17.9-40.02-40l-.06-201.5L288 74.52z"
-      style={{
-        opacity: 0.4,
-      }}
-    />
-  </svg>
-)
-
 export const ChildReaching = (props: React.SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
diff --git a/public/images/duotone.svg b/public/images/duotone.svg
new file mode 100644
index 0000000..79e2905
--- /dev/null
+++ b/public/images/duotone.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+<symbol id="briefcase" viewBox="0 0 512 512">
+<path class="fa-primary" style="fill:var(--fa-primary-color,inherit);opacity:var(--fa-primary-opacity,1);" d="M384 96h80c25.6 0 48 22.4 48 48V288H0V144c0-25.6 22.4-48 48-48h80V56 48c0-25.6 22.4-48 48-48h8H328h8c25.6 0 48 22.4 48 48v8V96zm-48 0V56c0-4.4-3.6-8-8-8H184c-4.4 0-8 3.6-8 8V96H336z"/><path class="fa-secondary" style="fill:var(--fa-secondary-color,inherit);opacity:var(--fa-secondary-opacity,.4);" d="M192 288H0V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V288H320v32c0 17.7-14.3 32-32 32H224c-17.7 0-32-14.3-32-32V288z"/>
+</symbol>
+<symbol id="people-group" viewBox="0 0 640 512">
+<path class="fa-primary" style="fill:var(--fa-primary-color,inherit);opacity:var(--fa-primary-opacity,1);" d="M384 96A64 64 0 1 0 256 96a64 64 0 1 0 128 0zM256 261.7v84.7c-10-11.3-16-26.1-16-42.3s6-31.1 16-42.3zm128 84.7V261.7c10 11.3 16 26.1 16 42.3s-6 31-16 42.3zm0 58.9c37.8-18 64-56.5 64-101.2c0-61.9-50.1-112-112-112H304c-61.9 0-112 50.1-112 112c0 44.7 26.2 83.2 64 101.2V448c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32V405.2z"/><path class="fa-secondary" style="fill:var(--fa-secondary-color,inherit);opacity:var(--fa-secondary-opacity,.4);" d="M128 160a64 64 0 1 0 0-128 64 64 0 1 0 0 128zM48 304c0-16.2 6-31.1 16-42.3v84.7C54 335 48 320.2 48 304zm112 0c0-37.8 14.6-72.2 38.4-97.9c-16.1-9-34.7-14.1-54.4-14.1H112C50.1 192 0 242.1 0 304c0 44.7 26.2 83.2 64 101.2V448c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32V405.2 394.5c-20-24.7-32-56.2-32-90.5zM448 405.2V448c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32V405.2c37.8-18 64-56.5 64-101.2c0-61.9-50.1-112-112-112H496c-19.7 0-38.3 5.1-54.4 14.1C465.4 231.8 480 266.2 480 304c0 34.3-12 65.8-32 90.5v10.7zM512 160a64 64 0 1 0 0-128 64 64 0 1 0 0 128zm80 144c0 16.2-6 31-16 42.3V261.7c10 11.3 16 26.1 16 42.3z"/>
+</symbol>
+<symbol id="house" viewBox="0 0 576 512">
+<path class="fa-primary" style="fill:var(--fa-primary-color,inherit);opacity:var(--fa-primary-opacity,1);" d="M266.9 7.9C279-2.6 297-2.6 309.1 7.9l256 224c13.3 11.6 14.6 31.9 3 45.2s-31.9 14.6-45.2 3L288 74.5 53.1 280.1c-13.3 11.6-33.5 10.3-45.2-3s-10.3-33.5 3-45.2l256-224z"/><path class="fa-secondary" style="fill:var(--fa-secondary-color,inherit);opacity:var(--fa-secondary-opacity,.4);" d="M64 270.5L64.1 472c0 22.1 17.9 40 40 40H184c22.1 0 40-17.9 40-40V383.7c0-17.7 14.3-32 32-32h64c17.7 0 32 14.3 32 32V472c0 22.1 17.9 40 40 40h80.5c22.1 0 40-18 40-40.1l-.4-201.3L288 74.5 64 270.5z"/>
+</symbol>
+<symbol id="graduation-cap" viewBox="0 0 640 512">
+<path class="fa-primary" style="fill:var(--fa-primary-color,inherit);opacity:var(--fa-primary-opacity,1);" d="M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l77.4 27.9c16.8-17.8 37.8-31.9 61.7-40.9l159.4-59.8c8.3-3.1 17.5 1.1 20.6 9.4s-1.1 17.5-9.4 20.6L166.2 199.6c-14.6 5.5-27.8 13.4-39.3 23.1l169.5 61.2c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z"/><path class="fa-secondary" style="fill:var(--fa-secondary-color,inherit);opacity:var(--fa-secondary-opacity,.4);" d="M325.6 139.8c8.3-3.1 12.5-12.3 9.4-20.6s-12.3-12.5-20.6-9.4L154.9 169.6C92.4 193.1 50.4 251.8 48.1 318.2c-.1 .6-.1 1.2-.1 1.8c0 28.4-10.8 57.8-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7c-3.2-14-7.5-28.3-13.4-41.5c2.8-52.5 36.4-98.7 86-117.3l159.4-59.8z"/>
+</symbol>
+<symbol id="magnifying-glass" viewBox="0 0 512 512">
+<path class="fa-primary" style="fill:var(--fa-primary-color,inherit);opacity:var(--fa-primary-opacity,1);" d="M330.7 376L457.4 502.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L376 330.7C363.3 348 348 363.3 330.7 376z"/><path class="fa-secondary" style="fill:var(--fa-secondary-color,inherit);opacity:var(--fa-secondary-opacity,.4);" d="M208 64a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 352A208 208 0 1 0 208 0a208 208 0 1 0 0 416z"/>
+</symbol>
+<symbol id="building-columns" viewBox="0 0 512 512">
+<path class="fa-primary" style="fill:var(--fa-primary-color,inherit);opacity:var(--fa-primary-opacity,1);" d="M268.6 2.6c-8-3.4-17.2-3.4-25.2 0l-224 96c-14 6-21.8 21-18.7 35.8S16.8 160 32 160v8c0 13.3 10.7 24 24 24H456c13.3 0 24-10.7 24-24l0-8c15.2 0 28.3-10.7 31.3-25.6s-4.8-29.9-18.7-35.8l-224-96zM256 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/><path class="fa-secondary" style="fill:var(--fa-secondary-color,inherit);opacity:var(--fa-secondary-opacity,.4);" d="M128 192H64V420.3c-.6 .3-1.2 .7-1.7 1.1l-48 32c-11.7 7.8-17 22.4-12.9 35.9S17.9 512 32 512H480c14.1 0 26.5-9.2 30.6-22.7s-1.1-28.1-12.9-35.9l-48-32c-.6-.4-1.2-.7-1.8-1.1V192H384V416H344V192H280V416H232V192H168V416H128V192z"/>
+</symbol>
+<symbol id="arrow-up-right-from-square" viewBox="0 0 512 512">
+<path class="fa-primary" style="fill:var(--fa-primary-color,inherit);opacity:var(--fa-primary-opacity,1);" d="M288 32c0-17.7 14.3-32 32-32H480c17.7 0 32 14.3 32 32V192c0 17.7-14.3 32-32 32s-32-14.3-32-32V109.3L246.6 310.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L402.7 64H320c-17.7 0-32-14.3-32-32z"/><path class="fa-secondary" style="fill:var(--fa-secondary-color,inherit);opacity:var(--fa-secondary-opacity,.4);" d="M0 112C0 67.8 35.8 32 80 32H192c17.7 0 32 14.3 32 32s-14.3 32-32 32H80c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16H400c8.8 0 16-7.2 16-16V320c0-17.7 14.3-32 32-32s32 14.3 32 32V432c0 44.2-35.8 80-80 80H80c-44.2 0-80-35.8-80-80V112z"/>
+</symbol>
+<symbol id="grid-2-plus" viewBox="0 0 512 512">
+<path class="fa-primary" style="fill:var(--fa-primary-color,inherit);opacity:var(--fa-primary-opacity,1);" d="M408 296c0-13.3-10.7-24-24-24s-24 10.7-24 24v64H296c-13.3 0-24 10.7-24 24s10.7 24 24 24h64v64c0 13.3 10.7 24 24 24s24-10.7 24-24V408h64c13.3 0 24-10.7 24-24s-10.7-24-24-24H408V296z"/><path class="fa-secondary" style="fill:var(--fa-secondary-color,inherit);opacity:var(--fa-secondary-opacity,.4);" d="M32 80c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H80c-26.5 0-48-21.5-48-48V80zm0 256c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H80c-26.5 0-48-21.5-48-48V336zM336 32h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H336c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48z"/>
+</symbol>
+<symbol id="bars" viewBox="0 0 448 512">
+<path class="fa-primary" style="fill:var(--fa-primary-color,inherit);opacity:var(--fa-primary-opacity,1);" d="M448 96c0-17.7-14.3-32-32-32H32C14.3 64 0 78.3 0 96s14.3 32 32 32H416c17.7 0 32-14.3 32-32zm0 320c0-17.7-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32z"/><path class="fa-secondary" style="fill:var(--fa-secondary-color,inherit);opacity:var(--fa-secondary-opacity,.4);" d="M0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32z"/>
+</symbol>
+<symbol id="school" viewBox="0 0 640 512">
+<path class="fa-primary" style="fill:var(--fa-primary-color,inherit);opacity:var(--fa-primary-opacity,1);" d="M336 144v16h16c8.8 0 16 7.2 16 16s-7.2 16-16 16H320c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16s16 7.2 16 16zM80 208c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V208zm416 0c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H512c-8.8 0-16-7.2-16-16V208zM96 320h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16zm400 16c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H512c-8.8 0-16-7.2-16-16V336z"/><path class="fa-secondary" style="fill:var(--fa-secondary-color,inherit);opacity:var(--fa-secondary-opacity,.4);" d="M337.8 5.4C327-1.8 313-1.8 302.2 5.4L166.3 96H48C21.5 96 0 117.5 0 144V464c0 26.5 21.5 48 48 48H592c26.5 0 48-21.5 48-48V144c0-26.5-21.5-48-48-48H473.7L337.8 5.4zM256 416c0-35.3 28.7-64 64-64s64 28.7 64 64v96H256V416zM96 192h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V208c0-8.8 7.2-16 16-16zm400 16c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H512c-8.8 0-16-7.2-16-16V208zM96 320h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16zm400 16c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H512c-8.8 0-16-7.2-16-16V336zM320 88a88 88 0 1 1 0 176 88 88 0 1 1 0-176z"/>
+</symbol>
+<symbol id="x" viewBox="0 0 384 512">
+<path class="fa-primary" style="fill:var(--fa-primary-color,inherit);opacity:var(--fa-primary-opacity,1);" d=""/><path class="fa-secondary" style="fill:var(--fa-secondary-color,inherit);opacity:var(--fa-secondary-opacity,.4);" d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"/>
+</symbol>
+<symbol id="family" viewBox="0 0 512 512">
+<path class="fa-primary" style="fill:var(--fa-primary-color,inherit);opacity:var(--fa-primary-opacity,1);" d="M208 176a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM176 336c0-44.2 35.8-80 80-80s80 35.8 80 80v16c0 23.7-12.9 44.4-32 55.4V480c0 17.7-14.3 32-32 32H240c-17.7 0-32-14.3-32-32V407.4c-19.1-11.1-32-31.7-32-55.4V336z"/><path class="fa-secondary" style="fill:var(--fa-secondary-color,inherit);opacity:var(--fa-secondary-opacity,.4);" d="M128 0a64 64 0 1 1 0 128A64 64 0 1 1 128 0zM105.6 160h44.8c9.2 0 18.1 1.6 26.4 4.5c-.5 3.8-.8 7.6-.8 11.5c0 24.3 10.9 46.1 28 60.8c-35.7 18.7-60 56.1-60 99.2v16c0 28.4 12.4 54 32 71.6V480c0 6.1 .8 11.9 2.4 17.5c-8.7 9-20.9 14.5-34.4 14.5H112c-26.5 0-48-21.5-48-48V348.3c-26.5-9.5-44.7-35.8-42.2-65.6l4.1-49.3C29.3 191.9 64 160 105.6 160zM368 512c-13.5 0-25.7-5.6-34.4-14.5c1.6-5.6 2.4-11.4 2.4-17.5V423.6c19.6-17.6 32-43.1 32-71.6V336c0-43.1-24.3-80.5-60-99.2c17.1-14.7 28-36.5 28-60.8c0-2.4-.1-4.7-.3-7.1c9.6-5.7 20.8-8.9 32.6-8.9h31.4c28.6 0 53.7 18.9 61.5 46.4l39.1 136.8c5.8 20.4-9.5 40.8-30.8 40.8H448v80c0 26.5-21.5 48-48 48H368zM384 0a64 64 0 1 1 0 128A64 64 0 1 1 384 0z"/>
+</symbol>
+<symbol id="school-flag" viewBox="0 0 576 512">
+<path class="fa-primary" style="fill:var(--fa-primary-color,inherit);opacity:var(--fa-primary-opacity,1);" d="M297.4 1.4c2-.9 4.2-1.4 6.6-1.4h96c8.8 0 16 7.2 16 16V80c0 8.8-7.2 16-16 16H320 304 256V32c0-17.7 14.3-32 32-32c3.3 0 6.4 .5 9.4 1.4zM80 224h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V240c0-8.8 7.2-16 16-16zm384 0h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V240c0-8.8 7.2-16 16-16zM64 368c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V368zm400-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V368c0-8.8 7.2-16 16-16z"/><path class="fa-secondary" style="fill:var(--fa-secondary-color,inherit);opacity:var(--fa-secondary-opacity,.4);" d="M255.3 96l-89.6 64H64c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H240V400c0-26.5 21.5-48 48-48s48 21.5 48 48V512H512c35.3 0 64-28.7 64-64V224c0-35.3-28.7-64-64-64H410.3L320.7 96H255.3zM288 192a48 48 0 1 1 0 96 48 48 0 1 1 0-96zM64 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V240zm400-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V240c0-8.8 7.2-16 16-16zM64 368c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V368zm384 0c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H464c-8.8 0-16-7.2-16-16V368z"/>
+</symbol>
+<symbol id="person-chalkboard" viewBox="0 0 640 512">
+<path class="fa-primary" style="fill:var(--fa-primary-color,inherit);opacity:var(--fa-primary-opacity,1);" d="M384 128V64H576V256H384V192H320v80c0 26.5 21.5 48 48 48H592c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48H368c-26.5 0-48 21.5-48 48v80h64z"/><path class="fa-secondary" style="fill:var(--fa-secondary-color,inherit);opacity:var(--fa-secondary-opacity,.4);" d="M144 48a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm40 304V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V256.9L91.4 304.5c-9.1 15.1-28.8 20-43.9 10.9s-20-28.8-10.9-43.9l58.3-97c17.4-28.9 48.6-46.6 82.3-46.6h65.9H400c17.7 0 32 14.3 32 32s-14.3 32-32 32H264V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V352H184z"/>
+</symbol>
+<symbol id="pen-to-square" viewBox="0 0 512 512">
+<path class="fa-primary" style="fill:var(--fa-primary-color,inherit);opacity:var(--fa-primary-opacity,1);" d="M392.4 21.7L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0zM339.7 74.3L172.4 241.7c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3z"/><path class="fa-secondary" style="fill:var(--fa-secondary-color,inherit);opacity:var(--fa-secondary-opacity,.4);" d="M0 160c0-53 43-96 96-96h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H96c-17.7 0-32 14.3-32 32V416c0 17.7 14.3 32 32 32H352c17.7 0 32-14.3 32-32V320c0-17.7 14.3-32 32-32s32 14.3 32 32v96c0 53-43 96-96 96H96c-53 0-96-43-96-96V160z"/>
+</symbol>
+<symbol id="child-reaching" viewBox="0 0 384 512">
+<path class="fa-primary" style="fill:var(--fa-primary-color,inherit);opacity:var(--fa-primary-opacity,1);" d="M155.7 170.2c11.7 3.8 24 5.8 36.6 5.8c39.9 0 77.1-20.2 98.8-53.6l18.1-27.9c9.6-14.8 29.5-19 44.3-9.4s19 29.5 9.4 44.3l-18.2 27.9c-18.2 28-43.5 50-72.7 64.2V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V384H176v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V221.4C83.6 207.4 58.9 186.1 40.9 159L21.4 129.8c-9.8-14.7-5.8-34.6 8.9-44.4s34.6-5.8 44.4 8.9l19.5 29.2c14.3 21.5 35.1 37.4 58.8 45.8c.9 .3 1.8 .6 2.7 .9z"/><path class="fa-secondary" style="fill:var(--fa-secondary-color,inherit);opacity:var(--fa-secondary-opacity,.4);" d="M128 64a64 64 0 1 1 128 0A64 64 0 1 1 128 64z"/>
+</symbol>
+</svg>
\ No newline at end of file
diff --git a/public/images/light.svg b/public/images/light.svg
new file mode 100644
index 0000000..e8b508e
--- /dev/null
+++ b/public/images/light.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+<symbol id="school-flag" viewBox="0 0 576 512">
+<path d="M304 64h80V32H304V64zM272 16c0-8.8 7.2-16 16-16H400c8.8 0 16 7.2 16 16V80c0 8.8-7.2 16-16 16H315.5l89.6 64H512c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H352 320 256 224 64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64H170.9L272 87.8V64 16zm48 400c0-17.7-14.3-32-32-32s-32 14.3-32 32v64h64V416zm32 64H512c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H400c-3.3 0-6.6-1-9.3-3L288 115.7 185.3 189c-2.7 1.9-6 3-9.3 3H64c-17.7 0-32 14.3-32 32V448c0 17.7 14.3 32 32 32H224V416c0-35.3 28.7-64 64-64s64 28.7 64 64v64zM256 240a32 32 0 1 0 64 0 32 32 0 1 0 -64 0zm32 64a64 64 0 1 1 0-128 64 64 0 1 1 0 128zM64 256c0-17.7 14.3-32 32-32h32c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V256zm64 0H96v32h32V256zm320-32h32c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32H448c-17.7 0-32-14.3-32-32V256c0-17.7 14.3-32 32-32zm0 32v32h32V256H448zM64 384c0-17.7 14.3-32 32-32h32c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V384zm64 0H96v32h32V384zm320-32h32c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32H448c-17.7 0-32-14.3-32-32V384c0-17.7 14.3-32 32-32zm0 32v32h32V384H448z"/>
+</symbol>
+<symbol id="building-columns" viewBox="0 0 512 512">
+<path d="M263.9 2.1C259-.7 253-.7 248.1 2.1L15.8 133.7C6 139.3 0 149.6 0 160.8C0 178 14 192 31.2 192H256 480.8c17.2 0 31.2-14 31.2-31.2c0-11.2-6-21.6-15.8-27.1L263.9 2.1zM306.6 160c3.5-7.3 5.4-15.4 5.4-24c0-30.9-25.1-56-56-56s-56 25.1-56 56c0 8.6 1.9 16.7 5.4 24H34.3L256 34.4 477.7 160H306.6zM256 112a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM64 352c-8.8 0-16 7.2-16 16s7.2 16 16 16H448c8.8 0 16-7.2 16-16s-7.2-16-16-16V224H416V352H336V224H304V352H208V224H176V352H96V224H64V352zM40 416c-8.8 0-16 7.2-16 16s7.2 16 16 16H472c8.8 0 16-7.2 16-16s-7.2-16-16-16H40zM16 480c-8.8 0-16 7.2-16 16s7.2 16 16 16H496c8.8 0 16-7.2 16-16s-7.2-16-16-16H16z"/>
+</symbol>
+<symbol id="school" viewBox="0 0 640 512">
+<path d="M328.9 2.7c-5.4-3.6-12.4-3.6-17.8 0L171.2 96H64C28.7 96 0 124.7 0 160V448c0 35.3 28.7 64 64 64H256h32 64 32H576c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H468.8L328.9 2.7zM384 384c0-35.3-28.7-64-64-64s-64 28.7-64 64v96H64c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32H176c3.2 0 6.2-.9 8.9-2.7L320 35.2l135.1 90.1c2.6 1.8 5.7 2.7 8.9 2.7H576c17.7 0 32 14.3 32 32V448c0 17.7-14.3 32-32 32H384V384zm-32 96H288V384c0-17.7 14.3-32 32-32s32 14.3 32 32v96zM96 192v64c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32H128c-17.7 0-32 14.3-32 32zm64 0v64H128V192h32zm320-32c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32H480zm0 32h32v64H480V192zM96 352v64c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V352c0-17.7-14.3-32-32-32H128c-17.7 0-32 14.3-32 32zm64 0v64H128V352h32zm320-32c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V352c0-17.7-14.3-32-32-32H480zm0 32h32v64H480V352zM320 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128zm0 160a96 96 0 1 0 0-192 96 96 0 1 0 0 192zm16-128c0-8.8-7.2-16-16-16s-16 7.2-16 16v32c0 8.8 7.2 16 16 16h24c8.8 0 16-7.2 16-16s-7.2-16-16-16h-8V160z"/>
+</symbol>
+<symbol id="child-reaching" viewBox="0 0 384 512">
+<path d="M224 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm-96 0a64 64 0 1 1 128 0A64 64 0 1 1 128 64zM112 188c-27.8-14.9-51.4-37.4-67.5-65.8L34.1 103.9c-4.4-7.7-1.7-17.5 6-21.8s17.5-1.7 21.8 6l10.4 18.3c24.4 43 70.1 69.6 119.5 69.6c48.9 0 94.1-26 118.7-68.2l11.6-19.9c4.5-7.6 14.2-10.2 21.9-5.8s10.2 14.2 5.8 21.9l-11.6 19.9c-16 27.5-39.1 49.4-66.2 63.9V496c0 8.8-7.2 16-16 16s-16-7.2-16-16V384H144V496c0 8.8-7.2 16-16 16s-16-7.2-16-16V188zm32 13.1V352h96V201c-15.4 4.6-31.6 7-48.1 7c-16.4 0-32.5-2.4-47.9-6.9z"/>
+</symbol>
+</svg>
\ No newline at end of file
diff --git a/public/images/solid.svg b/public/images/solid.svg
new file mode 100644
index 0000000..e3fb715
--- /dev/null
+++ b/public/images/solid.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+<symbol id="chevron-right" viewBox="0 0 320 512">
+<path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/>
+</symbol>
+</svg>
\ No newline at end of file