-
-
Notifications
You must be signed in to change notification settings - Fork 22
/
index.tsx
110 lines (90 loc) · 2.18 KB
/
index.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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import {
createElement,
CSSProperties,
SVGProps,
JSXElementConstructor,
} from "react";
type IconSetItem = {
properties: {
name: string;
};
icon: {
paths: string[];
attrs?: Object[];
width?: number | string;
};
};
type IconSet = {
icons: IconSetItem[];
};
export interface IconProps extends SVGProps<SVGElement> {
icon: string;
size?: string | number;
title?: string;
disableFill?: boolean;
removeInlineStyle?: boolean;
native?: boolean;
SvgComponent?: JSXElementConstructor<any>;
PathComponent?: JSXElementConstructor<any>;
style?: CSSProperties;
}
interface IcoMoonProps extends IconProps {
iconSet: IconSet;
}
const IcoMoon = ({
iconSet,
icon,
size,
title,
disableFill,
removeInlineStyle,
native,
SvgComponent,
PathComponent,
...props
}: IcoMoonProps) => {
if (!iconSet || !icon) return null;
const currentIcon = iconSet.icons.find(
(item) => item.properties.name === icon
);
if (!currentIcon) return null;
const initialStyle: CSSProperties = {
display: "inline-block",
stroke: "currentColor",
fill: "currentColor",
};
if (native) {
initialStyle.display = "flex";
initialStyle.flexDirection = "row";
initialStyle.flexWrap = "wrap";
}
const comptuedStyle = {
...(removeInlineStyle ? {} : initialStyle),
...(size ? { width: size, height: size } : {}),
...(props.style || {}),
};
const { width = "1024" } = currentIcon.icon;
const viewBox = `0 0 ${width} 1024`;
const children = currentIcon.icon.paths.map((path, index) => {
const attrs = currentIcon.icon.attrs?.[index];
const pathProps = {
d: path,
key: icon + index,
...(!disableFill && attrs ? attrs : {}),
};
return createElement(PathComponent || "path", pathProps);
});
if (title && !native) {
children.push(createElement("title", { key: title }, title));
}
return createElement(
SvgComponent || "svg",
{ ...props, viewBox, style: comptuedStyle },
children
);
};
export const iconList = (iconSet: IconSet) => {
if (!iconSet || !Array.isArray(iconSet.icons)) return null;
return iconSet.icons.map((icon) => icon.properties.name);
};
export default IcoMoon;