@ncds/ui-admin-icon 0.1.0 → 0.1.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 +24 -24
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -22,64 +22,64 @@ yarn add @ncds/ui-admin-icon
|
|
|
22
22
|
|
|
23
23
|
## Usage
|
|
24
24
|
|
|
25
|
-
###
|
|
25
|
+
### Importing individual icons
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
You can import specific icons directly:
|
|
28
28
|
|
|
29
29
|
```jsx
|
|
30
|
-
import
|
|
30
|
+
import { Plus, Heart } from '@ncds/ui-admin-icon';
|
|
31
31
|
|
|
32
32
|
function MyComponent() {
|
|
33
33
|
return (
|
|
34
34
|
<div>
|
|
35
|
-
<
|
|
36
|
-
<
|
|
35
|
+
<Plus />
|
|
36
|
+
<Heart width={24} height={24} color="red" />
|
|
37
37
|
</div>
|
|
38
38
|
);
|
|
39
39
|
}
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
```ts
|
|
45
|
-
import type { IconName } from '@ncds/ui-admin-icon';
|
|
46
|
-
|
|
47
|
-
const iconName: IconName = 'plus';
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
### Importing individual icons
|
|
42
|
+
### Dynamic import
|
|
51
43
|
|
|
52
|
-
|
|
44
|
+
If you want to load icons on demand, you can use the dynamic import. (Icon chunk will be loaded when the icon is used)
|
|
53
45
|
|
|
54
46
|
```jsx
|
|
55
|
-
import
|
|
47
|
+
import Icon from '@ncds/ui-admin-icon/dynamic';
|
|
56
48
|
|
|
57
49
|
function MyComponent() {
|
|
58
50
|
return (
|
|
59
51
|
<div>
|
|
60
|
-
<
|
|
61
|
-
<
|
|
52
|
+
<Icon name="plus" />
|
|
53
|
+
<Icon name="heart" width={24} height={24} color="red" />
|
|
62
54
|
</div>
|
|
63
55
|
);
|
|
64
56
|
}
|
|
65
57
|
```
|
|
66
58
|
|
|
59
|
+
The type of `name` is defined in the package, so you can use it for type checking:
|
|
60
|
+
|
|
61
|
+
```ts
|
|
62
|
+
import type { IconName } from '@ncds/ui-admin-icon/dynamic';
|
|
63
|
+
|
|
64
|
+
const iconName: IconName = 'plus';
|
|
65
|
+
```
|
|
66
|
+
|
|
67
67
|
### Icon styles
|
|
68
68
|
|
|
69
69
|
The package includes both solid (fill) and line style icons. You can use them the same way:
|
|
70
70
|
|
|
71
71
|
```jsx
|
|
72
|
-
// Using dynamic import
|
|
73
|
-
import Icon from '@ncds/ui-admin-icon';
|
|
74
|
-
|
|
75
|
-
<Icon name="activity" /> // Uses the line variant by default
|
|
76
|
-
<Icon name="activity-fill" /> // Uses the solid variant
|
|
77
|
-
|
|
78
72
|
// Using direct import
|
|
79
73
|
import { Activity, ActivityFill } from '@ncds/ui-admin-icon';
|
|
80
74
|
|
|
81
75
|
<Activity /> // Line variant
|
|
82
76
|
<ActivityFill /> // Solid variant
|
|
77
|
+
|
|
78
|
+
// Using dynamic import
|
|
79
|
+
import Icon from '@ncds/ui-admin-icon/dynamic';
|
|
80
|
+
|
|
81
|
+
<Icon name="activity" /> // Uses the line variant by default
|
|
82
|
+
<Icon name="activity-fill" /> // Uses the solid variant
|
|
83
83
|
```
|
|
84
84
|
|
|
85
85
|
## Documentation
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ncds/ui-admin-icon",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"keywords": [
|
|
5
5
|
"icons",
|
|
6
6
|
"react",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"build:esm": "tsc --outDir dist/esm --module ESNext",
|
|
37
37
|
"build:cjs": "tsc --outDir dist/cjs --module CommonJS",
|
|
38
38
|
"build:npm": "yarn copy-icons && yarn transpile-icons && yarn generate-type && yarn generate-docs && yarn generate-map && rm -rf ./dist && yarn build:esm && yarn build:cjs",
|
|
39
|
-
"publish:npm": "rm -rf ./assets/integrated && npm publish --access=public"
|
|
39
|
+
"publish:npm": "yarn build:npm && rm -rf ./assets/integrated && npm publish --access=public"
|
|
40
40
|
},
|
|
41
41
|
"author": "",
|
|
42
42
|
"license": "ISC",
|