@stakefish/ui/components/Icon.js

<div align="center"> <a href="https://www.npmjs.com/package/@stakefish/ui"><img src="https://gateway.pinata.cloud/ipfs/QmbZL1ceA8Yiz2pKALTg919jYx141DPUGegC9L4XpyayW5" width="300" /></a> </div>

import { a as __rest, _ as __assign } from '../tslib.es6-35932c2c.js';
import { jsx } from 'react/jsx-runtime';
import { styled } from '@mui/material/styles';
import ArrowRight from '../icons/ArrowLeft.js';
import ArrowRight$1 from '../icons/ArrowRight.js';
import CloseCircle from '../icons/CloseCircle.js';
import InfoCircle from '../icons/InfoCircle.js';
import ErrorCircle from '../icons/ErrorCircle.js';
import Attention from '../icons/Attention.js';
import HelpCircle from '../icons/HelpCircle.js';
import Document from '../icons/Document.js';
import DocumentText from '../icons/DocumentText.js';
import Lock from '../icons/Lock.js';
import Delete from '../icons/Delete.js';
import Users from '../icons/Users.js';
import Stakefish from '../icons/Stakefish.js';
import Sound from '../icons/Sound.js';
import Beacon from '../icons/Beacon.js';
import TriangleRight from '../icons/TriangleRight.js';
import TriangleLeft from '../icons/TriangleLeft.js';
import TriangleUp from '../icons/TriangleUp.js';
import TriangleDown from '../icons/TriangleDown.js';
import Sent from '../icons/Sent.js';
import Download from '../icons/Download.js';
import Faster from '../icons/Faster.js';
import Slower from '../icons/Slower.js';
import Usb from '../icons/Usb.js';
import Key from '../icons/Key.js';
import Edit from '../icons/Edit.js';
import Expand from '../icons/Expand.js';
import Collapse from '../icons/Collapse.js';
import Success$1 from '../icons/Success.js';
import Success from '../icons/SuccessCircle.js';
import Fail from '../icons/Fail.js';
import Desktop from '../icons/Desktop.js';
import Mobile from '../icons/Mobile.js';
import Loading from '../icons/Loading.js';
import Upload from '../icons/Upload.js';
import Check from '../icons/Check.js';
import ChevronLeft from '../icons/ChevronLeft.js';
import ChevronRight from '../icons/ChevronRight.js';
import Plus from '../icons/Plus.js';
import Minus from '../icons/Minus.js';
import Globe from '../icons/Globe.js';
import Link from '../icons/Link.js';
import Copy from '../icons/Copy.js';
import Medium from '../icons/Medium.js';
import Twitter from '../icons/Twitter.js';
import Telegram from '../icons/Telegram.js';
import Eth from '../icons/Eth.js';
import Sort from '../icons/Sort.js';
import Close from '../icons/Close.js';
import DollarSign from '../icons/DollarSign.js';
import Search from '../icons/Search.js';
import Range from '../icons/Range.js';
import Instagram from '../icons/Instagram.js';
import LinkedIn from '../icons/LinkedIn.js';
import Reddit from '../icons/Reddit.js';
import YouTube from '../icons/YouTube.js';
import Chrome from '../icons/Chrome.js';
import CloudConnect from '../icons/CloudConnect.js';
import Update from '../icons/Update.js';
import Menu from '../icons/Menu.js';
import Settings from '../icons/Settings.js';

/**
 * Types
 */
var IconKeyVariants = [
    "arrowRight",
    "arrowLeft",
    "attention",
    "check",
    "checkCircle",
    "chevronLeft",
    "chevronRight",
    "closeCircle",
    "dollarSign",
    "globe",
    "infoCircle",
    "errorCircle",
    "link",
    "triangleRight",
    "triangleLeft",
    "triangleUp",
    "triangleDown",
    "copy",
    "close",
    "search",
    "range",
    "instagram",
    "linkedIn",
    "medium",
    "reddit",
    "telegram",
    "twitter",
    "youTube",
    "eth",
    "fail",
    "plus",
    "minus",
    "helpCircle",
    "document",
    "documentText",
    "lock",
    "delete",
    "users",
    "stakefish",
    "sound",
    "beacon",
    "sent",
    "download",
    "faster",
    "slower",
    "usb",
    "key",
    "edit",
    "expand",
    "collapse",
    "success",
    "successCircle",
    "desktop",
    "mobile",
    "loading",
    "upload",
    "chrome",
    "cloudConnect",
    "sort",
    "update",
    "menu",
    "settings"
];
var IconSizeVariants = ["xs2", "xs1", "sm", "md", "lg", "xl1", "xl2", "xl3"];
/**
 * Constants
 */
var iconMap = {
    checkCircle: jsx(Success, {}, void 0),
    closeCircle: jsx(CloseCircle, {}, void 0),
    infoCircle: jsx(InfoCircle, {}, void 0),
    errorCircle: jsx(ErrorCircle, {}, void 0),
    helpCircle: jsx(HelpCircle, {}, void 0),
    attention: jsx(Attention, {}, void 0),
    document: jsx(Document, {}, void 0),
    documentText: jsx(DocumentText, {}, void 0),
    lock: jsx(Lock, {}, void 0),
    delete: jsx(Delete, {}, void 0),
    users: jsx(Users, {}, void 0),
    eth: jsx(Eth, {}, void 0),
    twitter: jsx(Twitter, {}, void 0),
    telegram: jsx(Telegram, {}, void 0),
    medium: jsx(Medium, {}, void 0),
    instagram: jsx(Instagram, {}, void 0),
    linkedIn: jsx(LinkedIn, {}, void 0),
    reddit: jsx(Reddit, {}, void 0),
    youTube: jsx(YouTube, {}, void 0),
    stakefish: jsx(Stakefish, {}, void 0),
    sound: jsx(Sound, {}, void 0),
    beacon: jsx(Beacon, {}, void 0),
    triangleRight: jsx(TriangleRight, {}, void 0),
    triangleLeft: jsx(TriangleLeft, {}, void 0),
    triangleUp: jsx(TriangleUp, {}, void 0),
    triangleDown: jsx(TriangleDown, {}, void 0),
    sort: jsx(Sort, {}, void 0),
    sent: jsx(Sent, {}, void 0),
    download: jsx(Download, {}, void 0),
    faster: jsx(Faster, {}, void 0),
    slower: jsx(Slower, {}, void 0),
    usb: jsx(Usb, {}, void 0),
    key: jsx(Key, {}, void 0),
    edit: jsx(Edit, {}, void 0),
    link: jsx(Link, {}, void 0),
    expand: jsx(Expand, {}, void 0),
    collapse: jsx(Collapse, {}, void 0),
    copy: jsx(Copy, {}, void 0),
    success: jsx(Success$1, {}, void 0),
    successCircle: jsx(Success, {}, void 0),
    fail: jsx(Fail, {}, void 0),
    desktop: jsx(Desktop, {}, void 0),
    mobile: jsx(Mobile, {}, void 0),
    loading: jsx(Loading, {}, void 0),
    check: jsx(Check, {}, void 0),
    upload: jsx(Upload, {}, void 0),
    close: jsx(Close, {}, void 0),
    plus: jsx(Plus, {}, void 0),
    minus: jsx(Minus, {}, void 0),
    chevronLeft: jsx(ChevronLeft, {}, void 0),
    chevronRight: jsx(ChevronRight, {}, void 0),
    arrowLeft: jsx(ArrowRight, {}, void 0),
    arrowRight: jsx(ArrowRight$1, {}, void 0),
    globe: jsx(Globe, {}, void 0),
    dollarSign: jsx(DollarSign, {}, void 0),
    search: jsx(Search, {}, void 0),
    chrome: jsx(Chrome, {}, void 0),
    cloudConnect: jsx(CloudConnect, {}, void 0),
    range: jsx(Range, {}, void 0),
    update: jsx(Update, {}, void 0),
    menu: jsx(Menu, {}, void 0),
    settings: jsx(Settings, {}, void 0)
};
var iconSizeMap = {
    xs2: 10,
    xs1: 20,
    sm: 24,
    md: 32,
    lg: 44,
    xl1: 64,
    xl2: 80,
    xl3: 116
};
var iconPaddingMap = {
    xs2: 1,
    xs1: 2,
    sm: 2,
    md: 4,
    lg: 6,
    xl1: 8,
    xl2: 8,
    xl3: 10
};
/**
 * Styles
 */
var StyledIcon = styled("i")(function (_a) {
    var $size = _a.$size, $color = _a.$color, $rotate = _a.$rotate, theme = _a.theme;
    return ({
        display: "inline-block",
        verticalAlign: "middle",
        height: "".concat(iconSizeMap[$size !== null && $size !== void 0 ? $size : "sm"], "px"),
        padding: "".concat(iconPaddingMap[$size !== null && $size !== void 0 ? $size : "sm"], "px"),
        textAlign: "center",
        color: "inherit",
        fontFamily: "inherit !important",
        boxSizing: "border-box",
        "&:before": {
            display: "none !important"
        },
        "& svg": {
            display: "inline-block",
            verticalAlign: "top",
            height: "100%",
            color: "inherit",
            transform: "rotate(".concat($rotate !== null && $rotate !== void 0 ? $rotate : 0, "deg)")
        },
        "& path": {
            fill: theme.palette.icon[$color !== null && $color !== void 0 ? $color : "currentColor"],
            transition: theme === null || theme === void 0 ? void 0 : theme.transitions.create(["fill"])
        }
    });
});
/**
 * Main
 */
var Icon = function (_a) {
    var iconKey = _a.iconKey, className = _a.className, size = _a.size, color = _a.color, rotate = _a.rotate, props = __rest(_a, ["iconKey", "className", "size", "color", "rotate"]);
    var stylingProps = { $size: size, $color: color, $rotate: rotate };
    return (jsx(StyledIcon, __assign({ className: "icon icon--".concat(iconKey, " ").concat(className !== null && className !== void 0 ? className : "") }, stylingProps, props, { children: iconMap[iconKey] }), void 0));
};

export { IconKeyVariants, IconSizeVariants, Icon as default, iconMap, iconPaddingMap, iconSizeMap };