67 lines
No EOL
2.4 KiB
TypeScript
67 lines
No EOL
2.4 KiB
TypeScript
import React from "react";
|
|
import { buttonNames } from "./names";
|
|
import { useTheme } from "styled-components";
|
|
import { Icon } from '@iconify/react';
|
|
|
|
import exitToApp from '@iconify/icons-ic/twotone-exit-to-app';
|
|
import deleteIcon from '@iconify/icons-ic/baseline-delete';
|
|
import settings from '@iconify/icons-ic/baseline-settings';
|
|
import info from '@iconify/icons-ic/baseline-info';
|
|
import arrowDown from '@iconify/icons-ic/baseline-keyboard-arrow-down';
|
|
import arrowRight from '@iconify/icons-ic/baseline-keyboard-arrow-right';
|
|
import arrowLeft from '@iconify/icons-ic/baseline-keyboard-arrow-left';
|
|
import edit from '@iconify/icons-ic/baseline-edit';
|
|
import checkCircle from '@iconify/icons-ic/round-check-circle';
|
|
import cancel from '@iconify/icons-ic/baseline-cancel';
|
|
import userSearch from '@iconify/icons-ic/baseline-person-search';
|
|
import admin from '@iconify/icons-ic/baseline-admin-panel-settings';
|
|
import noAdmin from '@iconify/icons-ic/baseline-remove-moderator'
|
|
import refresh from '@iconify/icons-ic/baseline-refresh';
|
|
import close from '@iconify/icons-ic/round-close';
|
|
import wifiFind from '@iconify/icons-ic/baseline-wifi-find';
|
|
import noteEdit from '@iconify/icons-ph/note-pencil';
|
|
import swapHoriz from '@iconify/icons-ic/baseline-swap-horiz';
|
|
|
|
export const ICONS = {
|
|
[buttonNames[1]]: exitToApp,
|
|
[buttonNames[2]]: deleteIcon,
|
|
[buttonNames[3]]: settings,
|
|
[buttonNames[4]]: info,
|
|
[buttonNames[5]]: arrowDown,
|
|
[buttonNames[6]]: arrowRight,
|
|
[buttonNames[7]]: edit,
|
|
[buttonNames[8]]: checkCircle,
|
|
[buttonNames[9]]: cancel,
|
|
[buttonNames[10]]: admin,
|
|
[buttonNames[11]]: refresh,
|
|
[buttonNames[12]]: close,
|
|
[buttonNames[13]]: noAdmin,
|
|
[buttonNames[14]]: userSearch,
|
|
[buttonNames[15]]: wifiFind,
|
|
[buttonNames[16]]: noteEdit,
|
|
[buttonNames[17]]: arrowLeft,
|
|
[buttonNames[18]]: swapHoriz,
|
|
} as const;
|
|
|
|
type IconName = keyof typeof ICONS;
|
|
|
|
interface IconsProps {
|
|
name: IconName,
|
|
width?: string
|
|
height?: string
|
|
setColor?: string
|
|
onClick?: (event?: React.MouseEvent<SVGSVGElement>) => void;
|
|
}
|
|
|
|
export const IconComponent = ({ name, width = "24", height = "24", setColor, onClick}: IconsProps) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<Icon
|
|
icon={ICONS[name]}
|
|
width={width}
|
|
height={height}
|
|
color={setColor || theme.textColor}
|
|
onClick={onClick}
|
|
/>
|
|
);
|
|
} |