@eleventheye/asui 1.0.0
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/LICENSE +674 -0
- package/README.md +2 -0
- package/package.json +53 -0
- package/src/icons/AddItemIcon.tsx +37 -0
- package/src/icons/AddUserIcon.tsx +36 -0
- package/src/icons/CheckIcon.tsx +37 -0
- package/src/icons/CloseIcon.tsx +34 -0
- package/src/icons/DeleteIcon.tsx +36 -0
- package/src/icons/EyeIcon.tsx +36 -0
- package/src/icons/EyeSlashIcon.tsx +43 -0
- package/src/icons/GamesIcon.tsx +53 -0
- package/src/icons/GearUserIcon.tsx +40 -0
- package/src/icons/HexagonIcon.tsx +38 -0
- package/src/icons/HomeIcon.tsx +36 -0
- package/src/icons/Icons.types.ts +10 -0
- package/src/icons/LockIcon.tsx +38 -0
- package/src/icons/PenIcon.tsx +36 -0
- package/src/icons/RulerIcon.tsx +36 -0
- package/src/icons/SaveIcon.tsx +45 -0
- package/src/icons/TimeLapseIcon.tsx +36 -0
- package/src/icons/UnlockIcon.tsx +38 -0
- package/src/icons/UserSettingsIcon.tsx +34 -0
- package/src/icons/index.ts +53 -0
- package/src/icons/styles.tsx +9 -0
- package/src/index.ts +19 -0
package/package.json
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@eleventheye/asui",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"private": false,
|
|
5
|
+
"description": "AS UI React Library by eleventheye (another one!)",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"ui",
|
|
8
|
+
"ux",
|
|
9
|
+
"components",
|
|
10
|
+
"js",
|
|
11
|
+
"javascript",
|
|
12
|
+
"react",
|
|
13
|
+
"web"
|
|
14
|
+
],
|
|
15
|
+
"homepage": "https://github.com/Andrey11/asui#readme",
|
|
16
|
+
"bugs": {
|
|
17
|
+
"url": "https://github.com/Andrey11/asui/issues"
|
|
18
|
+
},
|
|
19
|
+
"repository": {
|
|
20
|
+
"type": "git",
|
|
21
|
+
"url": "https://github.com/Andrey11/asui"
|
|
22
|
+
},
|
|
23
|
+
"license": "ICS",
|
|
24
|
+
"author": "eleventheye.com",
|
|
25
|
+
"type": "module",
|
|
26
|
+
"main": "dist/index.js",
|
|
27
|
+
"types": "dist/index.d.ts",
|
|
28
|
+
"files": [
|
|
29
|
+
"src/**/*"
|
|
30
|
+
],
|
|
31
|
+
"exports": {
|
|
32
|
+
".": {
|
|
33
|
+
"types": "./dist/index.d.ts",
|
|
34
|
+
"default": "./dist/index.js"
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
"scripts": {
|
|
38
|
+
"build": "tsc",
|
|
39
|
+
"clean": "rimraf dist",
|
|
40
|
+
"prebuild": "npm run clean",
|
|
41
|
+
"preversion": "npm run build",
|
|
42
|
+
"test": "jest",
|
|
43
|
+
"version": "npm publish"
|
|
44
|
+
},
|
|
45
|
+
"devDependencies": {
|
|
46
|
+
"@types/styled-components": "^5.1.34",
|
|
47
|
+
"typescript": "^5.8.3"
|
|
48
|
+
},
|
|
49
|
+
"dependencies": {
|
|
50
|
+
"rimraf": "^6.0.1",
|
|
51
|
+
"styled-components": "^6.1.17"
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { IconProps } from 'icons/Icons.types';
|
|
2
|
+
import { IconContainer } from 'icons/styles';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
|
|
5
|
+
const AddItemIcon: React.FC<IconProps> = ({
|
|
6
|
+
className = '',
|
|
7
|
+
size = 24,
|
|
8
|
+
color = '#fffff0',
|
|
9
|
+
fillColor = 'transparent',
|
|
10
|
+
fillOpacity = 1,
|
|
11
|
+
circleStrokeColor = '#fffff0',
|
|
12
|
+
}) => {
|
|
13
|
+
return (
|
|
14
|
+
<IconContainer className={className}>
|
|
15
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
|
|
16
|
+
<circle
|
|
17
|
+
fill={fillColor}
|
|
18
|
+
fillOpacity={fillOpacity}
|
|
19
|
+
cx="12"
|
|
20
|
+
cy="12"
|
|
21
|
+
r="10.5"
|
|
22
|
+
stroke={circleStrokeColor}
|
|
23
|
+
strokeWidth={'1.5px'}
|
|
24
|
+
/>
|
|
25
|
+
<path d="M10 18V16H8V14H10V12H12V14H14V16H12V18H10Z" fill={color} />
|
|
26
|
+
<path
|
|
27
|
+
fillRule="evenodd"
|
|
28
|
+
clipRule="evenodd"
|
|
29
|
+
d="M6 2C4.34315 2 3 3.34315 3 5V19C3 20.6569 4.34315 22 6 22H18C19.6569 22 21 20.6569 21 19V9C21 5.13401 17.866 2 14 2H6ZM6 4H13V9H19V19C19 19.5523 18.5523 20 18 20H6C5.44772 20 5 19.5523 5 19V5C5 4.44772 5.44772 4 6 4ZM15 4.10002C16.6113 4.4271 17.9413 5.52906 18.584 7H15V4.10002Z"
|
|
30
|
+
fill={color}
|
|
31
|
+
/>
|
|
32
|
+
</svg>
|
|
33
|
+
</IconContainer>
|
|
34
|
+
);
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export default AddItemIcon;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { IconProps } from 'icons/Icons.types.js';
|
|
2
|
+
import { IconContainer } from 'icons/styles';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
|
|
5
|
+
const AddUserIcon: React.FC<IconProps> = ({
|
|
6
|
+
className = '',
|
|
7
|
+
size = 24,
|
|
8
|
+
color = '#fffff0',
|
|
9
|
+
fillColor = 'transparent',
|
|
10
|
+
fillOpacity = 1,
|
|
11
|
+
circleStrokeColor = '#fffff0',
|
|
12
|
+
}) => {
|
|
13
|
+
return (
|
|
14
|
+
<IconContainer className={className}>
|
|
15
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
|
|
16
|
+
<circle
|
|
17
|
+
fill={fillColor}
|
|
18
|
+
fillOpacity={fillOpacity}
|
|
19
|
+
cx="12"
|
|
20
|
+
cy="12"
|
|
21
|
+
r="10.5"
|
|
22
|
+
stroke={circleStrokeColor}
|
|
23
|
+
strokeWidth={'1.5px'}
|
|
24
|
+
/>
|
|
25
|
+
<path
|
|
26
|
+
fillRule="evenodd"
|
|
27
|
+
clipRule="evenodd"
|
|
28
|
+
d="M9.15 11.18c1.49 0 2.7-1.21 2.7-2.7s-1.21-2.7-2.7-2.7-2.7 1.21-2.7 2.7 1.21 2.7 2.7 2.7Zm0-1.35c.75 0 1.35-.6 1.35-1.35s-.6-1.35-1.35-1.35-1.35.6-1.35 1.35.6 1.35 1.35 1.35Zm2.02 3.38c.37 0 .68.31.68.68v4.05h1.35v-4.05c0-1.12-.91-2.02-2.02-2.02H7.13c-1.12-.02-2.03.89-2.03 2.01v4.05H6.45v-4.05c0-.37.31-.68.68-.68h4.05ZM15.9 8.48h1.35v1.35h1.35v1.35H17.25v1.35H15.9v-1.35H14.55V9.83h1.35V8.48Z"
|
|
29
|
+
fill={color}
|
|
30
|
+
/>
|
|
31
|
+
</svg>
|
|
32
|
+
</IconContainer>
|
|
33
|
+
);
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
export default AddUserIcon;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { IconProps } from 'icons/Icons.types.js';
|
|
2
|
+
import { IconContainer } from 'icons/styles';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
|
|
5
|
+
const CheckIcon: React.FC<IconProps> = ({
|
|
6
|
+
className = '',
|
|
7
|
+
style,
|
|
8
|
+
size = 24,
|
|
9
|
+
color = '#fffff0',
|
|
10
|
+
fillColor = 'transparent',
|
|
11
|
+
fillOpacity = 1,
|
|
12
|
+
circleStrokeColor = '#fffff0',
|
|
13
|
+
}) => {
|
|
14
|
+
return (
|
|
15
|
+
<IconContainer className={className} style={style}>
|
|
16
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
|
|
17
|
+
<circle
|
|
18
|
+
fill={fillColor}
|
|
19
|
+
fillOpacity={fillOpacity}
|
|
20
|
+
cx="12"
|
|
21
|
+
cy="12"
|
|
22
|
+
r="10.5"
|
|
23
|
+
stroke={circleStrokeColor}
|
|
24
|
+
strokeWidth={'1.5px'}
|
|
25
|
+
/>
|
|
26
|
+
|
|
27
|
+
<path
|
|
28
|
+
fillRule="nonzero"
|
|
29
|
+
d="M10.24 16.31 6 12.07l1.41-1.41 2.83 2.83L15.9 7.83l1.41 1.41-7.07 7.07Z"
|
|
30
|
+
fill={color}
|
|
31
|
+
/>
|
|
32
|
+
</svg>
|
|
33
|
+
</IconContainer>
|
|
34
|
+
);
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export default CheckIcon;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { IconProps } from 'icons/Icons.types.js';
|
|
2
|
+
import { IconContainer } from 'icons/styles';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
|
|
5
|
+
const CloseIcon: React.FC<IconProps> = ({
|
|
6
|
+
className = '',
|
|
7
|
+
size = 24,
|
|
8
|
+
color = '#fffff0',
|
|
9
|
+
fillColor = 'transparent',
|
|
10
|
+
fillOpacity = 1,
|
|
11
|
+
circleStrokeColor = '#fffff0',
|
|
12
|
+
}) => {
|
|
13
|
+
return (
|
|
14
|
+
<IconContainer className={className}>
|
|
15
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
|
|
16
|
+
<circle
|
|
17
|
+
fill={fillColor}
|
|
18
|
+
fillOpacity={fillOpacity}
|
|
19
|
+
cx="12"
|
|
20
|
+
cy="12"
|
|
21
|
+
r="10.5"
|
|
22
|
+
stroke={circleStrokeColor}
|
|
23
|
+
strokeWidth={'1.5px'}
|
|
24
|
+
/>
|
|
25
|
+
<path
|
|
26
|
+
d="M16.3394 9.32245C16.7434 8.94589 16.7657 8.31312 16.3891 7.90911C16.0126 7.50509 15.3798 7.48283 14.9758 7.85938L12.0497 10.5866L9.32245 7.66048C8.94589 7.25647 8.31312 7.23421 7.90911 7.61076C7.50509 7.98731 7.48283 8.62008 7.85938 9.0241L10.5866 11.9502L7.66048 14.6775C7.25647 15.054 7.23421 15.6868 7.61076 16.0908C7.98731 16.4948 8.62008 16.5171 9.0241 16.1405L11.9502 13.4133L14.6775 16.3394C15.054 16.7434 15.6868 16.7657 16.0908 16.3891C16.4948 16.0126 16.5171 15.3798 16.1405 14.9758L13.4133 12.0497L16.3394 9.32245Z"
|
|
27
|
+
fill={color}
|
|
28
|
+
/>
|
|
29
|
+
</svg>
|
|
30
|
+
</IconContainer>
|
|
31
|
+
);
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export default CloseIcon;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { IconProps } from 'icons/Icons.types';
|
|
2
|
+
import { IconContainer } from 'icons/styles';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
|
|
5
|
+
const DeleteIcon: React.FC<IconProps> = ({
|
|
6
|
+
className = '',
|
|
7
|
+
size = 24,
|
|
8
|
+
color = '#fffff0',
|
|
9
|
+
fillColor = 'transparent',
|
|
10
|
+
fillOpacity = 1,
|
|
11
|
+
circleStrokeColor = '#fffff0',
|
|
12
|
+
}) => {
|
|
13
|
+
return (
|
|
14
|
+
<IconContainer className={className}>
|
|
15
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
|
|
16
|
+
<circle
|
|
17
|
+
fill={fillColor}
|
|
18
|
+
fillOpacity={fillOpacity}
|
|
19
|
+
cx="12"
|
|
20
|
+
cy="12"
|
|
21
|
+
r="10.5"
|
|
22
|
+
stroke={circleStrokeColor}
|
|
23
|
+
strokeWidth={'1.5px'}
|
|
24
|
+
/>
|
|
25
|
+
<path
|
|
26
|
+
d="M15.5 7.5V6.8c0-.8-.6-1.4-1.4-1.4H9.9c-.8 0-1.4.6-1.4 1.4v.7H6.4c-.4 0-.7.3-.7.7s.3.7.7.7h.7v7.7c0 1.2.9 2.1 2.1 2.1h5.6c1.2 0 2.1-.9 2.1-2.1V8.9h.7c.4 0 .7-.3.7-.7s-.3-.7-.7-.7H15.5Zm-1.4-.7H9.9v.7h4.2V6.8Zm1.4 2.1h-7v7.7c0 .4.3.7.7.7h5.6c.4 0 .7-.3.7-.7V8.9ZM9.9 10.3h1.4v5.6H9.9V10.3Zm2.8 0h1.4v5.6H12.7V10.3Z"
|
|
27
|
+
fillRule="evenodd"
|
|
28
|
+
clipRule="evenodd"
|
|
29
|
+
fill={color}
|
|
30
|
+
/>
|
|
31
|
+
</svg>
|
|
32
|
+
</IconContainer>
|
|
33
|
+
);
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
export default DeleteIcon;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { IconProps } from 'icons/Icons.types.js';
|
|
2
|
+
import { IconContainer } from 'icons/styles';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
|
|
5
|
+
const EyeIcon: React.FC<IconProps> = ({
|
|
6
|
+
className = '',
|
|
7
|
+
size = 24,
|
|
8
|
+
color = '#fffff0',
|
|
9
|
+
fillColor = 'transparent',
|
|
10
|
+
fillOpacity = 1,
|
|
11
|
+
circleStrokeColor = '#fffff0',
|
|
12
|
+
}) => {
|
|
13
|
+
return (
|
|
14
|
+
<IconContainer className={className}>
|
|
15
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
|
|
16
|
+
<circle
|
|
17
|
+
fill={fillColor}
|
|
18
|
+
fillOpacity={fillOpacity}
|
|
19
|
+
cx="12"
|
|
20
|
+
cy="12"
|
|
21
|
+
r="10.5"
|
|
22
|
+
stroke={circleStrokeColor}
|
|
23
|
+
strokeWidth={'1.5px'}
|
|
24
|
+
/>
|
|
25
|
+
<path
|
|
26
|
+
fillRule="evenodd"
|
|
27
|
+
clipRule="evenodd"
|
|
28
|
+
d="m12 5.5c4 0 7.4 2.7 8.3 6.5-.9 3.7-4.3 6.5-8.3 6.5-4-.1-7.4-2.8-8.3-6.5C4.6 8.3 8 5.5 12 5.5ZM12 17c-3.2 0-5.9-2.1-6.8-5C6.1 9.1 8.8 7 12 7s5.9 2.1 6.8 5c-.9 2.9-3.6 5-6.8 5zm2.9-5c0 1.6-1.3 2.9-2.9 2.9S9.1 13.6 9.1 12 10.4 9.1 12 9.1s2.9 1.3 2.9 2.9zm-1.4 0c0 .8-.6 1.4-1.4 1.4s-1.4-.6-1.4-1.4.6-1.4 1.4-1.4 1.4.6 1.4 1.4z"
|
|
29
|
+
fill={color}
|
|
30
|
+
/>
|
|
31
|
+
</svg>
|
|
32
|
+
</IconContainer>
|
|
33
|
+
);
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
export default EyeIcon;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { IconProps } from 'icons/Icons.types.js';
|
|
2
|
+
import { IconContainer } from 'icons/styles';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
|
|
5
|
+
const EyeSlashIcon: React.FC<IconProps> = ({
|
|
6
|
+
className = '',
|
|
7
|
+
size = 24,
|
|
8
|
+
color = '#fffff0',
|
|
9
|
+
fillColor = 'transparent',
|
|
10
|
+
fillOpacity = 1,
|
|
11
|
+
circleStrokeColor = '#fffff0',
|
|
12
|
+
}) => {
|
|
13
|
+
return (
|
|
14
|
+
<IconContainer className={className}>
|
|
15
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
|
|
16
|
+
<circle
|
|
17
|
+
fill={fillColor}
|
|
18
|
+
fillOpacity={fillOpacity}
|
|
19
|
+
cx="12"
|
|
20
|
+
cy="12"
|
|
21
|
+
r="10.5"
|
|
22
|
+
stroke={circleStrokeColor}
|
|
23
|
+
strokeWidth={'1.5px'}
|
|
24
|
+
/>
|
|
25
|
+
|
|
26
|
+
<path
|
|
27
|
+
fillRule="evenodd"
|
|
28
|
+
clipRule="evenodd"
|
|
29
|
+
d="M 18.12,6.32 C 13.7,9.63 9.22,12.88 4.76,16.15 a 0.72,0.72 0 0 0 -0.15,1 0.72,0.72 0 0 0 1,0.15 C 10.07,14.04 14.54,10.78 18.98,7.47 a 0.72,0.72 0 0 0 0.14,-1 0.72,0.72 0 0 0 -1,-0.14 z"
|
|
30
|
+
fill={color}
|
|
31
|
+
/>
|
|
32
|
+
<path
|
|
33
|
+
fillRule="evenodd"
|
|
34
|
+
clipRule="evenodd"
|
|
35
|
+
d="m12 5.5c3.2 0 6.3 1.9 7.7 4.7.3.6.5 1.1.7 1.7-.8 3.2-3.5 5.8-6.8 6.3-3 .7-6.3-.5-8.2-2.9-.8-.9-1.4-2.1-1.7-3.3.8-3.2 3.5-5.7 6.7-6.3.5-.1 1-.1 1.6-.1zM12 17c-3 .1-5.9-2-6.8-4.9.1-.8.6-1.6 1.1-2.3 1.8-2.4 5.1-3.4 7.9-2.5 2.2.7 4 2.5 4.6 4.7-.9 2.9-3.7 5.1-6.8 5Zm2.9-5c.1 1.6-1.5 3.1-3.2 2.9-1.6-.2-2.9-1.9-2.5-3.5.3-1.6 2.1-2.7 3.6-2.1 1.2.3 2.1 1.5 2.1 2.7Zm-1.4 0c.1 1-1.2 1.8-2.1 1.3s-1-1.9-.1-2.5c.9-.7 2.3.1 2.2 1.2z"
|
|
36
|
+
fill={color}
|
|
37
|
+
/>
|
|
38
|
+
</svg>
|
|
39
|
+
</IconContainer>
|
|
40
|
+
);
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
export default EyeSlashIcon;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { IconProps } from 'icons/Icons.types.js';
|
|
2
|
+
import { IconContainer } from 'icons/styles';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
|
|
5
|
+
const GamesIcon: React.FC<IconProps> = ({
|
|
6
|
+
className = '',
|
|
7
|
+
size = 24,
|
|
8
|
+
color = '#fffff0',
|
|
9
|
+
fillColor = 'transparent',
|
|
10
|
+
fillOpacity = 1,
|
|
11
|
+
circleStrokeColor = '#fffff0',
|
|
12
|
+
}) => {
|
|
13
|
+
return (
|
|
14
|
+
<IconContainer className={className}>
|
|
15
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
|
|
16
|
+
<circle
|
|
17
|
+
fill={fillColor}
|
|
18
|
+
fillOpacity={fillOpacity}
|
|
19
|
+
cx="12"
|
|
20
|
+
cy="12"
|
|
21
|
+
r="10.5"
|
|
22
|
+
stroke={circleStrokeColor}
|
|
23
|
+
strokeWidth={'1.5px'}
|
|
24
|
+
/>
|
|
25
|
+
<path
|
|
26
|
+
d="M13.83 10.91c.27.27.27.71 0 .98-.27.28-.72.28-.99 0-.27-.27-.27-.71 0-.98.27-.28.72-.28.99 0Z"
|
|
27
|
+
fill={color}
|
|
28
|
+
/>
|
|
29
|
+
<path
|
|
30
|
+
d="M14.32 9.42c.28-.27.72-.27.99 0 .28.27.28.72 0 .99-.27.27-.71.27-.99 0-.27-.27-.27-.72 0-.99Z"
|
|
31
|
+
fill={color}
|
|
32
|
+
/>
|
|
33
|
+
<path
|
|
34
|
+
d="M16.8 10.91c.27.27.27.71 0 .98-.27.28-.72.28-.99 0-.27-.27-.27-.71 0-.98.27-.28.72-.28.99 0Z"
|
|
35
|
+
fill={color}
|
|
36
|
+
/>
|
|
37
|
+
<path
|
|
38
|
+
d="M14.32 12.39c.28-.27.72-.27.99 0 .28.27.28.72 0 .99-.27.27-.71.27-.99 0-.27-.27-.27-.72 0-.99Z"
|
|
39
|
+
fill={color}
|
|
40
|
+
/>
|
|
41
|
+
<path d="M7.2 12.1H5.8V10.7H7.2V9.3H8.6v1.4H10v1.4H8.6v1.4H7.2V12.1Z" fill={color} />
|
|
42
|
+
<path
|
|
43
|
+
fillRule="evenodd"
|
|
44
|
+
clipRule="evenodd"
|
|
45
|
+
d="M8.4 7C5.69 7 3.5 9.19 3.5 11.9c0 2.71 2.19 4.9 4.9 4.9h7c2.71 0 4.9-2.19 4.9-4.9 0-2.71-2.19-4.9-4.9-4.9h-7Zm7 1.4h-7c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5h7c1.93 0 3.5-1.57 3.5-3.5s-1.57-3.5-3.5-3.5Z"
|
|
46
|
+
fill={color}
|
|
47
|
+
/>
|
|
48
|
+
</svg>
|
|
49
|
+
</IconContainer>
|
|
50
|
+
);
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
export default GamesIcon;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { IconProps } from 'icons/Icons.types';
|
|
2
|
+
import { IconContainer } from 'icons/styles';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
|
|
5
|
+
const GearUserIcon: React.FC<IconProps> = ({
|
|
6
|
+
className = '',
|
|
7
|
+
size = 24,
|
|
8
|
+
color = '#fffff0',
|
|
9
|
+
fillColor = 'transparent',
|
|
10
|
+
fillOpacity = 1,
|
|
11
|
+
circleStrokeColor = '#fffff0',
|
|
12
|
+
}) => {
|
|
13
|
+
return (
|
|
14
|
+
<IconContainer className={className}>
|
|
15
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
|
|
16
|
+
<circle
|
|
17
|
+
fill={fillColor}
|
|
18
|
+
fillOpacity={fillOpacity}
|
|
19
|
+
cx="12"
|
|
20
|
+
cy="12"
|
|
21
|
+
r="10.5"
|
|
22
|
+
stroke={circleStrokeColor}
|
|
23
|
+
strokeWidth={'1.5px'}
|
|
24
|
+
/>
|
|
25
|
+
<path
|
|
26
|
+
fillRule="evenodd"
|
|
27
|
+
clipRule="evenodd"
|
|
28
|
+
d="M10.75 17.07c-.5-.13-.95-.3-1.38-.52-.41-.23-.82-.54-1.21-.95l-2.32 1-.94-1.59 2.03-1.54c-.06-.26-.1-.52-.14-.76-.04-.25-.05-.49-.05-.73 0-.26.02-.51.05-.76s.08-.49.15-.73L4.89 8.96l.94-1.59 2.33.98c.39-.39.78-.7 1.21-.94.41-.24.89-.41 1.41-.52l.26-2.49h1.95l.28 2.52c.44.06.91.23 1.39.53s.86.6 1.15.94l2.4-.99.89 1.59-2.07 1.56c.05.27.09.52.13.74.05.23.06.46.06.73 0 .23-.02.46-.06.7s-.09.5-.15.77l2.05 1.54-.92 1.59-2.32-1.02c-.42.4-.83.7-1.22.93s-.84.4-1.31.52l-.34 2.57h-1.88Zm-1.08-2.34V12.54c0-.6.49-1.1 1.1-1.1h2.19c.6 0 1.1.49 1.1 1.1v2.19Zm3.42-4.89A1.21 1.21 90 0011.88 8.62a1.21 1.21 90 00-1.2 1.21 1.21 1.21 90 001.21 1.21 1.21 1.21 90 001.21-1.21Z"
|
|
29
|
+
stroke={color}
|
|
30
|
+
fill="none"
|
|
31
|
+
strokeWidth={'1.25px'}
|
|
32
|
+
strokeLinecap="round"
|
|
33
|
+
strokeLinejoin="round"
|
|
34
|
+
/>
|
|
35
|
+
</svg>
|
|
36
|
+
</IconContainer>
|
|
37
|
+
);
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
export default GearUserIcon;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { IconProps } from 'icons/Icons.types.js';
|
|
2
|
+
import { IconContainer } from 'icons/styles';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
|
|
5
|
+
const HexagonIcon: React.FC<IconProps> = ({
|
|
6
|
+
className = '',
|
|
7
|
+
size = 24,
|
|
8
|
+
color = '#fffff0',
|
|
9
|
+
fillColor = 'transparent',
|
|
10
|
+
fillOpacity = 1,
|
|
11
|
+
circleStrokeColor = '#fffff0',
|
|
12
|
+
}) => {
|
|
13
|
+
return (
|
|
14
|
+
<IconContainer className={className}>
|
|
15
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
|
|
16
|
+
<circle
|
|
17
|
+
fill={fillColor}
|
|
18
|
+
fillOpacity={fillOpacity}
|
|
19
|
+
cx="12"
|
|
20
|
+
cy="12"
|
|
21
|
+
r="10.5"
|
|
22
|
+
stroke={circleStrokeColor}
|
|
23
|
+
strokeWidth={'1.5px'}
|
|
24
|
+
/>
|
|
25
|
+
<path
|
|
26
|
+
fillRule="evenodd"
|
|
27
|
+
clipRule="nonzero"
|
|
28
|
+
d="M7.7 14.16 11.9 16.5l4.2-2.34V9.64L11.9 7.3 7.7 9.64v4.52ZM11.9 4.9 5.6 8.4v7l6.3 3.5 6.3-3.5v-7L11.9 4.9Z"
|
|
29
|
+
fill={color}
|
|
30
|
+
stroke={color}
|
|
31
|
+
strokeWidth={'0.2px'}
|
|
32
|
+
/>
|
|
33
|
+
</svg>
|
|
34
|
+
</IconContainer>
|
|
35
|
+
);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export default HexagonIcon;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { IconProps } from 'icons/Icons.types';
|
|
2
|
+
import { IconContainer } from 'icons/styles';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
|
|
5
|
+
const HomeIcon: React.FC<IconProps> = ({
|
|
6
|
+
className = '',
|
|
7
|
+
size = 24,
|
|
8
|
+
color = '#fffff0',
|
|
9
|
+
fillColor = 'transparent',
|
|
10
|
+
fillOpacity = 1,
|
|
11
|
+
circleStrokeColor = '#fffff0',
|
|
12
|
+
}) => {
|
|
13
|
+
return (
|
|
14
|
+
<IconContainer className={className}>
|
|
15
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
|
|
16
|
+
<circle
|
|
17
|
+
fill={fillColor}
|
|
18
|
+
fillOpacity={fillOpacity}
|
|
19
|
+
cx="12"
|
|
20
|
+
cy="12"
|
|
21
|
+
r="10.5"
|
|
22
|
+
stroke={circleStrokeColor}
|
|
23
|
+
strokeWidth={'1.5px'}
|
|
24
|
+
/>
|
|
25
|
+
<path
|
|
26
|
+
fillRule="evenodd"
|
|
27
|
+
clipRule="evenodd"
|
|
28
|
+
d="M10.7 7.2c0 .4-.3.6-.6.6-.4 0-.6-.3-.6-.6s.3-.6.6-.6c.4 0 .6.3.6.6Zm-.6 2.6c.4 0 .6-.3.6-.6s-.3-.6-.6-.6c-.4 0-.6.3-.6.6s.3.6.6.6Zm.6 6.3c0 .4-.3.6-.6.6-.4 0-.6-.3-.6-.6s.3-.6.6-.6c.4 0 .6.3.6.6Zm-.6-4.4c.4 0 .6-.3.6-.6 0-.4-.3-.6-.6-.6-.4 0-.6.3-.6.6 0 .4.3.6.6.6Zm2.5-4.4c0 .4-.3.6-.6.6s-.6-.3-.6-.6.3-.6.6-.6.6.3.6.6ZM12 9.8c.4 0 .6-.3.6-.6s-.3-.6-.6-.6-.6.3-.6.6.3.6.6.6Zm.6 6.3c0 .4-.3.6-.6.6s-.6-.3-.6-.6.3-.6.6-.6.6.3.6.6Zm1.3-8.2c.4 0 .6-.3.6-.6s-.3-.6-.6-.6-.6.3-.6.6.3.6.6.6Zm.6 1.3c0 .4-.3.6-.6.6s-.6-.3-.6-.6.3-.6.6-.6.6.3.6.6Zm-.6 7.6c.4 0 .6-.3.6-.6s-.3-.6-.6-.6-.6.3-.6.6.3.6.6.6ZM9.5 4.7c-1.1 0-1.9.8-1.9 1.9V16.7c0 1.1.8 1.9 1.9 1.9h5c1.1 0 1.9-.8 1.9-1.9V6.6c0-1.1-.8-1.9-1.9-1.9h-5Zm5 1.3h-5c-.4 0-.6.3-.6.6V16.7c0 .4.3.6.6.6h5c.4 0 .6-.3.6-.6V6.6c0-.4-.3-.6-.6-.6Z"
|
|
29
|
+
fill={color}
|
|
30
|
+
/>
|
|
31
|
+
</svg>
|
|
32
|
+
</IconContainer>
|
|
33
|
+
);
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
export default HomeIcon;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { IconProps } from 'icons/Icons.types.js';
|
|
2
|
+
import { IconContainer } from 'icons/styles';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
|
|
5
|
+
const LockIcon: React.FC<IconProps> = ({
|
|
6
|
+
className = '',
|
|
7
|
+
size = 24,
|
|
8
|
+
color = '#fffff0',
|
|
9
|
+
fillColor = 'transparent',
|
|
10
|
+
fillOpacity = 1,
|
|
11
|
+
circleStrokeColor = '#fffff0',
|
|
12
|
+
}) => {
|
|
13
|
+
return (
|
|
14
|
+
<IconContainer className={className}>
|
|
15
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
|
|
16
|
+
<circle
|
|
17
|
+
fill={fillColor}
|
|
18
|
+
fillOpacity={fillOpacity}
|
|
19
|
+
cx="12"
|
|
20
|
+
cy="12"
|
|
21
|
+
r="10.5"
|
|
22
|
+
stroke={circleStrokeColor}
|
|
23
|
+
strokeWidth={'1.5px'}
|
|
24
|
+
/>
|
|
25
|
+
<path
|
|
26
|
+
fillRule="evenodd"
|
|
27
|
+
clipRule="nonzero"
|
|
28
|
+
d="M15.75 10.69c1.12 0 2.02.9 2.02 2.02v4.05c0 1.12-.9 2.02-2.02 2.02H7.65c-1.12 0-2.02-.9-2.02-2.02v-4.05c0-1.12.9-2.02 2.02-2.02V8.67c0-2.23 1.82-4.05 4.05-4.05s4.05 1.82 4.05 4.05v2.02ZM11.7 5.96c1.49 0 2.7 1.21 2.7 2.7v2.02H9V8.66c0-1.49 1.21-2.7 2.7-2.7Zm4.05 6.08H7.65c-.37 0-.68.3-.68.68v4.05c0 .37.3.68.68.68h8.1c.37 0 .68-.3.68-.68v-4.05c0-.37-.3-.68-.68-.68Z"
|
|
29
|
+
fill={color}
|
|
30
|
+
stroke={color}
|
|
31
|
+
strokeWidth={'0.2px'}
|
|
32
|
+
/>
|
|
33
|
+
</svg>
|
|
34
|
+
</IconContainer>
|
|
35
|
+
);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export default LockIcon;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { IconProps } from 'icons/Icons.types.js';
|
|
2
|
+
import { IconContainer } from 'icons/styles';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
|
|
5
|
+
const PenIcon: React.FC<IconProps> = ({
|
|
6
|
+
className = '',
|
|
7
|
+
size = 24,
|
|
8
|
+
color = '#fffff0',
|
|
9
|
+
fillColor = '#transparent',
|
|
10
|
+
fillOpacity = 1,
|
|
11
|
+
circleStrokeColor = '#fffff0',
|
|
12
|
+
}) => {
|
|
13
|
+
return (
|
|
14
|
+
<IconContainer className={className}>
|
|
15
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
|
|
16
|
+
<circle
|
|
17
|
+
fill={fillColor}
|
|
18
|
+
fillOpacity={fillOpacity}
|
|
19
|
+
cx="12"
|
|
20
|
+
cy="12"
|
|
21
|
+
r="10.5"
|
|
22
|
+
stroke={circleStrokeColor}
|
|
23
|
+
strokeWidth={'1.5px'}
|
|
24
|
+
/>
|
|
25
|
+
<path
|
|
26
|
+
fillRule="evenodd"
|
|
27
|
+
clipRule="evenodd"
|
|
28
|
+
d="m15.23 10.2-1.45-1.45.51-.51c.2-.2.52-.2.72 0l.72.72c.2.2.2.52 0 .72l-.51.51Zm-.93.93-1.45-1.45-3.27 3.27 1.45 1.45 3.27-3.27Zm2.18-4.36.72.72c.2.2.2.52 0 .72l-.45.45c.28.57.17 1.27-.3 1.75l-5.42 5.44-2.9-2.9 5.44-5.43c.47-.47 1.18-.58 1.75-.3l.45-.45c.2-.2.52-.2.72 0ZM6.62 17.35l1.09-3.98 2.89 2.89-3.98 1.09Z"
|
|
29
|
+
fill={color}
|
|
30
|
+
/>
|
|
31
|
+
</svg>
|
|
32
|
+
</IconContainer>
|
|
33
|
+
);
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
export default PenIcon;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { IconProps } from 'icons/Icons.types';
|
|
2
|
+
import { IconContainer } from 'icons/styles';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
|
|
5
|
+
const RulerIcon: React.FC<IconProps> = ({
|
|
6
|
+
className = '',
|
|
7
|
+
size = 24,
|
|
8
|
+
color = '#fffff0',
|
|
9
|
+
fillColor = 'transparent',
|
|
10
|
+
fillOpacity = 1,
|
|
11
|
+
circleStrokeColor = '#fffff0',
|
|
12
|
+
}) => {
|
|
13
|
+
return (
|
|
14
|
+
<IconContainer className={className}>
|
|
15
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
|
|
16
|
+
<circle
|
|
17
|
+
fill={fillColor}
|
|
18
|
+
fillOpacity={fillOpacity}
|
|
19
|
+
cx="12"
|
|
20
|
+
cy="12"
|
|
21
|
+
r="10.5"
|
|
22
|
+
stroke={circleStrokeColor}
|
|
23
|
+
strokeWidth={'1.5px'}
|
|
24
|
+
/>
|
|
25
|
+
<path
|
|
26
|
+
d="M9.3 8.6v2.1c0 .4.3.7.7.7s.7-.3.7-.7V8.6h1.4v3.5c0 .4.3.7.7.7s.7-.3.7-.7V8.6h1.4v2.1c0 .4.3.7.7.7s.7-.3.7-.7V8.6h1.4c.4 0 .7.3.7.7v4.9c0 .4-.3.7-.7.7H5.1c-.4 0-.7-.3-.7-.7V9.3c0-.4.3-.7.7-.7H6.5v3.5c0 .4.3.7.7.7s.7-.3.7-.7V8.6H9.3ZM5.1 7.2H17.7c1.2 0 2.1.9 2.1 2.1v4.9c0 1.2-.9 2.1-2.1 2.1H5.1c-1.2 0-2.1-.9-2.1-2.1V9.3c0-1.2.9-2.1 2.1-2.1Z"
|
|
27
|
+
fillRule="evenodd"
|
|
28
|
+
clipRule="evenodd"
|
|
29
|
+
fill={color}
|
|
30
|
+
/>
|
|
31
|
+
</svg>
|
|
32
|
+
</IconContainer>
|
|
33
|
+
);
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
export default RulerIcon;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { IconProps } from 'icons/Icons.types.js';
|
|
2
|
+
import { IconContainer } from 'icons/styles';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
|
|
5
|
+
const SaveIcon: React.FC<IconProps> = ({
|
|
6
|
+
className = '',
|
|
7
|
+
size = 24,
|
|
8
|
+
color = '#fffff0',
|
|
9
|
+
fillColor = 'transparent',
|
|
10
|
+
fillOpacity = 1,
|
|
11
|
+
circleStrokeColor = '#fffff0',
|
|
12
|
+
}) => {
|
|
13
|
+
return (
|
|
14
|
+
<IconContainer className={className}>
|
|
15
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
|
|
16
|
+
<circle
|
|
17
|
+
fill={fillColor}
|
|
18
|
+
fillOpacity={fillOpacity}
|
|
19
|
+
cx="12"
|
|
20
|
+
cy="12"
|
|
21
|
+
r="10.5"
|
|
22
|
+
stroke={circleStrokeColor}
|
|
23
|
+
strokeWidth={'1.5px'}
|
|
24
|
+
/>
|
|
25
|
+
|
|
26
|
+
<path
|
|
27
|
+
fillRule="evenodd"
|
|
28
|
+
clipRule="evenodd"
|
|
29
|
+
d="M12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9ZM11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12Z"
|
|
30
|
+
fill={color}
|
|
31
|
+
/>
|
|
32
|
+
<path d="M6.81 10.75c0-2.17 1.76-3.94 3.94-3.94v1.13c-1.55 0-2.81 1.26-2.81 2.81H6.81Z" fill={color} />
|
|
33
|
+
<path d="M13.25 16.06c1.55 0 2.81-1.26 2.81-2.81h1.13c0 2.17-1.76 3.94-3.94 3.94v-1.13Z" fill={color} />
|
|
34
|
+
<path
|
|
35
|
+
fillRule="evenodd"
|
|
36
|
+
clipRule="evenodd"
|
|
37
|
+
d="M12 3.75C7.44 3.75 3.75 7.44 3.75 12c0 4.56 3.69 8.25 8.25 8.25 4.56 0 8.25-3.69 8.25-8.25 0-4.56-3.69-8.25-8.25-8.25ZM5.25 12c0 3.73 3.02 6.75 6.75 6.75s6.75-3.02 6.75-6.75S15.73 5.25 12 5.25 5.25 8.27 5.25 12Z"
|
|
38
|
+
fill={color}
|
|
39
|
+
/>
|
|
40
|
+
</svg>
|
|
41
|
+
</IconContainer>
|
|
42
|
+
);
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
export default SaveIcon;
|