-
Notifications
You must be signed in to change notification settings - Fork 2
/
WebFontIcon.tsx
50 lines (46 loc) · 1.5 KB
/
WebFontIcon.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
* @module Icon
*/
import "./WebFontIcon.scss";
import classnames from "classnames";
import * as React from "react";
import type { CommonProps } from "../utils/Props";
/** Properties for the [[WebFontIcon]] React component
* @public
*/
export interface WebFontIconProps extends CommonProps {
/** Bentley Web Font icon name */
iconName: string;
/** Click event handler */
onClick?: React.MouseEventHandler<HTMLSpanElement>;
/** Text that will be shown when hovered on the icon. */
title?: string;
/** Size of the icon */
iconSize?: "x-small" | "small" | "medium" | "large" | "x-large";
/** Class name of icon used for custom font-family icons */
iconClassName?: string;
}
/** WebFontIcon React component
* @public
*/
export function WebFontIcon(props: WebFontIconProps) {
const className = classnames(
props.iconClassName || "bui-webfont-icon",
props.iconName,
props.iconSize ? `uicore-icons-${props.iconSize}` : undefined,
props.className
);
return (
<span
className={className}
title={props.title}
style={props.style}
onClick={props.onClick}
role="presentation"
/>
);
}