Add category icons as customizable svgs

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} />;
+}