Memoized icons

components/AdminMessages.tsx

@@ -1,7 +1,7 @@
 import { AdminMessageLevel, AdminMessagesProps } from "@/submodules/react-components/types/admin-messages";
 import { CurrentPage } from "@/submodules/react-components/hooks/web-socket/constants";
-import { IconAlertCircle, IconInfoSquare, IconPoint, IconX } from "@tabler/icons-react";
 import { useMemo } from "react";
+import { MemoIconAlertCircle, MemoIconInfoSquare, MemoIconPoint, MemoIconX } from "./kern-icons/icons";
 
 export default function AdminMessages(props: AdminMessagesProps) {
     const isOnLabelingPage = useMemo(() => props.currentPage == CurrentPage.LABELING, [props.currentPage]);
@@ -18,13 +18,13 @@ export default function AdminMessages(props: AdminMessagesProps) {
             <div key={activeMessage.id} className={`pointer-events-auto items-center justify-between gap-x-6 py-2.5 mt-2 border px-6 sm:rounded-xl sm:py-3 sm:pr-3.5 sm:pl-4 ${activeMessage.borderColor} ${activeMessage.backgroundColor} ${activeMessage.visible ? 'flex' : 'hidden'}`}
                 style={{ maxWidth: props.maxWidth ?? 'calc(100vw - 200px)' }}>
                 <div className={`text-sm leading-6 flex flex-row items-center w-full ${activeMessage.textColor}`}>
-                    {activeMessage.level == AdminMessageLevel.INFO && <IconInfoSquare className="text-blue-700" size={24} />}
-                    {activeMessage.level == AdminMessageLevel.WARNING && <IconAlertCircle className="text-yellow-700" size={24} />}
-                    <strong className="font-semibold uppercase">{activeMessage.level}</strong><IconPoint className="mx-2" size={16} />
+                    {activeMessage.level == AdminMessageLevel.INFO && <MemoIconInfoSquare className="text-blue-700" size={24} />}
+                    {activeMessage.level == AdminMessageLevel.WARNING && <MemoIconAlertCircle className="text-yellow-700" size={24} />}
+                    <strong className="font-semibold uppercase">{activeMessage.level}</strong><MemoIconPoint className="mx-2" size={16} />
                     <strong className="font-semibold">{activeMessage.text}</strong>
-                    {activeMessage.displayDate && <><IconPoint className="mx-2" size={16} /><div>Scheduled for {activeMessage.displayDate}</div></>}
+                    {activeMessage.displayDate && <><MemoIconPoint className="mx-2" size={16} /><div>Scheduled for {activeMessage.displayDate}</div></>}
                     <button type="button" className="-my-1.5 ml-auto mr-0 flex-none p-1.5" onClick={() => closeMessage(activeMessage.id)}>
-                        <IconX className={`${activeMessage.textColor} cursor-pointer`} size={20} strokeWidth={1.5} />
+                        <MemoIconX className={`${activeMessage.textColor} cursor-pointer`} size={20} strokeWidth={1.5} />
                     </button>
                 </div>
             </div >))

components/InfoButton.tsx

@@ -1,10 +1,10 @@
 import { combineClassNames } from "@/submodules/javascript-functions/general";
 import { useDefaults } from "@/submodules/react-components/hooks/useDefaults";
-import { IconInfoCircle } from "@tabler/icons-react";
 import { Dispatch, Fragment, SetStateAction, useEffect, useRef, useState } from "react";
 import useOnClickOutside from "@/submodules/react-components/hooks/useHooks/useOnClickOutside";
 import { Transition } from "@headlessui/react";
 import { INFO_BUTTON_DEFAULT_VALUES, InfoButtonConfig, InfoButtonProps } from "../types/infoButton";
+import { MemoIconInfoCircle } from "./kern-icons/icons";
 
 
 function generateAndCheckConfig(props: InfoButtonProps, setOpen: Dispatch<SetStateAction<boolean>>): InfoButtonConfig {
@@ -45,7 +45,7 @@ export function InfoButton(_props: InfoButtonProps) {
     if (!config) return null;
     return (
         <div className={combineClassNames("relative w-fit p-1", config.cursorClass)} onClick={props.access == 'click' ? config.showInfo : undefined} onMouseEnter={props.access == 'hover' ? config.showInfo : undefined} onMouseLeave={props.access == 'hover' ? config.hideInfo : undefined}>
-            <IconInfoCircle size={config.size} className={props.infoButtonColorClass} />
+            <MemoIconInfoCircle size={config.size} className={props.infoButtonColorClass} />
             {props.display == "absoluteDiv" ? <RenderDiv
                 positionClass={config.positionClass + " " + props.addClasses}
                 content={props.content}
@@ -76,7 +76,7 @@ function RenderDiv({ positionClass, open, content, access, onMouseEnter, onMouse
                     {typeof content == "string" ?
                         <div className="flex items-center gap-x-2">
                             <div className="flex-shrink-0">
-                                <IconInfoCircle className="h-5 w-5 text-blue-400" aria-hidden="true" />
+                                <MemoIconInfoCircle className="h-5 w-5 text-blue-400" aria-hidden="true" />
                             </div>
                             <p className="text-sm text-blue-700 w-max max-w-sm">{content}</p>
                         </div> : content}

components/InputWithClearIcon.tsx

@@ -1,4 +1,4 @@
-import { IconX } from "@tabler/icons-react";
+import { MemoIconX } from "./kern-icons/icons";
 
 export type InputWithClearIconProps = {
     value: string;
@@ -15,7 +15,7 @@ export default function InputWithClearIcon(props: InputWithClearIconProps) {
             onChange={(event) => props.onChange(event.target.value)}
         />
         {props.value && (
-            <IconX className='absolute right-2 top-1/2 transform -translate-y-1/2 cursor-pointer text-gray-500' onClick={() => props.onChange("")} />
+            <MemoIconX className='absolute right-2 top-1/2 transform -translate-y-1/2 cursor-pointer text-gray-500' onClick={() => props.onChange("")} />
         )}
     </div>)
 }

components/KernDropdown.tsx

@@ -4,13 +4,12 @@ import { KernDropdownProps } from '../types/dropdown';
 import { combineClassNames } from '../../javascript-functions/general';
 import { SELECT_ALL, checkDropdownProps, getActiveNegateGroupColor, getDropdownDisplayText, prepareDropdownOptionsToArray, reduceColorProperty, setOptionsWithSearchBar } from '../helpers/dropdown-helper';
 import { Tooltip } from '@nextui-org/react';
-import { IconChevronDown, IconDotsVertical, IconExternalLink } from '@tabler/icons-react';
-import { IconTrashXFilled } from '@tabler/icons-react';
 import useOnClickOutside from '../hooks/useHooks/useOnClickOutside';
 import { useDefaults } from '../hooks/useDefaults';
 import SVGIcon from './SVGIcon';
 import { CSSProperties } from 'react';
 import useRefFor from '../hooks/useRefFor';
+import { MemoIconChevronDown, MemoIconDotsVertical, MemoIconExternalLink, MemoIconTrashXFilled } from './kern-icons/icons';
 
 const DEFAULTS = { fontSizeClass: 'text-xs' };
 
@@ -197,14 +196,14 @@ export default function KernDropdown(props: KernDropdownProps) {
                         className="h-9 w-full text-sm border-gray-300 rounded-md placeholder-italic border text-gray-900 pr-8 pl-4 truncate placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
                         disabled={isDisabled && !props.ignoreDisabledForSearch}
                         placeholder="Type to search..." />
-                    <IconChevronDown
+                    <MemoIconChevronDown
                         className={`h-5 w-5 absolute right-0 mr-3 -mt-7 ${isDisabled && !props.ignoreDisabledForSearch ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
                         aria-hidden="true"
                     />
                 </div> : <>
                     {props.hasButtonDots ? (<Menu.Button onClick={toggleDropdown} className="group relative inline-flex h-8 w-8 items-center justify-center rounded-full">
                         <span className="flex h-full w-full items-center justify-center rounded-full">
-                            <IconDotsVertical
+                            <MemoIconDotsVertical
                                 size={24}
                                 strokeWidth={2}
                                 className='text-gray-700 font-bold' />
@@ -219,7 +218,7 @@ export default function KernDropdown(props: KernDropdownProps) {
                             <span style={{ color: '#4e46e5' }}>{getDropdownDisplayText(props.options, "NOT_NEGATED")}</span>
                             <span style={{ color: '#ef4444' }}>{getDropdownDisplayText(props.options, "NEGATED")}</span>
                         </label>}
-                        <IconChevronDown
+                        <MemoIconChevronDown
                             className="-mr-1 ml-2 h-5 w-5"
                             aria-hidden="true"
                         />
@@ -271,8 +270,8 @@ export default function KernDropdown(props: KernDropdownProps) {
                                                     {props.iconsArray && props.iconsArray[index] && <span className='mx-2 text-gray-700'>
                                                         <SVGIcon icon={props.iconsArray[index]} size={16} strokeWidth={2} useFillForIcons={props.useFillForIcons && props.useFillForIcons[index]} /></span>}
                                                     <span className='truncate'>{option}</span>
-                                                    {props.onClickDelete && <div className="ml-auto flex items-center cursor-pointer hover:bg-gray-200" onClick={(e) => { e.stopPropagation(); props.onClickDelete(option) }}><IconTrashXFilled size={20} /></div>}
-                                                    {props.optionsHaveLink && <a href={props.linkList[index]} target="_blank" className="h-4 w-4 mr-2 ml-auto flex items-center cursor-pointer"><IconExternalLink size={16} /></a>}
+                                                    {props.onClickDelete && <div className="ml-auto flex items-center cursor-pointer hover:bg-gray-200" onClick={(e) => { e.stopPropagation(); props.onClickDelete(option) }}><MemoIconTrashXFilled size={20} /></div>}
+                                                    {props.optionsHaveLink && <a href={props.linkList[index]} target="_blank" className="h-4 w-4 mr-2 ml-auto flex items-center cursor-pointer"><MemoIconExternalLink size={16} /></a>}
                                                     {props.dropdownAdd && props.dropdownAdd[index]}
                                                 </label>
                                             </Tooltip>

components/SVGIcon.tsx

@@ -1,4 +1,4 @@
-import { IconBolt, IconChevronDown, IconCode, IconDotsVertical, IconEdit, IconExternalLink, IconFileInfo, IconFilePencil, IconLoader, IconPlayerPlayFilled, IconShieldCheckFilled, IconShieldFilled, IconSquare, IconSquareCheck, IconTrash } from '@tabler/icons-react';
+import { MemoIconBolt, MemoIconChevronDown, MemoIconCode, MemoIconDotsVertical, MemoIconEdit, MemoIconExternalLink, MemoIconFileInfo, MemoIconFilePencil, MemoIconLoader, MemoIconPlayerPlayFilled, MemoIconShieldCheckFilled, MemoIconShieldFilled, MemoIconSquare, MemoIconSquareCheck, MemoIconTrash } from './kern-icons/icons';
 
 export const SUPPORTED_ICONS = ['IconCode', 'IconBolt', 'IconSquareCheck', 'IconSquare', 'IconPlayerPlayFilled', 'IconTrash', 'IconExternalLink',
     'IconLoader', 'IconFilePencil', 'IconFileInfo', 'IconEdit', 'IconShieldFilled', 'IconShieldCheckFilled'
@@ -14,36 +14,36 @@ type SVGIconProps = {
 export default function SVGIcon(props: SVGIconProps) {
     switch (props.icon) {
         case 'IconCode':
-            return <IconCode size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconCode size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconBolt':
-            return <IconBolt size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconBolt size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconSquareCheck':
-            return <IconSquareCheck size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconSquareCheck size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconSquare':
-            return <IconSquare size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconSquare size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconPlayerPlayFilled':
-            return <IconPlayerPlayFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconPlayerPlayFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconTrash':
-            return <IconTrash size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconTrash size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconExternalLink':
-            return <IconExternalLink size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconExternalLink size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconChevronDown':
-            return <IconChevronDown size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconChevronDown size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconDotsVertical':
-            return <IconDotsVertical size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconDotsVertical size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconLoader':
-            return <IconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconFilePencil':
-            return <IconFilePencil size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconFilePencil size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconFileInfo':
-            return <IconFileInfo size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconFileInfo size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconEdit':
-            return <IconEdit size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconEdit size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconShieldFilled':
-            return <IconShieldFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconShieldFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
         case 'IconShieldCheckFilled':
-            return <IconShieldCheckFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
-        default: return <IconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconShieldCheckFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+        default: return <MemoIconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
     }
 
 }

components/kern-button/IconButton.tsx

@@ -1,7 +1,7 @@
 import { combineClassNames } from "@/submodules/javascript-functions/general";
 import { Tooltip } from '@nextui-org/react'
-import { IconCheck } from "@tabler/icons-react";
 import { useState } from "react";
+import { MemoIconCheck } from "../kern-icons/icons";
 
 interface IconButtonProps {
     icon: (props: any) => any;
@@ -59,7 +59,7 @@ function InnerButton(props: IconButtonProps) {
             disabled={props.disabled}
         >
             {confirmed ? (
-                <IconCheck
+                <MemoIconCheck
                     className={combineClassNames(
                         `text-green-500 group-hover:text-green-600`,
                         props.size == 'small' ? (

components/kern-button/KernButton.tsx

@@ -1,8 +1,7 @@
 import { combineClassNames } from "@/submodules/javascript-functions/general";
-import { IconLoader2 } from "@tabler/icons-react";
 import { Tooltip } from '@nextui-org/react'
 import React, { useCallback, useMemo, useState } from "react";
-import { IconCheck } from "@tabler/icons-react";
+import { MemoIconCheck, MemoIconLoader2 } from "../kern-icons/icons";
 
 interface KernButtonProps {
     text?: string;
@@ -76,7 +75,7 @@ export default function KernButton(props: KernButtonProps) {
     const children = <Tooltip className={"flex gap-x-2 items-center " + (props.disabled ? "cursor-not-allowed" : "")} color="invert" content={props.tooltip} placement={props.tooltipPlacement || "bottom"} >
         {
             props.loading ? (
-                <IconLoader2 className={combineClassNames(
+                <MemoIconLoader2 className={combineClassNames(
                     props.iconColor === "white" ? (
                         `animate-spin text-white group-hover:text-white`
                     ) : (
@@ -86,7 +85,7 @@ export default function KernButton(props: KernButtonProps) {
                 } />
             ) : props.icon ? (
                 confirm ? (
-                    <IconCheck className={combineClassNames(`text-green-500 group-hover:text-green-600`,
+                    <MemoIconCheck className={combineClassNames(`text-green-500 group-hover:text-green-600`,
                         iconSize)} />
                 ) : (
                     <props.icon className={combineClassNames(