Add category icons as customizable svgs

web/components/ui/CategoryIcon/CategoryIcon.module.scss

@@ -0,0 +1,4 @@
+.icon > path {
+  width: 10px;
+  fill: var(--text-color);
+}

web/components/ui/CategoryIcon/CategoryIcon.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import s from './CategoryIcon.module.scss';
+
+import GAME from './icons/games.svg';
+import CHAT from './icons/chat.svg';
+import CONFERENCE from './icons/conference.svg';
+import GOVERNMENT from './icons/gov.svg';
+import RELIGION from './icons/religion.svg';
+import TECH from './icons/tech.svg';
+import MUSIC from './icons/music.svg';
+
+interface Props {
+  tags: string[];
+}
+
+const ICON_MAPPING = {
+  game: GAME,
+  gamer: GAME,
+  games: GAME,
+  playing: GAME,
+
+  chat: CHAT,
+  chatting: CHAT,
+
+  conference: CONFERENCE,
+  event: CONFERENCE,
+  convention: CONFERENCE,
+
+  government: GOVERNMENT,
+
+  religion: RELIGION,
+  god: RELIGION,
+  church: RELIGION,
+  bible: RELIGION,
+
+  tech: TECH,
+  technology: TECH,
+  code: TECH,
+  software: TECH,
+  linux: TECH,
+  development: TECH,
+
+  music: MUSIC,
+  listening: MUSIC,
+};
+
+function getCategoryIconFromTags(tags: string[]): any {
+  const categories = tags.map(tag => ICON_MAPPING[tag]).filter(Boolean);
+  if (categories.length > 0) {
+    return categories[0];
+  }
+  return null;
+}
+
+export default function CategoryIcon({ tags }: Props) {
+  const Icon = getCategoryIconFromTags(tags);
+  if (!Icon) {
+    return null;
+  }
+
+  return <Icon className={s.icon} />;
+}

web/components/ui/CategoryIcon/icons/chat.svg

@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.3242 0H14.7461C6.66943 0 0 6.66943 0 14.7461C0 22.1318 5.59082 28.2573 12.7048 29.2529C13.1521 29.4632 14.2049 29.3945 14.7461 29.3945V33.7891C14.7461 34.3298 15.0437 34.8262 15.52 35.0809C15.9903 35.3332 16.5698 35.3103 17.0235 35.0079L25.4435 29.3945H32.3242C40.4009 29.3945 47.0703 22.8228 47.0703 14.7461C47.0703 6.66943 40.4009 0 32.3242 0ZM14.7461 17.6758C13.1311 17.6758 11.8164 16.3611 11.8164 14.7461C11.8164 13.1311 13.1311 11.8164 14.7461 11.8164C16.3611 11.8164 17.6758 13.1311 17.6758 14.7461C17.6758 16.3611 16.3611 17.6758 14.7461 17.6758ZM23.5352 17.6758C21.9201 17.6758 20.6055 16.3611 20.6055 14.7461C20.6055 13.1311 21.9201 11.8164 23.5352 11.8164C25.1502 11.8164 26.4648 13.1311 26.4648 14.7461C26.4648 16.3611 25.1502 17.6758 23.5352 17.6758ZM32.3242 17.6758C30.7092 17.6758 29.3945 16.3611 29.3945 14.7461C29.3945 13.1311 30.7092 11.8164 32.3242 11.8164C33.9393 11.8164 35.2539 13.1311 35.2539 14.7461C35.2539 16.3611 33.9393 17.6758 32.3242 17.6758Z" fill="black"/>
+<path d="M48.1877 22.4707C45.3217 28.2961 39.2436 32.3242 32.3242 32.3242H26.3304L18.6485 37.4454C17.2729 38.3644 15.5323 38.4117 14.1353 37.6629C12.7062 36.899 11.8164 35.4142 11.8164 33.7891V32.0796C8.51602 31.5233 5.46934 30.0209 3.07881 27.9102C3.02871 28.4052 2.92969 28.8908 2.92969 29.3945C2.92969 37.4712 9.59912 44.043 17.6758 44.043H24.5565L32.9766 49.7539C33.4302 50.0562 34.0098 50.0792 34.4801 49.8269C34.9563 49.5723 35.2539 49.0759 35.2539 48.5352V44.043C35.7952 44.043 36.8479 44.1116 37.2952 43.9014C44.4092 42.9058 50 36.7788 50 29.3945C50 26.9221 49.3295 24.5809 48.1877 22.4707Z" fill="black"/>
+</svg>

web/components/ui/CategoryIcon/icons/conference.svg

@@ -0,0 +1,8 @@
+<svg width="42" height="50" viewBox="0 0 42 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.72512 48.7927C9.85178 49.4994 10.4676 49.9953 11.1614 49.9945L30.8337 50C31.5971 50 32.2242 49.4158 32.2923 48.67C33.106 44.2178 34.0461 39.7915 34.9211 35.3518H7.07617C7.95616 39.8328 8.90558 44.2995 9.72512 48.7927Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.76562 15.346L8.62889 13.4296C9.29882 12.9809 9.47821 12.074 9.02948 11.4041C8.58075 10.7341 7.67382 10.5548 7.0039 11.0036L3.58896 13.289C3.13984 13.5393 2.83594 14.0188 2.83594 14.5695V18.9453H5.76562V15.346Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.3713 13.4296L36.2346 15.346V18.9453H39.1643V14.5695C39.1643 14.0189 38.8604 13.5393 38.4113 13.289L34.9963 11.0035C34.3264 10.5547 33.4195 10.734 32.9708 11.404C32.522 12.074 32.7013 12.9809 33.3713 13.4296Z" fill="black"/>
+<path d="M21.0001 10.635C23.9369 10.635 26.3176 8.25424 26.3176 5.31748C26.3176 2.38072 23.9369 0 21.0001 0C18.0633 0 15.6826 2.38072 15.6826 5.31748C15.6826 8.25424 18.0633 10.635 21.0001 10.635Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.0432 21.8751H1.95704C1.14805 21.8751 0.492188 22.531 0.492188 23.34V30.9572C0.492188 31.7662 1.14805 32.4221 1.95704 32.4221H40.0432C40.8522 32.4221 41.5081 31.7662 41.5081 30.9572V23.34C41.5081 22.531 40.8522 21.8751 40.0432 21.8751ZM22.4596 27.2541C22.4053 28.0136 21.7735 28.6134 21 28.6134C20.2196 28.6134 19.5834 28.0025 19.5395 27.233C19.5378 27.2048 19.5352 27.177 19.5352 27.1486C19.5352 27.1199 19.5378 27.0919 19.5395 27.0636C19.5825 26.3157 20.1855 25.7194 20.9363 25.687C20.9575 25.6861 20.9785 25.6837 21 25.6837C21.0214 25.6837 21.0422 25.6861 21.0633 25.687C21.8073 25.7188 22.4064 26.3042 22.4595 27.0423C22.462 27.0776 22.4649 27.1128 22.4649 27.1486C22.465 27.1842 22.4621 27.2191 22.4596 27.2541Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.2306 15.7248C32.2306 15.084 31.8191 14.5393 31.2459 14.3405C29.5925 13.6688 27.9235 13.0964 26.2271 12.6838C24.9788 12.3802 23.7254 12.1683 22.4649 12.0735V14.7017C22.4649 15.5107 21.8091 16.1666 21.0001 16.1666C20.1911 16.1666 19.5352 15.5107 19.5352 14.7017V12.0724C16.4837 12.3001 13.5564 13.2033 10.6851 14.3744C10.1193 14.6046 9.77646 15.1495 9.77627 15.7248L9.76953 18.9453H32.2306V15.7248Z" fill="black"/>
+</svg>

web/components/ui/CategoryIcon/icons/games.svg

@@ -0,0 +1,3 @@
+<svg width="46" height="34" viewBox="0 0 46 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.4166 0.333344C36.7318 0.333344 39.9112 1.6503 42.2554 3.99451C44.5996 6.33871 45.9166 9.51814 45.9166 12.8333V21.1667C45.9166 24.4819 44.5996 27.6613 42.2554 30.0055C39.9112 32.3497 36.7318 33.6667 33.4166 33.6667H12.5833C9.26805 33.6667 6.08862 32.3497 3.74442 30.0055C1.40021 27.6613 0.083252 24.4819 0.083252 21.1667V12.8333C0.083252 9.51814 1.40021 6.33871 3.74442 3.99451C6.08862 1.6503 9.26805 0.333344 12.5833 0.333344H33.4166ZM18.8333 10.75H14.6666V14.9167H10.4999V19.0833H14.6645L14.6666 23.25H18.8333L18.8312 19.0833H22.9999V14.9167H18.8333V10.75ZM35.4999 19.0833H31.3333V23.25H35.4999V19.0833ZM31.3333 10.75H27.1666V14.9167H31.3333V10.75Z" fill="black"/>
+</svg>

web/components/ui/CategoryIcon/icons/gov.svg

@@ -0,0 +1,9 @@
+<svg width="44" height="50" viewBox="0 0 44 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.0273438 50H43.9727V47.0703H41.043V44.1406H2.95703V47.0703H0.0273438V50Z" fill="black"/>
+<path d="M0.0273438 23.5352C0.0273438 25.153 1.33896 26.4648 2.95703 26.4648H41.043C42.661 26.4648 43.9727 25.153 43.9727 23.5352V20.6055H0.0273438V23.5352Z" fill="black"/>
+<path d="M32.2539 8.88672V0H20.5352V12.3758L9.93506 17.6758H34.0649L23.4648 12.3758V8.88672H32.2539Z" fill="black"/>
+<path d="M5.88672 29.3945H11.7461V41.2109H5.88672V29.3945Z" fill="black"/>
+<path d="M14.6758 29.3945H20.5352V41.2109H14.6758V29.3945Z" fill="black"/>
+<path d="M23.4648 29.3945H29.3242V41.2109H23.4648V29.3945Z" fill="black"/>
+<path d="M32.2539 29.3945H38.1133V41.2109H32.2539V29.3945Z" fill="black"/>
+</svg>

web/components/ui/CategoryIcon/icons/music.svg

@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M48.1332 11.8722L27.5277 17.7315C26.8982 17.9118 26.4648 18.4869 26.4648 19.1406C26.4648 26.4132 26.4648 31.7068 26.4648 39.0961C25.5996 38.5915 24.6071 38.2812 23.5352 38.2812C20.3036 38.2812 17.6758 40.9091 17.6758 44.1406C17.6758 47.3722 20.3036 50 23.5352 50C26.7667 50 29.3945 47.3722 29.3945 44.1406V29.0352L47.0703 24.0128V33.2367C46.2051 32.7321 45.2126 32.4219 44.1406 32.4219C40.9091 32.4219 38.2812 35.0497 38.2812 38.2812C38.2812 41.5128 40.9091 44.1406 44.1406 44.1406C47.3722 44.1406 50 41.5128 50 38.2812C50 28.9709 50 22.5701 50 13.2812C50 12.3124 49.0732 11.6066 48.1332 11.8722Z" fill="black"/>
+<path d="M16.9534 9.04834C14.0838 7.2874 11.7188 5.79785 11.7188 1.46484C11.7188 0.655176 11.0636 0 10.2539 0C9.44424 0 8.78906 0.655176 8.78906 1.46484C8.78906 10.5614 8.78906 4.55029 8.78906 27.2797C7.92383 26.7751 6.93135 26.4648 5.85938 26.4648C2.62783 26.4648 0 29.0927 0 32.3242C0 35.5558 2.62783 38.1836 5.85938 38.1836C9.09092 38.1836 11.7188 35.5558 11.7188 32.3242C11.7188 27.2752 11.7188 23.935 11.7188 18.3449C12.6771 19.1126 13.857 19.7441 14.8905 20.3438C17.9576 22.1218 20.6055 23.6582 20.6055 27.9297C20.6055 28.7394 21.2606 29.3945 22.0703 29.3945C22.88 29.3945 23.5352 28.7394 23.5352 27.9297V19.1406C23.5352 13.0853 20.039 10.9409 16.9534 9.04834Z" fill="black"/>
+</svg>

web/components/ui/CategoryIcon/icons/religion.svg

@@ -0,0 +1,9 @@
+<svg width="44" height="50" viewBox="0 0 44 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.5749 11.9148L38.7129 8.77644C39.2847 8.20462 39.2847 7.27689 38.7129 6.70506C38.1407 6.13286 37.2133 6.13286 36.6411 6.70506L33.5031 9.84303C32.9309 10.4152 32.9309 11.3426 33.5031 11.9148C34.075 12.4866 35.0027 12.487 35.5749 11.9148Z" fill="black"/>
+<path d="M42.3841 20.3971H39.2461C38.437 20.3971 37.7812 21.0529 37.7812 21.862C37.7812 22.6707 38.437 23.3268 39.2461 23.3268H42.3841C43.1932 23.3268 43.8489 22.6707 43.8489 21.862C43.8489 21.0529 43.1932 20.3971 42.3841 20.3971Z" fill="black"/>
+<path d="M23.4519 1.46484C23.4519 0.655747 22.7961 0 21.987 0C21.178 0 20.5222 0.655747 20.5222 1.46484V4.60281C20.5222 5.41191 21.178 6.06766 21.987 6.06766C22.7961 6.06766 23.4519 5.41191 23.4519 4.60281V1.46484Z" fill="black"/>
+<path d="M8.39911 11.9148C8.97094 12.4866 9.89867 12.487 10.4709 11.9148C11.0427 11.3426 11.0427 10.4152 10.4709 9.84303L7.3329 6.70506C6.7607 6.13286 5.83335 6.13286 5.26114 6.70506C4.68932 7.27727 4.68932 8.20462 5.26114 8.77644L8.39911 11.9148Z" fill="black"/>
+<path d="M6.19266 21.862C6.19266 21.0529 5.53691 20.3971 4.72781 20.3971H1.58984C0.780746 20.3971 0.125 21.0529 0.125 21.862C0.125 22.6707 0.780746 23.3268 1.58984 23.3268H4.72781C5.53691 23.3268 6.19266 22.6711 6.19266 21.862Z" fill="black"/>
+<path d="M14.2463 29.6279C14.247 28.3889 14.5408 27.1392 15.0996 26.0051C15.0996 26.0051 18.957 18.2994 19.6948 16.827C20.2361 15.7383 20.5222 14.5233 20.5222 13.3125C20.5222 12.1185 20.0709 10.9958 19.25 10.1413L18.0243 8.91568C17.5532 8.44419 16.7586 8.57313 16.4603 9.16936L8.12484 25.8403C8.02299 26.0436 7.97035 26.2679 7.97035 26.4953V37.6563L4.40323 41.2231C3.83141 41.7953 3.83141 42.7226 4.40323 43.2948L10.6792 49.5707C11.2514 50.1429 12.1791 50.1429 12.7509 49.5707L18.6542 43.6671C19.8588 42.4655 20.5222 40.8637 20.5222 39.157V26.8081C20.5222 26.5777 20.3357 26.3912 20.1056 26.3912C18.4874 26.3912 17.176 27.703 17.176 29.3208V34.4157C17.176 35.2481 16.4813 35.9183 15.6402 35.8787C14.8524 35.8417 14.2463 35.163 14.2463 34.3742V29.6333C14.2463 29.6317 14.2463 29.6298 14.2463 29.6279Z" fill="black"/>
+<path d="M36.0041 37.6563V26.4953C36.0041 26.2679 35.9511 26.0436 35.8493 25.8403L27.5138 9.16936C27.2155 8.57313 26.4213 8.44419 25.9498 8.91568L24.7241 10.1413C23.9036 10.9958 23.4519 12.1185 23.4519 13.3125C23.4519 14.5233 23.738 15.7383 24.2793 16.827C25.0171 18.2994 28.8749 26.0051 28.8749 26.0051C29.4337 27.1392 29.7271 28.3889 29.7282 29.6279V29.6333V34.3742C29.7282 35.163 29.1221 35.8417 28.3339 35.8791C27.4928 35.9187 26.7985 35.2481 26.7985 34.4157V29.3208C26.7985 27.703 25.4867 26.3912 23.8688 26.3912C23.6388 26.3912 23.4519 26.5777 23.4519 26.8081V39.157C23.4519 40.8637 24.1157 42.4655 25.3203 43.6671L31.2236 49.5707C31.7954 50.1429 32.7231 50.1429 33.2949 49.5711L39.5709 43.2948C40.1431 42.7226 40.1431 41.7953 39.5709 41.2234L36.0041 37.6563Z" fill="black"/>
+</svg>

web/components/ui/CategoryIcon/icons/tech.svg

@@ -0,0 +1,11 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.39643 28.6136L4.65925 29.1484C5.17475 31.6468 6.16128 34.0243 7.56612 36.1537L5.6339 38.8504C5.23298 39.3962 5.23987 40.141 5.65087 40.6793C6.13807 41.2748 6.65578 41.8448 7.20178 42.3869C7.75263 42.9387 8.32045 43.4471 8.90525 43.9387C9.44388 44.3505 10.1897 44.3574 10.7359 43.9556L13.4309 42.0225C15.5582 43.4282 17.934 44.4154 20.4311 44.9311L20.965 48.1965C21.0667 48.8644 21.5997 49.3836 22.2701 49.4677C22.7345 49.5203 23.2024 49.5524 23.6804 49.5762C23.9125 49.5875 24.1392 49.5037 24.3081 49.3441C24.4769 49.1845 24.5735 48.9629 24.5753 48.7304V41.9387C24.5728 41.4809 24.2092 41.1067 23.7516 41.0912C15.1873 40.6472 8.47096 33.5737 8.47096 24.9979C8.47096 16.4222 15.1873 9.34863 23.7516 8.90466C24.2092 8.88915 24.5728 8.51506 24.5753 8.05715V1.27132C24.5741 1.03904 24.4783 0.817259 24.3098 0.657239C24.1413 0.497218 23.9149 0.412984 23.6828 0.42381C23.2065 0.443577 22.7357 0.476959 22.27 0.523793C21.5994 0.615163 21.0686 1.1364 20.9649 1.80519L20.431 5.07056C17.934 5.58704 15.5583 6.57439 13.4308 7.97996L10.7358 6.04602C10.1896 5.64421 9.44379 5.65109 8.90517 6.063C8.31126 6.55085 7.7427 7.06881 7.2017 7.61473C6.6516 8.15294 6.13372 8.72315 5.65079 9.32238C5.23807 9.86133 5.23118 10.6081 5.63381 11.1546L7.56603 13.8513C6.16153 15.98 5.17499 18.3565 4.65917 20.8541L1.39635 21.3881C0.728212 21.4901 0.209109 22.0234 0.125121 22.6941C-0.041707 24.215 -0.041707 25.7495 0.125121 27.2704C0.200497 27.9522 0.719764 28.5009 1.39643 28.6136Z" fill="black"/>
+<path d="M23.7648 12.314C17.0695 12.7381 11.8562 18.2921 11.8562 25.0008C11.8562 31.7095 17.0695 37.2635 23.7648 37.6876C23.9778 37.6965 24.1852 37.6175 24.3383 37.4691C24.4914 37.3208 24.577 37.116 24.575 36.9029V13.0987C24.5771 12.8855 24.4915 12.6808 24.3383 12.5325C24.1852 12.3841 23.9778 12.3051 23.7648 12.314Z" fill="black"/>
+<path d="M30.5074 13.136H26.27V14.831H30.5074C31.9098 14.8268 33.0456 13.691 33.0498 12.2885V7.04772C34.2173 6.635 34.9176 5.4412 34.7082 4.22075C34.4988 3.00029 33.4406 2.10825 32.2023 2.10825C30.9641 2.10825 29.9059 3.00029 29.6965 4.22075C29.4871 5.4412 30.1873 6.635 31.3548 7.04772V12.2885C31.3548 12.7566 30.9754 13.136 30.5074 13.136Z" fill="black"/>
+<path d="M26.27 18.221H34.7449C35.213 18.221 35.5924 17.8415 35.5924 17.3734C35.5924 16.9054 35.213 16.5259 34.7449 16.5259H26.27V18.221Z" fill="black"/>
+<path d="M26.27 36.8655H30.5074C30.9755 36.8655 31.3549 37.245 31.3549 37.713V42.9539C30.1874 43.3666 29.4872 44.5604 29.6966 45.7808C29.906 47.0013 30.9641 47.8933 32.2024 47.8933C33.4407 47.8933 34.4989 47.0013 34.7083 45.7808C34.9177 44.5604 34.2174 43.3666 33.0499 42.9539V37.713C33.0458 36.3106 31.9099 35.1748 30.5075 35.1706H26.2701V36.8655H26.27Z" fill="black"/>
+<path d="M38.9822 28.3907H26.27V30.0857H38.9822C39.4503 30.0857 39.8298 30.4651 39.8298 30.9332V35.3266C38.6623 35.7393 37.962 36.9331 38.1714 38.1536C38.3808 39.374 39.4389 40.2661 40.6773 40.2661C41.9155 40.2661 42.9737 39.374 43.1831 38.1536C43.3925 36.9331 42.6922 35.7393 41.5248 35.3266V30.9332C41.5205 29.5307 40.3847 28.3949 38.9822 28.3907Z" fill="black"/>
+<path d="M47.4571 22.4583C46.3835 22.4628 45.4284 23.1411 45.0706 24.1533H26.27V25.8482H45.0706C45.5036 27.064 46.7801 27.7613 48.0371 27.4686C49.2942 27.176 50.1314 25.9867 49.983 24.7046C49.8346 23.4227 48.7477 22.4561 47.4571 22.4583Z" fill="black"/>
+<path d="M35.5924 32.6282C35.5924 32.1601 35.213 31.7806 34.7449 31.7806H26.27V33.4756H34.7449C35.213 33.4757 35.5924 33.0962 35.5924 32.6282Z" fill="black"/>
+<path d="M41.5248 19.0685V14.6751C42.6922 14.2624 43.3925 13.0686 43.1831 11.8481C42.9737 10.6276 41.9156 9.7356 40.6773 9.7356C39.439 9.7356 38.3808 10.6276 38.1714 11.8481C37.962 13.0686 38.6623 14.2624 39.8298 14.6751V19.0685C39.8298 19.5365 39.4503 19.916 38.9822 19.916H26.27V21.6109H38.9822C40.3848 21.6066 41.5206 20.4708 41.5248 19.0685Z" fill="black"/>
+</svg>

web/components/ui/Content/Content.tsx

@@ -26,6 +26,7 @@ import { Follower } from '../../../interfaces/follower';
 import SocialLinks from '../SocialLinks/SocialLinks';
 import NotifyReminderPopup from '../NotifyReminderPopup/NotifyReminderPopup';
 import ServerLogo from '../Logo/Logo';
+import CategoryIcon from '../CategoryIcon/CategoryIcon';
 
 const { TabPane } = Tabs;
 const { Content } = Layout;
@@ -91,7 +92,10 @@ export default function ContentComponent() {
               <ServerLogo src="/logo" />
               <div className={s.titleSection}>
                 <div className={s.title}>{name}</div>
-                <div className={s.subtitle}>{title}</div>
+                <div className={s.subtitle}>
+                  {title}
+                  <CategoryIcon tags={tags} />
+                </div>
                 <div>{tags.length > 0 && tags.map(tag => <span key={tag}>#{tag}&nbsp;</span>)}</div>
               </div>
             </div>

web/next.config.js

@@ -2,6 +2,15 @@ const withLess = require('next-with-less');
 
 module.exports = withLess({
   trailingSlash: true,
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      use: ['@svgr/webpack'],
+    });
+
+    return config;
+  },
   async rewrites() {
     return [
       {

web/package-lock.json

@@ -56,6 +56,7 @@
         "@storybook/manager-webpack5": "^6.4.22",
         "@storybook/preset-scss": "^1.0.3",
         "@storybook/testing-library": "^0.0.9",
+        "@svgr/webpack": "^6.2.1",
         "@types/chart.js": "2.9.35",
         "@types/classnames": "2.3.1",
         "@types/markdown-it": "12.2.3",
@@ -438,9 +439,9 @@
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
-      "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==",
+      "version": "7.17.12",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz",
+      "integrity": "sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -1562,6 +1563,21 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-react-constant-elements": {
+      "version": "7.17.12",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.17.12.tgz",
+      "integrity": "sha512-maEkX2xs2STuv2Px8QuqxqjhV2LsFobT1elCgyU5704fcyTu9DyD/bJXxD/mrRiVyhpHweOQ00OJ5FKhHq9oEw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.17.12"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-react-display-name": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.7.tgz",
@@ -10656,6 +10672,335 @@
         "node": ">=8"
       }
     },
+    "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.0.0.tgz",
+      "integrity": "sha512-MdPdhdWLtQsjd29Wa4pABdhWbaRMACdM1h31BY+c6FghTZqNGT7pEYdBoaGeKtdTOBC/XNFQaKVj+r/Ei2ryWA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-6.0.0.tgz",
+      "integrity": "sha512-aVdtfx9jlaaxc3unA6l+M9YRnKIZjOhQPthLKqmTXC8UVkBLDRGwPKo+r8n3VZN8B34+yVajzPTZ+ptTSuZZCw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-6.0.0.tgz",
+      "integrity": "sha512-Ccj42ApsePD451AZJJf1QzTD1B/BOU392URJTeXFxSK709i0KUsGtbwyiqsKu7vsYxpTM0IA5clAKDyf9RCZyA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.0.0.tgz",
+      "integrity": "sha512-88V26WGyt1Sfd1emBYmBJRWMmgarrExpKNVmI9vVozha4kqs6FzQJ/Kp5+EYli1apgX44518/0+t9+NU36lThQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.0.0.tgz",
+      "integrity": "sha512-F7YXNLfGze+xv0KMQxrl2vkNbI9kzT9oDK55/kUuymh1ACyXkMV+VZWX1zEhSTfEKh7VkHVZGmVtHg8eTZ6PRg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.0.0.tgz",
+      "integrity": "sha512-+rghFXxdIqJNLQK08kwPBD3Z22/0b2tEZ9lKiL/yTfuyj1wW8HUXu4bo/XkogATIYuXSghVQOOCwURXzHGKyZA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.0.0.tgz",
+      "integrity": "sha512-VaphyHZ+xIKv5v0K0HCzyfAaLhPGJXSk2HkpYfXIOKb7DjLBv0soHDxNv6X0vr2titsxE7klb++u7iOf7TSrFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-svg-component": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.2.0.tgz",
+      "integrity": "sha512-bhYIpsORb++wpsp91fymbFkf09Z/YEKR0DnFjxvN+8JHeCUD2unnh18jIMKnDJTWtvpTaGYPXELVe4OOzFI0xg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-preset": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-6.2.0.tgz",
+      "integrity": "sha512-4WQNY0J71JIaL03DRn0vLiz87JXx0b9dYm2aA8XHlQJQoixMl4r/soYHm8dsaJZ3jWtkCiOYy48dp9izvXhDkQ==",
+      "dev": true,
+      "dependencies": {
+        "@svgr/babel-plugin-add-jsx-attribute": "^6.0.0",
+        "@svgr/babel-plugin-remove-jsx-attribute": "^6.0.0",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "^6.0.0",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "^6.0.0",
+        "@svgr/babel-plugin-svg-dynamic-title": "^6.0.0",
+        "@svgr/babel-plugin-svg-em-dimensions": "^6.0.0",
+        "@svgr/babel-plugin-transform-react-native-svg": "^6.0.0",
+        "@svgr/babel-plugin-transform-svg-component": "^6.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/core": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-6.2.1.tgz",
+      "integrity": "sha512-NWufjGI2WUyrg46mKuySfviEJ6IxHUOm/8a3Ph38VCWSp+83HBraCQrpEM3F3dB6LBs5x8OElS8h3C0oOJaJAA==",
+      "dev": true,
+      "dependencies": {
+        "@svgr/plugin-jsx": "^6.2.1",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/core/node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@svgr/core/node_modules/cosmiconfig": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
+      "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@svgr/core/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@svgr/hast-util-to-babel-ast": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.2.1.tgz",
+      "integrity": "sha512-pt7MMkQFDlWJVy9ULJ1h+hZBDGFfSCwlBNW1HkLnVi7jUhyEXUaGYWi1x6bM2IXuAR9l265khBT4Av4lPmaNLQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.15.6",
+        "entities": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/hast-util-to-babel-ast/node_modules/entities": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/@svgr/plugin-jsx": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-6.2.1.tgz",
+      "integrity": "sha512-u+MpjTsLaKo6r3pHeeSVsh9hmGRag2L7VzApWIaS8imNguqoUwDq/u6U/NDmYs/KAsrmtBjOEaAAPbwNGXXp1g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.15.5",
+        "@svgr/babel-preset": "^6.2.0",
+        "@svgr/hast-util-to-babel-ast": "^6.2.1",
+        "svg-parser": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "^6.0.0"
+      }
+    },
+    "node_modules/@svgr/plugin-svgo": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-6.2.0.tgz",
+      "integrity": "sha512-oDdMQONKOJEbuKwuy4Np6VdV6qoaLLvoY86hjvQEgU82Vx1MSWRyYms6Sl0f+NtqxLI/rDVufATbP/ev996k3Q==",
+      "dev": true,
+      "dependencies": {
+        "cosmiconfig": "^7.0.1",
+        "deepmerge": "^4.2.2",
+        "svgo": "^2.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "^6.0.0"
+      }
+    },
+    "node_modules/@svgr/plugin-svgo/node_modules/cosmiconfig": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
+      "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@svgr/plugin-svgo/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@svgr/webpack": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-6.2.1.tgz",
+      "integrity": "sha512-h09ngMNd13hnePwgXa+Y5CgOjzlCvfWLHg+MBnydEedAnuLRzUHUJmGS3o2OsrhxTOOqEsPOFt5v/f6C5Qulcw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.15.5",
+        "@babel/plugin-transform-react-constant-elements": "^7.14.5",
+        "@babel/preset-env": "^7.15.6",
+        "@babel/preset-react": "^7.14.5",
+        "@babel/preset-typescript": "^7.15.0",
+        "@svgr/core": "^6.2.1",
+        "@svgr/plugin-jsx": "^6.2.1",
+        "@svgr/plugin-svgo": "^6.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
     "node_modules/@szmarczak/http-timer": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
@@ -10722,6 +11067,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/@types/aria-query": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz",
@@ -15258,6 +15612,18 @@
         "node": ">=4"
       }
     },
+    "node_modules/csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "dev": true,
+      "dependencies": {
+        "css-tree": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/cssom": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
@@ -29898,6 +30264,42 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
+      "dev": true
+    },
+    "node_modules/svgo": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
+      "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
+      "dev": true,
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^4.1.3",
+        "css-tree": "^1.1.3",
+        "csso": "^4.2.0",
+        "picocolors": "^1.0.0",
+        "stable": "^0.1.8"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/svgo/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -32493,9 +32895,9 @@
       }
     },
     "@babel/helper-plugin-utils": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
-      "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA=="
+      "version": "7.17.12",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz",
+      "integrity": "sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA=="
     },
     "@babel/helper-remap-async-to-generator": {
       "version": "7.16.8",
@@ -33219,6 +33621,15 @@
         "@babel/helper-plugin-utils": "^7.16.7"
       }
     },
+    "@babel/plugin-transform-react-constant-elements": {
+      "version": "7.17.12",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.17.12.tgz",
+      "integrity": "sha512-maEkX2xs2STuv2Px8QuqxqjhV2LsFobT1elCgyU5704fcyTu9DyD/bJXxD/mrRiVyhpHweOQ00OJ5FKhHq9oEw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.17.12"
+      }
+    },
     "@babel/plugin-transform-react-display-name": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.7.tgz",
@@ -40082,6 +40493,194 @@
         }
       }
     },
+    "@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.0.0.tgz",
+      "integrity": "sha512-MdPdhdWLtQsjd29Wa4pABdhWbaRMACdM1h31BY+c6FghTZqNGT7pEYdBoaGeKtdTOBC/XNFQaKVj+r/Ei2ryWA==",
+      "dev": true,
+      "requires": {}
+    },
+    "@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-6.0.0.tgz",
+      "integrity": "sha512-aVdtfx9jlaaxc3unA6l+M9YRnKIZjOhQPthLKqmTXC8UVkBLDRGwPKo+r8n3VZN8B34+yVajzPTZ+ptTSuZZCw==",
+      "dev": true,
+      "requires": {}
+    },
+    "@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-6.0.0.tgz",
+      "integrity": "sha512-Ccj42ApsePD451AZJJf1QzTD1B/BOU392URJTeXFxSK709i0KUsGtbwyiqsKu7vsYxpTM0IA5clAKDyf9RCZyA==",
+      "dev": true,
+      "requires": {}
+    },
+    "@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.0.0.tgz",
+      "integrity": "sha512-88V26WGyt1Sfd1emBYmBJRWMmgarrExpKNVmI9vVozha4kqs6FzQJ/Kp5+EYli1apgX44518/0+t9+NU36lThQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.0.0.tgz",
+      "integrity": "sha512-F7YXNLfGze+xv0KMQxrl2vkNbI9kzT9oDK55/kUuymh1ACyXkMV+VZWX1zEhSTfEKh7VkHVZGmVtHg8eTZ6PRg==",
+      "dev": true,
+      "requires": {}
+    },
+    "@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.0.0.tgz",
+      "integrity": "sha512-+rghFXxdIqJNLQK08kwPBD3Z22/0b2tEZ9lKiL/yTfuyj1wW8HUXu4bo/XkogATIYuXSghVQOOCwURXzHGKyZA==",
+      "dev": true,
+      "requires": {}
+    },
+    "@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.0.0.tgz",
+      "integrity": "sha512-VaphyHZ+xIKv5v0K0HCzyfAaLhPGJXSk2HkpYfXIOKb7DjLBv0soHDxNv6X0vr2titsxE7klb++u7iOf7TSrFQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "@svgr/babel-plugin-transform-svg-component": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.2.0.tgz",
+      "integrity": "sha512-bhYIpsORb++wpsp91fymbFkf09Z/YEKR0DnFjxvN+8JHeCUD2unnh18jIMKnDJTWtvpTaGYPXELVe4OOzFI0xg==",
+      "dev": true,
+      "requires": {}
+    },
+    "@svgr/babel-preset": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-6.2.0.tgz",
+      "integrity": "sha512-4WQNY0J71JIaL03DRn0vLiz87JXx0b9dYm2aA8XHlQJQoixMl4r/soYHm8dsaJZ3jWtkCiOYy48dp9izvXhDkQ==",
+      "dev": true,
+      "requires": {
+        "@svgr/babel-plugin-add-jsx-attribute": "^6.0.0",
+        "@svgr/babel-plugin-remove-jsx-attribute": "^6.0.0",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "^6.0.0",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "^6.0.0",
+        "@svgr/babel-plugin-svg-dynamic-title": "^6.0.0",
+        "@svgr/babel-plugin-svg-em-dimensions": "^6.0.0",
+        "@svgr/babel-plugin-transform-react-native-svg": "^6.0.0",
+        "@svgr/babel-plugin-transform-svg-component": "^6.2.0"
+      }
+    },
+    "@svgr/core": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-6.2.1.tgz",
+      "integrity": "sha512-NWufjGI2WUyrg46mKuySfviEJ6IxHUOm/8a3Ph38VCWSp+83HBraCQrpEM3F3dB6LBs5x8OElS8h3C0oOJaJAA==",
+      "dev": true,
+      "requires": {
+        "@svgr/plugin-jsx": "^6.2.1",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^7.0.1"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+          "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+          "dev": true
+        },
+        "cosmiconfig": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
+          "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==",
+          "dev": true,
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.2.1",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.10.0"
+          }
+        },
+        "yaml": {
+          "version": "1.10.2",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+          "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+          "dev": true
+        }
+      }
+    },
+    "@svgr/hast-util-to-babel-ast": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.2.1.tgz",
+      "integrity": "sha512-pt7MMkQFDlWJVy9ULJ1h+hZBDGFfSCwlBNW1HkLnVi7jUhyEXUaGYWi1x6bM2IXuAR9l265khBT4Av4lPmaNLQ==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.15.6",
+        "entities": "^3.0.1"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+          "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+          "dev": true
+        }
+      }
+    },
+    "@svgr/plugin-jsx": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-6.2.1.tgz",
+      "integrity": "sha512-u+MpjTsLaKo6r3pHeeSVsh9hmGRag2L7VzApWIaS8imNguqoUwDq/u6U/NDmYs/KAsrmtBjOEaAAPbwNGXXp1g==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.15.5",
+        "@svgr/babel-preset": "^6.2.0",
+        "@svgr/hast-util-to-babel-ast": "^6.2.1",
+        "svg-parser": "^2.0.2"
+      }
+    },
+    "@svgr/plugin-svgo": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-6.2.0.tgz",
+      "integrity": "sha512-oDdMQONKOJEbuKwuy4Np6VdV6qoaLLvoY86hjvQEgU82Vx1MSWRyYms6Sl0f+NtqxLI/rDVufATbP/ev996k3Q==",
+      "dev": true,
+      "requires": {
+        "cosmiconfig": "^7.0.1",
+        "deepmerge": "^4.2.2",
+        "svgo": "^2.5.0"
+      },
+      "dependencies": {
+        "cosmiconfig": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
+          "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==",
+          "dev": true,
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.2.1",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.10.0"
+          }
+        },
+        "yaml": {
+          "version": "1.10.2",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+          "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+          "dev": true
+        }
+      }
+    },
+    "@svgr/webpack": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-6.2.1.tgz",
+      "integrity": "sha512-h09ngMNd13hnePwgXa+Y5CgOjzlCvfWLHg+MBnydEedAnuLRzUHUJmGS3o2OsrhxTOOqEsPOFt5v/f6C5Qulcw==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.15.5",
+        "@babel/plugin-transform-react-constant-elements": "^7.14.5",
+        "@babel/preset-env": "^7.15.6",
+        "@babel/preset-react": "^7.14.5",
+        "@babel/preset-typescript": "^7.15.0",
+        "@svgr/core": "^6.2.1",
+        "@svgr/plugin-jsx": "^6.2.1",
+        "@svgr/plugin-svgo": "^6.2.0"
+      }
+    },
     "@szmarczak/http-timer": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
@@ -40131,6 +40730,12 @@
       "dev": true,
       "peer": true
     },
+    "@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "dev": true
+    },
     "@types/aria-query": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz",
@@ -43757,6 +44362,15 @@
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
     },
+    "csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "dev": true,
+      "requires": {
+        "css-tree": "^1.1.2"
+      }
+    },
     "cssom": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
@@ -55026,6 +55640,35 @@
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
+    "svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
+      "dev": true
+    },
+    "svgo": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
+      "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
+      "dev": true,
+      "requires": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^4.1.3",
+        "css-tree": "^1.1.3",
+        "csso": "^4.2.0",
+        "picocolors": "^1.0.0",
+        "stable": "^0.1.8"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+          "dev": true
+        }
+      }
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

web/package.json

@@ -60,6 +60,7 @@
     "@storybook/manager-webpack5": "^6.4.22",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/testing-library": "^0.0.9",
+    "@svgr/webpack": "^6.2.1",
     "@types/chart.js": "2.9.35",
     "@types/classnames": "2.3.1",
     "@types/markdown-it": "12.2.3",

web/stories/CategoryIcon.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import CategoryIcon from '../components/ui/CategoryIcon/CategoryIcon';
+
+export default {
+  title: 'owncast/Components/Category icon',
+  component: CategoryIcon,
+  parameters: {},
+} as ComponentMeta<typeof CategoryIcon>;
+
+const Template: ComponentStory<typeof CategoryIcon> = args => <CategoryIcon {...args} />;
+
+export const Game = Template.bind({});
+Game.args = {
+  tags: ['games', 'fun'],
+};
+
+export const Chat = Template.bind({});
+Chat.args = {
+  tags: ['blah', 'chat', 'games', 'fun'],
+};
+
+export const Conference = Template.bind({});
+Conference.args = {
+  tags: ['blah', 'conference', 'games', 'fun'],
+};