@caidentity/testicon 0.0.1
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/README.md +21 -0
- package/package.json +29 -0
- package/src/Icon.tsx +48 -0
- package/src/icons/manifest.json +10 -0
- package/src/icons/manifest.ts +21 -0
- package/src/icons.tsx +6 -0
- package/src/index.ts +2 -0
- package/tsconfig.json +16 -0
package/README.md
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# @caidentity/testicon
|
|
2
|
+
|
|
3
|
+
React icon package generated from your Design Library objects.
|
|
4
|
+
|
|
5
|
+
- Version: 0.0.1
|
|
6
|
+
- Install: `npm install @caidentity/testicon`
|
|
7
|
+
|
|
8
|
+
## Usage
|
|
9
|
+
|
|
10
|
+
```tsx
|
|
11
|
+
import { IconBase } from '@caidentity/testicon'
|
|
12
|
+
import { Home } from '@caidentity/testicon'
|
|
13
|
+
|
|
14
|
+
export function Example() {
|
|
15
|
+
return (
|
|
16
|
+
<div style={{ display: 'flex', gap: 12 }}>
|
|
17
|
+
<Home size={24} title="Home" />
|
|
18
|
+
</div>
|
|
19
|
+
)
|
|
20
|
+
}
|
|
21
|
+
```
|
package/package.json
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@caidentity/testicon",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "Icons for @caidentity/testicon",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"ICON",
|
|
8
|
+
"testicon",
|
|
9
|
+
"icons",
|
|
10
|
+
"react",
|
|
11
|
+
"svg",
|
|
12
|
+
"design-library"
|
|
13
|
+
],
|
|
14
|
+
"type": "module",
|
|
15
|
+
"main": "./src/index.ts",
|
|
16
|
+
"module": "./src/index.ts",
|
|
17
|
+
"types": "./src/index.ts",
|
|
18
|
+
"exports": {
|
|
19
|
+
".": {
|
|
20
|
+
"types": "./src/index.ts",
|
|
21
|
+
"import": "./src/index.ts"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
"peerDependencies": {
|
|
25
|
+
"react": ">=17.0.0",
|
|
26
|
+
"react-dom": ">=17.0.0"
|
|
27
|
+
},
|
|
28
|
+
"sideEffects": false
|
|
29
|
+
}
|
package/src/Icon.tsx
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React, { SVGProps } from 'react'
|
|
2
|
+
|
|
3
|
+
export interface IconProps extends SVGProps<SVGSVGElement> {
|
|
4
|
+
name: string
|
|
5
|
+
size?: number | string
|
|
6
|
+
title?: string
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
const iconRegistry = {
|
|
10
|
+
"frame": {
|
|
11
|
+
"svg": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800\" height=\"600\" viewBox=\"0 0 800 600\">\n<metadata><![CDATA[{\"pageId\":\"page-1\",\"viewMode\":\"frames\",\"frame\":{\"id\":\"frame-ugsm68m-1765604797950\",\"name\":\"Frame\",\"x\":317,\"y\":38,\"w\":800,\"h\":600,\"overflow\":\"hidden\"},\"shapeIds\":[\"path_wyhsf97\"]}]]></metadata>\n<g transform=\"translate(-317, -38)\"><g id=\"flattened_fills\"><path data-flattened=\"true\" fill=\"#000000\" fill-opacity=\"1\" stroke=\"none\" d=\"M 568 205 L 792 205 Q 800 205 800 213 L 800 377 Q 800 385 792 385 L 568 385 Q 560 385 560 377 L 560 213 Q 560 205 568 205 Z\" fillRule=\"nonzero\" /></g><path d=\"M 8 0 L 232 0 Q 240 0 240 8 L 240 172 Q 240 180 232 180 L 8 180 Q 0 180 0 172 L 0 8 Q 0 0 8 0 Z\" fill=\"none\" fill-opacity=\"0\" stroke=\"#000000\" stroke-opacity=\"1\" strokeWidth=\"2\" strokeLinecap=\"butt\" strokeLinejoin=\"miter\" transform=\"translate(560,205)\" /></g>",
|
|
12
|
+
"viewBox": "0 0 800 600"
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export const Icon: React.FC<IconProps> = ({
|
|
17
|
+
name,
|
|
18
|
+
size = 24,
|
|
19
|
+
title,
|
|
20
|
+
className,
|
|
21
|
+
...props
|
|
22
|
+
}) => {
|
|
23
|
+
const iconData = iconRegistry[name.toLowerCase()]
|
|
24
|
+
|
|
25
|
+
if (!iconData) {
|
|
26
|
+
console.warn(`Icon "${name}" not found`)
|
|
27
|
+
return null
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
return (
|
|
31
|
+
<svg
|
|
32
|
+
width={size}
|
|
33
|
+
height={size}
|
|
34
|
+
viewBox={iconData.viewBox}
|
|
35
|
+
fill="currentColor"
|
|
36
|
+
className={className}
|
|
37
|
+
aria-hidden={title ? undefined : true}
|
|
38
|
+
aria-labelledby={title ? `${name}-title` : undefined}
|
|
39
|
+
role="img"
|
|
40
|
+
{...props}
|
|
41
|
+
>
|
|
42
|
+
{title && <title id={`${name}-title`}>{title}</title>}
|
|
43
|
+
<g dangerouslySetInnerHTML={{ __html: iconData.svg }} />
|
|
44
|
+
</svg>
|
|
45
|
+
)
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export default Icon
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
// Generated manifest for icon lookup/runtime metadata
|
|
2
|
+
export type IconManifestEntry = {
|
|
3
|
+
id: string
|
|
4
|
+
name: string
|
|
5
|
+
component: string
|
|
6
|
+
width: number
|
|
7
|
+
height: number
|
|
8
|
+
viewBox: string
|
|
9
|
+
tags?: string[]
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export const iconsManifest: IconManifestEntry[] = [
|
|
13
|
+
{
|
|
14
|
+
"id": "frame-ugsm68m-1765604797950",
|
|
15
|
+
"name": "Frame",
|
|
16
|
+
"component": "frame",
|
|
17
|
+
"width": 800,
|
|
18
|
+
"height": 600,
|
|
19
|
+
"viewBox": "0 0 800 600"
|
|
20
|
+
}
|
|
21
|
+
] as IconManifestEntry[]
|
package/src/icons.tsx
ADDED
package/src/index.ts
ADDED
package/tsconfig.json
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2019",
|
|
4
|
+
"module": "ESNext",
|
|
5
|
+
"jsx": "react-jsx",
|
|
6
|
+
"strict": true,
|
|
7
|
+
"esModuleInterop": true,
|
|
8
|
+
"skipLibCheck": true,
|
|
9
|
+
"forceConsistentCasingInFileNames": true,
|
|
10
|
+
"declaration": true,
|
|
11
|
+
"outDir": "dist",
|
|
12
|
+
"moduleResolution": "Bundler",
|
|
13
|
+
"types": ["react", "react-dom"]
|
|
14
|
+
},
|
|
15
|
+
"include": ["src"]
|
|
16
|
+
}
|