@gamecrafters/base-ui-icons 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{lib/react/Icon.types.ts → build/react/index.d.mts} +9 -15
- package/build/react/index.d.ts +35 -0
- package/build/react/index.js +43 -0
- package/build/react/index.mjs +37 -0
- package/package.json +30 -11
- package/lib/classnames/index.ts +0 -6
- package/lib/react/Icon.tsx +0 -80
- package/lib/react/index.ts +0 -7
|
@@ -1,19 +1,6 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { ForwardRefExoticComponent, RefAttributes } from 'react';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
[height: string]: {
|
|
5
|
-
/**
|
|
6
|
-
* Width of the SVG at this height
|
|
7
|
-
*/
|
|
8
|
-
width: number;
|
|
9
|
-
/**
|
|
10
|
-
* SVG path content
|
|
11
|
-
*/
|
|
12
|
-
path: ReactNode;
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
export interface IconProps extends React.SVGAttributes<SVGSVGElement> {
|
|
3
|
+
interface IconProps extends React.SVGAttributes<SVGSVGElement> {
|
|
17
4
|
/**
|
|
18
5
|
* Accessible label for the icon
|
|
19
6
|
*/
|
|
@@ -39,3 +26,10 @@ export interface IconProps extends React.SVGAttributes<SVGSVGElement> {
|
|
|
39
26
|
*/
|
|
40
27
|
title?: string;
|
|
41
28
|
}
|
|
29
|
+
|
|
30
|
+
declare const AccessibilityRegular: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
|
|
31
|
+
|
|
32
|
+
type Icon = ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
|
|
33
|
+
|
|
34
|
+
export { AccessibilityRegular };
|
|
35
|
+
export type { Icon, IconProps };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React, { ForwardRefExoticComponent, RefAttributes } from 'react';
|
|
2
|
+
|
|
3
|
+
interface IconProps extends React.SVGAttributes<SVGSVGElement> {
|
|
4
|
+
/**
|
|
5
|
+
* Accessible label for the icon
|
|
6
|
+
*/
|
|
7
|
+
"aria-label"?: string;
|
|
8
|
+
/**
|
|
9
|
+
* ID of element that labels the icon
|
|
10
|
+
*/
|
|
11
|
+
"aria-labelledby"?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Additional CSS class names
|
|
14
|
+
*/
|
|
15
|
+
className?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Fill color for the icon
|
|
18
|
+
*/
|
|
19
|
+
fill?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Icon size (number in pixels)
|
|
22
|
+
*/
|
|
23
|
+
size?: number;
|
|
24
|
+
/**
|
|
25
|
+
* Icon title for accessibility
|
|
26
|
+
*/
|
|
27
|
+
title?: string;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
declare const AccessibilityRegular: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
|
|
31
|
+
|
|
32
|
+
type Icon = ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
|
|
33
|
+
|
|
34
|
+
export { AccessibilityRegular };
|
|
35
|
+
export type { Icon, IconProps };
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
6
|
+
|
|
7
|
+
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
8
|
+
|
|
9
|
+
function createIconComponent(name, defaultClassName, getSVGData) {
|
|
10
|
+
const svgDataByHeight = getSVGData();
|
|
11
|
+
const heights = Object.keys(svgDataByHeight);
|
|
12
|
+
const Icon = React__default.default.forwardRef(({ "aria-label": ariaLabel, "aria-labelledby": arialabelledby, tabIndex, className = "", fill = "currentColor", size = 16, id, title, style, ...rest }, ref) => {
|
|
13
|
+
const height = size;
|
|
14
|
+
const naturalHeight = closestNaturalHeight(heights, height);
|
|
15
|
+
const naturalWidth = svgDataByHeight[naturalHeight].width;
|
|
16
|
+
const width = height * (naturalWidth / parseInt(naturalHeight, 10));
|
|
17
|
+
const path = svgDataByHeight[naturalHeight].path;
|
|
18
|
+
const labelled = ariaLabel || arialabelledby;
|
|
19
|
+
const role = labelled ? "img" : undefined;
|
|
20
|
+
const classes = `${defaultClassName} ${className}`.trim();
|
|
21
|
+
return (React__default.default.createElement("svg", { ref: ref, ...rest, "aria-hidden": labelled ? undefined : "true", tabIndex: tabIndex, focusable: (tabIndex ?? -1) >= 0 ? "true" : "false", "aria-label": ariaLabel, "aria-labelledby": arialabelledby, className: classes, role: role, viewBox: `0 0 ${naturalWidth} ${naturalHeight}`, width: width, height: height, fill: fill, id: id, display: "inline-block", overflow: "visible", style: style },
|
|
22
|
+
title ? React__default.default.createElement("title", null, title) : null,
|
|
23
|
+
path));
|
|
24
|
+
});
|
|
25
|
+
Icon.displayName = name;
|
|
26
|
+
return Icon;
|
|
27
|
+
}
|
|
28
|
+
function closestNaturalHeight(naturalHeights, height) {
|
|
29
|
+
const closestHeight = naturalHeights
|
|
30
|
+
.map((naturalHeight) => parseInt(naturalHeight, 10))
|
|
31
|
+
.reduce((acc, naturalHeight) => (naturalHeight <= height ? naturalHeight : acc), parseInt(naturalHeights[0], 10));
|
|
32
|
+
return closestHeight.toString();
|
|
33
|
+
}
|
|
34
|
+
const AccessibilityRegular = /*#__PURE__*/ createIconComponent("AccessibilityRegular", "icon icon-accessibility_regular", () => {
|
|
35
|
+
return {
|
|
36
|
+
"24": {
|
|
37
|
+
"width": 24,
|
|
38
|
+
"path": React__default.default.createElement("path", { d: "M10.5 5a1.5 1.5 0 0 0 .968 1.403c.35.085.714.085 1.063 0A1.5 1.5 0 1 0 10.5 5m-1.474.399a3 3 0 1 1 5.947 0l2.877-1.221a2.266 2.266 0 0 1 2.962 1.184 2.24 2.24 0 0 1-1.181 2.954l-3.628 1.54v3.717l1.874 5.444a2.25 2.25 0 1 1-4.255 1.465L12 15.772l-1.622 4.71a2.25 2.25 0 1 1-4.255-1.465l1.88-5.457V9.858L4.37 8.316a2.24 2.24 0 0 1-1.182-2.954A2.266 2.266 0 0 1 6.15 4.178zm1.996 2.438a4 4 0 0 1-.487-.168l-4.971-2.11a.766.766 0 0 0-1 .399.74.74 0 0 0 .392.977L8.74 8.542c.462.196.761.649.761 1.15v3.91q0 .208-.068.406l-1.892 5.497a.75.75 0 1 0 1.418.488l2.108-6.123c.306-.888 1.56-.884 1.864 0l2.108 6.123a.75.75 0 1 0 1.419-.488l-1.888-5.483a1.3 1.3 0 0 1-.069-.407V9.691c0-.502.3-.955.762-1.151l3.78-1.605a.74.74 0 0 0 .391-.977.766.766 0 0 0-.999-.4l-4.97 2.11q-.24.102-.489.17a3 3 0 0 1-1.955-.001" })
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
exports.AccessibilityRegular = AccessibilityRegular;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
function createIconComponent(name, defaultClassName, getSVGData) {
|
|
4
|
+
const svgDataByHeight = getSVGData();
|
|
5
|
+
const heights = Object.keys(svgDataByHeight);
|
|
6
|
+
const Icon = React.forwardRef(({ "aria-label": ariaLabel, "aria-labelledby": arialabelledby, tabIndex, className = "", fill = "currentColor", size = 16, id, title, style, ...rest }, ref) => {
|
|
7
|
+
const height = size;
|
|
8
|
+
const naturalHeight = closestNaturalHeight(heights, height);
|
|
9
|
+
const naturalWidth = svgDataByHeight[naturalHeight].width;
|
|
10
|
+
const width = height * (naturalWidth / parseInt(naturalHeight, 10));
|
|
11
|
+
const path = svgDataByHeight[naturalHeight].path;
|
|
12
|
+
const labelled = ariaLabel || arialabelledby;
|
|
13
|
+
const role = labelled ? "img" : undefined;
|
|
14
|
+
const classes = `${defaultClassName} ${className}`.trim();
|
|
15
|
+
return (React.createElement("svg", { ref: ref, ...rest, "aria-hidden": labelled ? undefined : "true", tabIndex: tabIndex, focusable: (tabIndex ?? -1) >= 0 ? "true" : "false", "aria-label": ariaLabel, "aria-labelledby": arialabelledby, className: classes, role: role, viewBox: `0 0 ${naturalWidth} ${naturalHeight}`, width: width, height: height, fill: fill, id: id, display: "inline-block", overflow: "visible", style: style },
|
|
16
|
+
title ? React.createElement("title", null, title) : null,
|
|
17
|
+
path));
|
|
18
|
+
});
|
|
19
|
+
Icon.displayName = name;
|
|
20
|
+
return Icon;
|
|
21
|
+
}
|
|
22
|
+
function closestNaturalHeight(naturalHeights, height) {
|
|
23
|
+
const closestHeight = naturalHeights
|
|
24
|
+
.map((naturalHeight) => parseInt(naturalHeight, 10))
|
|
25
|
+
.reduce((acc, naturalHeight) => (naturalHeight <= height ? naturalHeight : acc), parseInt(naturalHeights[0], 10));
|
|
26
|
+
return closestHeight.toString();
|
|
27
|
+
}
|
|
28
|
+
const AccessibilityRegular = /*#__PURE__*/ createIconComponent("AccessibilityRegular", "icon icon-accessibility_regular", () => {
|
|
29
|
+
return {
|
|
30
|
+
"24": {
|
|
31
|
+
"width": 24,
|
|
32
|
+
"path": React.createElement("path", { d: "M10.5 5a1.5 1.5 0 0 0 .968 1.403c.35.085.714.085 1.063 0A1.5 1.5 0 1 0 10.5 5m-1.474.399a3 3 0 1 1 5.947 0l2.877-1.221a2.266 2.266 0 0 1 2.962 1.184 2.24 2.24 0 0 1-1.181 2.954l-3.628 1.54v3.717l1.874 5.444a2.25 2.25 0 1 1-4.255 1.465L12 15.772l-1.622 4.71a2.25 2.25 0 1 1-4.255-1.465l1.88-5.457V9.858L4.37 8.316a2.24 2.24 0 0 1-1.182-2.954A2.266 2.266 0 0 1 6.15 4.178zm1.996 2.438a4 4 0 0 1-.487-.168l-4.971-2.11a.766.766 0 0 0-1 .399.74.74 0 0 0 .392.977L8.74 8.542c.462.196.761.649.761 1.15v3.91q0 .208-.068.406l-1.892 5.497a.75.75 0 1 0 1.418.488l2.108-6.123c.306-.888 1.56-.884 1.864 0l2.108 6.123a.75.75 0 1 0 1.419-.488l-1.888-5.483a1.3 1.3 0 0 1-.069-.407V9.691c0-.502.3-.955.762-1.151l3.78-1.605a.74.74 0 0 0 .391-.977.766.766 0 0 0-.999-.4l-4.97 2.11q-.24.102-.489.17a3 3 0 0 1-1.955-.001" })
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
export { AccessibilityRegular };
|
package/package.json
CHANGED
|
@@ -1,22 +1,33 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gamecrafters/base-ui-icons",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"description": "",
|
|
5
|
-
"main": "index.js",
|
|
5
|
+
"main": "./build/react/index.js",
|
|
6
|
+
"module": "./build/react/index.mjs",
|
|
7
|
+
"types": "./build/react/index.d.ts",
|
|
6
8
|
"exports": {
|
|
7
9
|
"./react": {
|
|
8
|
-
"
|
|
9
|
-
|
|
10
|
+
"import": {
|
|
11
|
+
"types": "./build/react/index.d.mts",
|
|
12
|
+
"default": "./build/react/index.mjs"
|
|
13
|
+
},
|
|
14
|
+
"require": {
|
|
15
|
+
"types": "./build/react/index.d.ts",
|
|
16
|
+
"default": "./build/react/index.js"
|
|
17
|
+
}
|
|
10
18
|
}
|
|
11
19
|
},
|
|
20
|
+
"sideEffects": false,
|
|
12
21
|
"files": [
|
|
13
|
-
"
|
|
22
|
+
"build"
|
|
14
23
|
],
|
|
15
24
|
"scripts": {
|
|
16
25
|
"build:optimize": "svgo icons --config svgo.config.js",
|
|
17
|
-
"build:data": "node scripts/build.js generate-data -i \"icons/**/*.svg\" -o
|
|
18
|
-
"build:react": "node scripts/build.js generate-icons -i
|
|
19
|
-
"build": "
|
|
26
|
+
"build:data": "node scripts/build.js generate-data -i \"icons/**/*.svg\" -o lib/data.json -k keywords.json",
|
|
27
|
+
"build:react": "node scripts/build.js generate-icons -i lib/data.json -o lib/react",
|
|
28
|
+
"build:bundle": "rollup --config rollup.config.mjs",
|
|
29
|
+
"build": "npm run build:optimize && npm run build:data && npm run build:react && npm run build:bundle",
|
|
30
|
+
"typecheck": "tsc --noEmit"
|
|
20
31
|
},
|
|
21
32
|
"publishConfig": {
|
|
22
33
|
"access": "public"
|
|
@@ -33,18 +44,26 @@
|
|
|
33
44
|
"url": "https://github.com/donaldturinglee/base-ui-icons/issues"
|
|
34
45
|
},
|
|
35
46
|
"homepage": "https://github.com/donaldturinglee/base-ui-icons#readme",
|
|
36
|
-
"
|
|
47
|
+
"peerDependencies": {
|
|
48
|
+
"react": ">=18"
|
|
49
|
+
},
|
|
50
|
+
"devDependencies": {
|
|
37
51
|
"@babel/generator": "^7.28.5",
|
|
38
52
|
"@babel/types": "^7.28.5",
|
|
53
|
+
"@rollup/plugin-typescript": "^12.3.0",
|
|
54
|
+
"@types/react": "^19.2.2",
|
|
39
55
|
"cheerio": "^1.1.2",
|
|
40
|
-
"clsx": "^2.1.1",
|
|
41
56
|
"fs-extra": "^11.3.2",
|
|
42
57
|
"globby": "^15.0.0",
|
|
43
58
|
"lodash.merge": "^4.6.2",
|
|
59
|
+
"react": "^19.2.0",
|
|
60
|
+
"rollup": "^4.62.2",
|
|
61
|
+
"rollup-plugin-dts": "^6.4.1",
|
|
44
62
|
"svgo": "^4.0.0",
|
|
45
63
|
"svgson": "^5.3.1",
|
|
46
|
-
"tailwind-merge": "^3.6.0",
|
|
47
64
|
"trim-newlines": "^5.0.0",
|
|
65
|
+
"tslib": "^2.8.1",
|
|
66
|
+
"typescript": "^6.0.3",
|
|
48
67
|
"yargs": "^18.0.0"
|
|
49
68
|
}
|
|
50
69
|
}
|
package/lib/classnames/index.ts
DELETED
package/lib/react/Icon.tsx
DELETED
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import type { IconProps, SVGData } from "./Icon.types";
|
|
3
|
-
import { classNames } from "@/lib/classnames";
|
|
4
|
-
|
|
5
|
-
function createIconComponent(name: string, defaultClassName: string, getSVGData: () => SVGData) {
|
|
6
|
-
const svgDataByHeight = getSVGData()
|
|
7
|
-
const heights = Object.keys(svgDataByHeight)
|
|
8
|
-
|
|
9
|
-
const Icon = React.forwardRef<SVGSVGElement, IconProps>(
|
|
10
|
-
(
|
|
11
|
-
{
|
|
12
|
-
"aria-label": ariaLabel,
|
|
13
|
-
"aria-labelledby": arialabelledby,
|
|
14
|
-
tabIndex,
|
|
15
|
-
className = "",
|
|
16
|
-
fill = "currentColor",
|
|
17
|
-
size = 16,
|
|
18
|
-
id,
|
|
19
|
-
title,
|
|
20
|
-
style,
|
|
21
|
-
...rest
|
|
22
|
-
},
|
|
23
|
-
ref,
|
|
24
|
-
) => {
|
|
25
|
-
const height = size
|
|
26
|
-
const naturalHeight = closestNaturalHeight(heights, height)
|
|
27
|
-
const naturalWidth = svgDataByHeight[naturalHeight].width
|
|
28
|
-
const width = height * (naturalWidth / parseInt(naturalHeight, 10))
|
|
29
|
-
const path = svgDataByHeight[naturalHeight].path
|
|
30
|
-
const labelled = ariaLabel || arialabelledby
|
|
31
|
-
const role = labelled ? "img" : undefined
|
|
32
|
-
const classes = classNames(defaultClassName, className)
|
|
33
|
-
|
|
34
|
-
return (
|
|
35
|
-
<svg
|
|
36
|
-
ref={ref}
|
|
37
|
-
{...rest}
|
|
38
|
-
aria-hidden={labelled ? undefined : "true"}
|
|
39
|
-
tabIndex={tabIndex}
|
|
40
|
-
focusable={(tabIndex ?? -1) >= 0 ? "true" : "false"}
|
|
41
|
-
aria-label={ariaLabel}
|
|
42
|
-
aria-labelledby={arialabelledby}
|
|
43
|
-
className={classes}
|
|
44
|
-
role={role}
|
|
45
|
-
viewBox={`0 0 ${naturalWidth} ${naturalHeight}`}
|
|
46
|
-
width={width}
|
|
47
|
-
height={height}
|
|
48
|
-
fill={fill}
|
|
49
|
-
id={id}
|
|
50
|
-
display="inline-block"
|
|
51
|
-
overflow="visible"
|
|
52
|
-
style={style}
|
|
53
|
-
>
|
|
54
|
-
{title ? <title>{title}</title> : null}
|
|
55
|
-
{path}
|
|
56
|
-
</svg>
|
|
57
|
-
)
|
|
58
|
-
},
|
|
59
|
-
)
|
|
60
|
-
|
|
61
|
-
Icon.displayName = name
|
|
62
|
-
|
|
63
|
-
return Icon
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
function closestNaturalHeight(naturalHeights: string[], height: number): string {
|
|
67
|
-
const closestHeight = naturalHeights
|
|
68
|
-
.map((naturalHeight) => parseInt(naturalHeight, 10))
|
|
69
|
-
.reduce((acc, naturalHeight) => (naturalHeight <= height ? naturalHeight : acc), parseInt(naturalHeights[0], 10))
|
|
70
|
-
return closestHeight.toString()
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
export const AccessibilityRegularIcon = /*#__PURE__*/createIconComponent("AccessibilityRegularIcon", "icon icon-accessibility_regular", () => {
|
|
74
|
-
return {
|
|
75
|
-
"24": {
|
|
76
|
-
"width": 24,
|
|
77
|
-
"path": <path d="M10.5 5a1.5 1.5 0 0 0 .968 1.403c.35.085.714.085 1.063 0A1.5 1.5 0 1 0 10.5 5m-1.474.399a3 3 0 1 1 5.947 0l2.877-1.221a2.266 2.266 0 0 1 2.962 1.184 2.24 2.24 0 0 1-1.181 2.954l-3.628 1.54v3.717l1.874 5.444a2.25 2.25 0 1 1-4.255 1.465L12 15.772l-1.622 4.71a2.25 2.25 0 1 1-4.255-1.465l1.88-5.457V9.858L4.37 8.316a2.24 2.24 0 0 1-1.182-2.954A2.266 2.266 0 0 1 6.15 4.178zm1.996 2.438a4 4 0 0 1-.487-.168l-4.971-2.11a.766.766 0 0 0-1 .399.74.74 0 0 0 .392.977L8.74 8.542c.462.196.761.649.761 1.15v3.91q0 .208-.068.406l-1.892 5.497a.75.75 0 1 0 1.418.488l2.108-6.123c.306-.888 1.56-.884 1.864 0l2.108 6.123a.75.75 0 1 0 1.419-.488l-1.888-5.483a1.3 1.3 0 0 1-.069-.407V9.691c0-.502.3-.955.762-1.151l3.78-1.605a.74.74 0 0 0 .391-.977.766.766 0 0 0-.999-.4l-4.97 2.11q-.24.102-.489.17a3 3 0 0 1-1.955-.001" />
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
|
-
});
|
package/lib/react/index.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import type { ForwardRefExoticComponent, RefAttributes } from "react";
|
|
2
|
-
import type { IconProps } from "./Icon.types";
|
|
3
|
-
|
|
4
|
-
export type { IconProps } from "./Icon.types";
|
|
5
|
-
export type Icon = ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
|
|
6
|
-
|
|
7
|
-
export { AccessibilityRegularIcon } from "./Icon";
|