@featherk/icons 0.7.0 → 0.7.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/README.md +29 -20
- package/docs/ICONS.md +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,15 +4,13 @@ Small package providing a set of SVG icons consumable by Kendo UI's `SvgIcon` co
|
|
|
4
4
|
|
|
5
5
|
Usage
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Resolve an icon once, then pass the returned object to Kendo's `SvgIcon`:
|
|
8
8
|
|
|
9
9
|
```ts
|
|
10
10
|
import { getCustomIcon } from "@featherk/icons";
|
|
11
11
|
|
|
12
|
-
const iconName: CustomIcon = "search"
|
|
13
|
-
|
|
14
12
|
const icon = getCustomIcon("search");
|
|
15
|
-
//
|
|
13
|
+
// pass `icon` to Kendo's `SvgIcon` component
|
|
16
14
|
```
|
|
17
15
|
|
|
18
16
|
## Types
|
|
@@ -21,32 +19,43 @@ const icon = getCustomIcon("search");
|
|
|
21
19
|
- `GetCustomIconOptions`: `{ viewBox?: string; color?: string }` —
|
|
22
20
|
`viewBox` overrides the SVG viewBox; `color` replaces `currentColor` fills/strokes.
|
|
23
21
|
|
|
22
|
+
Example — type an icon name:
|
|
23
|
+
|
|
24
|
+
```ts
|
|
25
|
+
import type { CustomIcon } from "@featherk/icons";
|
|
26
|
+
|
|
27
|
+
const iconName: CustomIcon = "search";
|
|
28
|
+
// const badIcon: CustomIcon = "not-a-real-icon"; // Type error
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Example — use the typed name with the helper:
|
|
32
|
+
|
|
33
|
+
```ts
|
|
34
|
+
import { getCustomIcon, type CustomIcon } from "@featherk/icons";
|
|
35
|
+
|
|
36
|
+
const iconName: CustomIcon = "help";
|
|
37
|
+
const icon = getCustomIcon(iconName);
|
|
38
|
+
```
|
|
39
|
+
|
|
24
40
|
Example — change viewBox and color:
|
|
25
41
|
|
|
26
42
|
```html
|
|
27
43
|
<template>
|
|
28
|
-
<SvgIcon :icon="
|
|
29
|
-
<SvgIcon
|
|
30
|
-
:icon="
|
|
31
|
-
getCustomIcon(icon2, { color: 'var(--kendo-color-success)' })
|
|
32
|
-
"
|
|
33
|
-
/>
|
|
44
|
+
<SvgIcon :icon="helpIcon" />
|
|
45
|
+
<SvgIcon :icon="successIcon" />
|
|
34
46
|
</template>
|
|
35
47
|
<script setup lang="ts">
|
|
36
48
|
import { SvgIcon } from "@progress/kendo-vue-common";
|
|
37
|
-
import {
|
|
38
|
-
getCustomIcon,
|
|
39
|
-
type CustomIcon,
|
|
40
|
-
type GetCustomIconOptions,
|
|
41
|
-
} from "@featherk/icons";
|
|
42
|
-
|
|
43
|
-
const helpIcon = "help" as CustomIcon;
|
|
44
|
-
const icon2 = "check" as CustomIcon;
|
|
49
|
+
import { getCustomIcon } from "@featherk/icons";
|
|
45
50
|
|
|
46
|
-
const
|
|
51
|
+
const helpIcon = getCustomIcon("help", {
|
|
47
52
|
viewBox: "0 0 28 28",
|
|
48
53
|
color: "var(--kendo-color-primary)",
|
|
49
|
-
};
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
const successIcon = getCustomIcon("check", {
|
|
57
|
+
color: "var(--kendo-color-success)",
|
|
58
|
+
});
|
|
50
59
|
</script>
|
|
51
60
|
```
|
|
52
61
|
|
package/docs/ICONS.md
CHANGED