@thenewboston/ui
Version:
UI Library for the thenewboston community
106 lines (105 loc) • 3.85 kB
TypeScript
import React, { HTMLAttributes } from 'react';
import '../../styles/colors.css';
import './Icon.scss';
export declare enum IconType {
accountGroup = "account-group",
alert = "alert",
alertCircle = "alert-circle",
alertCircleCheckOutline = "alert-circle-check-outline",
alertCircleOutline = "alert-circle-outline",
arrowCollapseDown = "arrow-collapse-down",
arrowDown = "arrow-down",
arrowLeft = "arrow-left",
arrowRight = "arrow-right",
arrowUp = "arrow-up",
bell = "bell",
chartAreaspline = "chart-areaspline",
chartTimelineVariantShimmer = "chart-timeline-variant-shimmer",
checkCircle = "check-circle",
checkboxBlankCircle = "checkbox-blank-circle",
checkboxBlankCircleOutline = "checkbox-blank-circle-outline",
checkboxBlankOutline = "checkbox-blank-outline",
checkboxMarked = "checkbox-marked",
chevronDown = "chevron-down",
chevronLeft = "chevron-left",
chevronRight = "chevron-right",
chevronUp = "chevron-up",
close = "close",
contentCopy = "content-copy",
currencyUsd = "currency-usd",
devTo = "dev-to",
discord = "discord",
dotsVertical = "dots-vertical",
download = "download",
earth = "earth",
eye = "eye",
eyeOff = "eye-off",
facebook = "facebook",
fileDocument = "file-document",
fileDownload = "file-download",
filterMenu = "filter-menu",
forum = "forum",
github = "github",
googleController = "google-controller",
hammerWrench = "hammer-wrench",
humanHandsup = "human-handsup",
information = "information",
instagram = "instagram",
lanConnect = "lan-connect",
lanDisconnect = "lan-disconnect",
link = "link",
linkedin = "linkedin",
loading = "loading",
mapMarkerCheck = "map-marker-check",
menu = "menu",
menuRight = "menu-right",
minus = "minus",
notebookCheckOutline = "notebook-check-outline",
openInNew = "open-in-new",
pencil = "pencil",
pinterest = "pinterest",
play = "play",
playBoxMultiple = "playBoxMultiple",
plus = "plus",
qrcode = "qrcode",
radioboxBlank = "radiobox-blank",
radioboxMarked = "radiobox-marked",
reddit = "reddit",
refresh = "refresh",
slack = "slack",
sortAscending = "sort-ascending",
sortDescending = "sort-descending",
sync = "sync",
textBox = "text-box",
thumbsUp = "thumbs-up",
tnb = "tnb",
trophy = "trophy",
twitch = "twitch",
twitter = "twitter",
youtube = "youtube"
}
export interface IconProps extends HTMLAttributes<HTMLDivElement> {
/** Optional. Extra classNames you can pass. Storybook options: black, white, primary, secondary, tertiary, alert. */
className?: string;
/** Optional. identifies a DOM node for testing purposes. */
dataTestId?: string;
/** Optional. disabled onClick event if onClick is passed. */
disabled?: boolean;
/** Required. pass in the icon type, using the IconType enum. */
icon: IconType;
/** Optional. add an onClick event handler. */
onClick?(e?: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
/** Optional. add an onKeyDown event handler. */
onKeyDown?(e?: React.KeyboardEvent<HTMLDivElement>): void;
/** Optional. size of the actual icon. */
size?: number;
/** Optional. size of the icon + paddings. Ignored if value is smaller than size. */
totalSize?: number | 'unset';
/** Optional. disables focus. Only works if there is also an onClick handler. */
unfocusable?: boolean;
}
/**
* Icon component with optional ability to pass in an onClick event handler.
*/
declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLDivElement>>;
export { Icon };