fix: issue of get icons (#58)

src/utils/emoji.ts

@@ -2,6 +2,26 @@ import { renderColor } from '@/utils/color';
 import { EmojiMartData } from '@emoji-mart/data';
 import axios from 'axios';
 
+const http = axios.create();
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const pendingRequests: Map<string, Promise<any>> = new Map();
+
+async function httpGet(url: string) {
+  if(pendingRequests.has(url)) {
+    return pendingRequests.get(url);
+  }
+
+  const request = http.get(url).then((res) => {
+    pendingRequests.delete(url);
+    return res;
+  });
+
+  pendingRequests.set(url, request);
+
+  return request;
+}
+
 export async function randomEmoji(skin = 0) {
   const emojiData = await loadEmojiData();
   const emojis = (emojiData as EmojiMartData).emojis;
@@ -61,7 +81,7 @@ export async function loadIcons (): Promise<
     return icons;
   }
 
-  return axios.get('/af_icons/icons.json').then((res) => {
+  return httpGet('/af_icons/icons.json').then((res) => {
     icons = res.data;
     return res.data;
   });
@@ -69,8 +89,9 @@ export async function loadIcons (): Promise<
 
 export async function getIconBase64(id: string, color: string) {
   try {
-    const response = await fetch(`/af_icons/${id}.svg`);
-    let svgText = await response.text();
+    const response = await httpGet(`/af_icons/${id}.svg`);
+
+    let svgText = response.data as string;
 
     svgText = svgText.replace(/fill="[^"]*"/g, ``);
     svgText = svgText.replace('<svg', `<svg fill="${renderColor(color)}"`);