-
-
Notifications
You must be signed in to change notification settings - Fork 3.2k
/
icon.tsx
66 lines (59 loc) · 1.42 KB
/
icon.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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.
import React, { ComponentType, HTMLAttributes } from 'react';
import { classes, style } from 'typestyle/lib';
import icon from '../style/icon';
/**
* A namespace for IconItem statics.
*/
export namespace IconItem {
/**
* Props for an IconItem
*/
export interface IProps {
/**
* A CSS class name for the icon.
*/
source: string;
}
}
/**
* A functional tsx component for an icon.
*/
export function IconItem(
props: IconItem.IProps &
React.HTMLAttributes<HTMLDivElement> & {
offset: { x: number; y: number };
}
): React.ReactElement<IconItem.IProps> {
const { source, className, offset, ...rest } = props;
return (
<div
className={classes(className, source, style(icon(offset)))}
{...rest}
/>
);
}
/**
* A namespace for SVGIconItem statics.
*/
export namespace SVGIconItem {
/**
* Props for an SVGIconItem
*/
export interface IProps {
/**
* The inline svg
*/
SVG: ComponentType<HTMLAttributes<SVGElement>>;
}
}
export function SVGIconItem(
props: SVGIconItem.IProps &
React.HTMLAttributes<SVGElement> & {
offset: { x: number; y: number };
}
): React.ReactElement<SVGIconItem.IProps> {
const { SVG, className, offset, ...rest } = props;
return <SVG className={classes(className, style(icon(offset)))} {...rest} />;
}