fui-material 0.2.58 → 0.2.60

package/src/function-elements/fPrompt/fPrompt.css

@@ -0,0 +1,85 @@
+.f-function-block-prompt {
+    z-index: 9999999999;
+    height: 100vh;
+    width: 100vw;
+    background-color: rgba(0,0,0,0.4);
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: all;
+    transition: 1s;
+}
+
+.f-function-prompt {
+    display: flex;
+    flex-direction: row;
+    width: 625px;
+    min-height: 75px;
+    background-color: white;
+    border-radius: 10px;
+}
+
+.f-function-prompt-ico {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    border-bottom-left-radius: 10px;
+    border-top-left-radius: 10px;
+}
+
+.f-function-prompt-ico.warning {
+    color: #0dcaf0  !important;
+    background-color: rgba(13, 202, 240, 0.4) !important;
+    fill: #0dcaf0  !important;
+}
+
+.f-function-prompt-inside {
+    display: flex;
+    flex-direction: column;
+    margin: 16px;
+    gap: 16px;
+    width: 553px;
+}
+
+.f-function-prompt-header {
+    display: flex;
+    align-items: center;
+}
+
+.f-function-prompt-header h4 {
+    font-family: "SF UI Display", sans-serif;
+    color: #000;
+    font-size: 15px;
+}
+
+.f-function-prompt-body {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.f-function-prompt-body span {
+    font-size: 12px;
+    font-weight: bold;
+    color: #656565;
+    white-space: normal;
+    -webkit-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+    word-wrap: anywhere;
+}
+
+.f-function-prompt-input {
+
+}
+
+.f-function-prompt-footer {
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+    gap: 8px;
+}

package/src/function-elements/fPrompt/fPrompt.ts

@@ -0,0 +1,77 @@
+import './fPrompt.css'
+
+export interface IfPrompt {
+    title?: string,
+    body?: string,
+}
+
+export function getValue(element: HTMLInputElement | null): string | null {
+    if (element) {
+        return element.value;
+    } else {
+        return null;
+    }
+}
+
+const fPrompt = ({title, body}: IfPrompt): Promise<string | null> => {
+    return new Promise((resolve) => {
+        window.document.body.insertAdjacentHTML(
+            'afterbegin',
+            `
+            <div class='f-function-block-prompt' id='f-function-block-prompt'>
+                <div class='f-function-prompt'>
+                   <div class='f-function-prompt-ico warning'>
+                        <svg width="28" height="28" viewBox="0 0 16 16">
+                            <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
+                            <path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
+                        </svg>
+                    </div>
+                   <div class='f-function-prompt-inside'>
+                        <div class='f-function-prompt-header'>
+                            <h4>${title}</h4>
+                        </div>
+                        <div class='f-function-prompt-body'>
+                            <span>${body}</span>
+                            <input 
+                                type="text" 
+                                id="f-function-prompt-input"
+                                class="form-control f-function-prompt-input"
+                            />
+                        </div>
+                        <div class='f-function-prompt-footer'>
+                            <button
+                                id="f-function-prompt-ok"
+                                class='btn btn-success btn-sm'
+                                onclick='document.querySelector("#f-function-block-prompt").remove()'
+                            >
+                                Ок
+                            </button>
+                            <button
+                                id="f-function-prompt-cancellation"
+                                class='btn btn-danger btn-sm'
+                                onclick='document.querySelector("#f-function-block-prompt").remove()'
+                            >
+                                Отменить
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `
+        );
+
+        let ok: HTMLButtonElement | null = document.querySelector('#f-function-prompt-ok')
+        let cancellation: HTMLButtonElement | null = document.querySelector('#f-function-prompt-cancellation')
+        let submit: HTMLInputElement | null = document.querySelector('#f-function-prompt-input')
+
+        ok!.addEventListener('click', function () {
+            resolve(getValue(submit));
+        })
+        cancellation!.addEventListener('click', function () {
+            resolve(null);
+        })
+
+    });
+};
+
+export default fPrompt;

package/src/function-elements/fPrompt/index.tsx

@@ -0,0 +1 @@
+export { default } from "./fPrompt";

package/src/function-elements/index.ts

@@ -0,0 +1,3 @@
+export {default as fAlert} from "./fAlert"
+export {default as fConfirm} from "./fConfirm"
+export {default as fPrompt} from "./fPrompt"

package/src/icons/FArrowIcon/FArrowIcon.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import "../../material/statick/Colors.css"
+
+export interface IFArrowIcon {
+    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
+    size?: number
+    st?: React.CSSProperties,
+    direction?: 'up' | 'down' | 'left' | 'right',
+    handleClick?: () => void,
+    id?: string,
+    className?: string,
+}
+
+const FArrowIcon = ({
+                        color = 'primary',
+                        size = 32,
+                        st,
+                        direction = 'right',
+                        handleClick,
+                        id,
+                        className
+                    }: IFArrowIcon) => {
+
+    const style = {
+        transform: `rotate(
+                         ${direction === 'down' ? 90 :
+            direction === 'up' ? -90 :
+                direction === 'right' ? 0 :
+                    180}deg)`
+    }
+
+    st = Object.assign({}, style, st)
+
+    return (
+        <svg
+            width={size}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 320 512"
+            className={`arrow-icon ${color} ${className !== undefined ? className : ''}`}
+            style={st}
+            onClick={handleClick}
+            id={id}
+        >
+            <path
+                d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path>
+        </svg>
+    );
+};
+
+export default FArrowIcon;

package/src/icons/FArrowIcon/index.ts

@@ -0,0 +1 @@
+export { default } from "./FArrowIcon";

package/src/icons/FCheckIcon/FCheckIcon.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import "../../material/statick/Colors.css"
+
+export interface IFCheckIcon {
+    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
+    size?: number
+    st?: React.CSSProperties,
+    id?: string,
+    className?: string,
+    handleClick?: () => void,
+}
+
+const FCheckIcon = ({
+                        color = 'success',
+                        size = 30,
+                        st,
+                        id,
+                        className,
+                        handleClick
+                    }: IFCheckIcon) => {
+    return (
+        <svg
+            width={size}
+            viewBox="0 0 16 16"
+            className={`${color} ${className !== undefined ? className : ''}`}
+            id={id}
+            onClick={handleClick}
+            style={st}
+        >
+            <path clipRule="evenodd"
+                  d="M15.4142 4.41421L6 13.8284L0.585785 8.41421L3.41421 5.58578L6 8.17157L12.5858 1.58578L15.4142 4.41421Z"
+                  fillRule="evenodd"/>
+        </svg>
+    );
+};
+
+export default FCheckIcon;

package/src/icons/FCheckIcon/index.ts

@@ -0,0 +1 @@
+export { default } from "./FCheckIcon";

package/src/icons/FCloseIcon/FCloseIcon.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import "../../material/statick/Colors.css"
+
+export interface IFCloseIcon {
+    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
+    size?: number
+    st?: React.CSSProperties,
+    id?: string,
+    className?: string,
+    handleClose?: () => void,
+}
+
+const FCloseIcon = ({color = 'primary', size = 70, st, id, className, handleClose}: IFCloseIcon) => {
+    return (
+        <svg
+            width={size}
+            style={st}
+            className={`bi bi-x-lg ${color} ${className !== undefined ? className : ''}`}
+            viewBox="0 0 16 16"
+            onClick={handleClose}
+            id={id}
+        >
+            <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
+        </svg>
+    );
+};
+
+export default FCloseIcon;

package/src/icons/FCloseIcon/index.ts

@@ -0,0 +1 @@
+export { default } from "./FCloseIcon";

package/src/icons/FCopyAddIcon/FCopyAdd.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import "../../material/statick/Colors.css"
+
+export interface IFCopyAddIcon {
+    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
+    size?: number
+    st?: React.CSSProperties,
+    id?: string,
+    className?: string,
+    handleClick?: () => void,
+}
+
+const FCopyAddIcon = ({color = 'dark', size = 30, st, id, className, handleClick}: IFCopyAddIcon) => {
+    return (
+        <svg
+            width={size}
+            style={st}
+            className={`bi bi-pencil ${color} ${className !== undefined ? className : ''}`}
+            viewBox="0 0 32 32"
+            onClick={handleClick}
+            id={id}
+        >
+            <path d="M27.2,8.22H23.78V5.42A3.42,3.42,0,0,0,20.36,2H5.42A3.42,3.42,0,0,0,2,5.42V20.36a3.42,3.42,0,0,0,3.42,3.42h2.8V27.2A2.81,2.81,0,0,0,11,30H27.2A2.81,2.81,0,0,0,30,27.2V11A2.81,2.81,0,0,0,27.2,8.22ZM5.42,21.91a1.55,1.55,0,0,1-1.55-1.55V5.42A1.54,1.54,0,0,1,5.42,3.87H20.36a1.55,1.55,0,0,1,1.55,1.55v2.8H11A2.81,2.81,0,0,0,8.22,11V21.91ZM28.13,27.2a.93.93,0,0,1-.93.93H11a.93.93,0,0,1-.93-.93V11a.93.93,0,0,1,.93-.93H27.2a.93.93,0,0,1,.93.93Z"/>
+            <path d="M24.09,18.18H20v-4a.93.93,0,1,0-1.86,0v4h-4a.93.93,0,0,0,0,1.86h4v4.05a.93.93,0,1,0,1.86,0V20h4.05a.93.93,0,1,0,0-1.86Z"/>
+
+        </svg>
+    );
+};
+
+export default FCopyAddIcon;

package/src/icons/FDownloadIcon/FDownloadIcon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export interface IFDownloadIcon {
+    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
+    size?: number
+    st?: React.CSSProperties,
+    id?: string,
+    className?: string,
+    handleClick?: () => void,
+}
+
+const FDownloadIcon = ({
+                           color = 'dark',
+                           size = 32,
+                           st,
+                           id,
+                           className,
+                           handleClick
+                       }: IFDownloadIcon) => {
+
+    return (
+        <svg style={st} id={id} width={size} onClick={handleClick} className={`bi bi-download download-icon ${color} ${className}`}viewBox="0 0 16 16">
+            <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
+            <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
+        </svg>
+    );
+};
+
+export default FDownloadIcon;

package/src/icons/FDownloadIcon/index.ts

@@ -0,0 +1 @@
+export { default } from "./FDownloadIcon";

package/src/icons/FFilterIcon/FFilterIcon.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export interface IFFilterIcon {
+    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
+    size?: number
+    st?: React.CSSProperties,
+    id?: string,
+    className?: string,
+    handleClick?: () => void,
+}
+
+const FFilterIcon = ({color = 'dark', size = 30, st, id, className, handleClick}: IFFilterIcon) => {
+    return (
+        <svg
+            width={size}
+            viewBox="0 0 24 24"
+            className={`${color} ${className !== undefined ? className : ''}`}
+            id={id}
+            onClick={handleClick}
+            style={st}
+        >
+            <path fill="none" d="M0 0h24v24H0z"/>
+            <path fillRule="nonzero" d="M14 14v6l-4 2v-8L4 5V3h16v2l-6 9zM6.404 5L12 13.394 17.596 5H6.404z"/>
+        </svg>
+    );
+};
+
+export default FFilterIcon;

package/src/icons/FFilterIcon/index.ts

@@ -0,0 +1 @@
+export { default } from "./FFilterIcon";

package/src/icons/FListIcon/FListIcon.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import "../../material/statick/Colors.css"
+
+export interface IFListIcon {
+    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
+    size?: number
+    st?: React.CSSProperties,
+    id?: string,
+    className?: string,
+    handleClick?: () => void,
+}
+
+const FListIcon = ({
+                       color = 'dark',
+                       size = 32,
+                       st,
+                       id,
+                       className,
+                       handleClick
+                   }: IFListIcon) => {
+    return (
+        <svg
+            width={size}
+            style={st}
+            className={`bi bi-card-list ${color} ${className !== undefined ? className : ''}`}
+            viewBox="0 0 16 16"
+            id={id}
+            onClick={handleClick}
+        >
+            <path
+                d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
+            <path
+                d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
+        </svg>
+    );
+};
+
+export default FListIcon;

package/src/icons/FListIcon/index.ts

@@ -0,0 +1 @@
+export { default } from "./FListIcon";

package/src/icons/FLoadIcon/FLoadIcon.tsx

@@ -0,0 +1,61 @@
+import React, {useRef} from 'react';
+import './FLoadIconCss.css'
+export interface IFLoadIcon {
+    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
+    size?: number
+    st?: React.CSSProperties,
+    id?: string,
+    className?: string,
+    handleClick?: () => void,
+}
+
+const FLoadIcon = ({size = 35, st, id, className, color = 'primary'}: IFLoadIcon) => {
+
+    const randomId= useRef<string>((Math.random() + 1).toString(36).substring(2))
+
+    return (
+        <div style={{margin: 0, padding: 0}}>
+            <style>
+                {
+                    `
+                    .f-load-icon-${randomId.current} {
+                        width: ${size}px;
+                        height: ${size * 2.25}px;
+                        -webkit-animation: anim-f-load-icon-${randomId.current} 2s linear infinite alternate;
+                        animation: anim-f-load-icon-${randomId.current} 2s linear infinite alternate;
+                        transform: perspective(${size * 2.5}px) rotateX(-45deg);
+                        border-width: ${size/10}px !important;
+                    }
+                    `
+                }
+                {
+                    `@-webkit-keyframes anim-f-load-icon-${randomId.current} {
+                        0% {
+                            box-shadow: 0 0 inset;
+                        }
+                        100% {
+                            box-shadow: 0 calc((${size * 2.25}px - 2px) * -1) inset;
+                        }
+                    }`
+                }
+                {
+                    `@keyframes anim-f-load-icon-${randomId.current} {
+                        0% {
+                            box-shadow: 0 0 inset;
+                        }
+                        100% {
+                            box-shadow: 0 calc((${size * 2.25}px - 2px) * -1) inset;
+                        }
+                    }`
+                }
+            </style>
+            <span
+                className={`f-load-icon f-load-icon-${randomId.current} ${color} ${className !== undefined ? className : ''}`}
+                style={st}
+                id={id}
+            />
+        </div>
+    );
+};
+
+export default FLoadIcon;

package/src/icons/FLoadIcon/FLoadIconCss.css

@@ -0,0 +1,48 @@
+.f-load-icon {
+    display: block;
+}
+
+.f-load-icon.primary {
+    border: 2px solid #2F80ED;
+    color: rgba(47, 128, 237, 0.5);
+}
+
+.f-load-icon.secondary {
+    border: 2px solid #6c757d;
+    color: rgba(108, 117, 125, 0.5);
+}
+
+.f-load-icon.success {
+    border: 2px solid #198754;
+    color: rgba(25, 135, 84, 0.5);
+}
+
+.f-load-icon.danger {
+    border: 2px solid #dc3545;
+    color: rgba(220, 53, 69, 0.5);
+}
+
+.f-load-icon.warning {
+    border: 2px solid #ffc107;
+    color: rgba(255, 193, 7, 0.5);
+}
+
+.f-load-icon.info {
+    border: 2px solid #0dcaf0;
+    color: rgba(13, 202, 240, 0.5);
+}
+
+.f-load-icon.light {
+    border: 2px solid #f8f9fa;
+    color: rgba(248, 249, 250, 0.5);
+}
+
+.f-load-icon.dark {
+    border: 2px solid #212529;
+    color: rgba(33, 37, 41, 0.5);
+}
+
+.f-load-icon.link {
+    border: 2px solid #0a58ca;
+    color: rgba(10, 88, 202, 0.5);
+}

package/src/icons/FLoadIcon/index.ts

@@ -0,0 +1 @@
+export { default } from "./FLoadIcon";

package/src/icons/FPenIcon/FPenIcon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import "../../material/statick/Colors.css"
+
+export interface IFPenIcon {
+    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
+    size?: number
+    st?: React.CSSProperties,
+    id?: string,
+    className?: string,
+    handleClick?: () => void,
+}
+
+const FPenIcon = ({color = 'dark', size = 30, st, id, className, handleClick}: IFPenIcon) => {
+    return (
+        <svg
+            width={size}
+            style={st}
+            className={`bi bi-pencil ${color} ${className !== undefined ? className : ''}`}
+            viewBox="0 0 16 16"
+            onClick={handleClick}
+            id={id}
+        >
+            <path
+                d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+        </svg>
+    );
+};
+
+export default FPenIcon;

package/src/icons/FPenIcon/index.ts

@@ -0,0 +1 @@
+export { default } from "./FPenIcon";

package/src/icons/FPlusIcon/FPlusIcon.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import "../../material/statick/Colors.css"
+
+export interface IFPlusIcon {
+    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
+    size?: number
+    st?: React.CSSProperties,
+    id?: string,
+    className?: string,
+    handleClick?: () => void,
+}
+
+const FPlusIcon = ({
+                       color = 'primary',
+                       size = 32,
+                       st,
+                       className,
+                       id,
+                       handleClick
+                   }: IFPlusIcon) => {
+    return (
+        <svg
+            onClick={handleClick}
+            className={`MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ${color} ${className !== undefined ? className : ''}`}
+            id={id}
+            width={size}
+            style={st}
+            focusable="false"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            data-testid="AddCircleOutlineOutlinedIcon"
+        >
+            <path
+                d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
+        </svg>
+    );
+};
+
+export default FPlusIcon;

package/src/icons/FPlusIcon/index.ts

@@ -0,0 +1 @@
+export { default } from "./FPlusIcon";

package/src/icons/FTrashIcon/FTrashIcon.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import "../../material/statick/Colors.css"
+export interface IFTrashIcon {
+    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
+    size?: number
+    st?: React.CSSProperties,
+    id?: string,
+    className?: string,
+    handleClick?: () => void,
+}
+
+
+const FTrashIcon = ({
+                        color = "primary",
+                        size = 32,
+                        st,
+                        id,
+                        className,
+                        handleClick,
+                    }: IFTrashIcon
+) => {
+    return (
+        <svg
+            onClick={handleClick}
+            xmlns="http://www.w3.org/2000/svg"
+            width={size}
+            style={st}
+            className={`bi bi-trash ${color} ${className !== undefined ? className : ''}`}
+            viewBox="0 0 16 16"
+            id={id}
+        >
+            <path
+                d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+            <path fillRule="evenodd"
+                  d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+        </svg>
+    );
+};
+
+export default FTrashIcon;

package/src/icons/FTrashIcon/index.ts

@@ -0,0 +1 @@
+export { default } from "./FTrashIcon";