@driftime/sanity-plugin-icon 0.1.0 → 0.2.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/README.md +77 -5
- package/dist/index.d.ts +56 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +382 -255
- package/dist/index.js.map +1 -1
- package/dist/render.d.ts +1 -1
- package/dist/{types-nQUVfUHK.d.ts → types-_D2jGm25.d.ts} +2 -2
- package/dist/types-_D2jGm25.d.ts.map +1 -0
- package/package.json +1 -1
- package/dist/types-nQUVfUHK.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
|
|
14
14
|
## Overview
|
|
15
15
|
|
|
16
|
-
Icon adds a field type to Sanity Studio that opens the
|
|
16
|
+
Icon adds a field type to Sanity Studio that opens the Lucide library as a searchable grid, either in full or limited to a set you choose. Authors find an icon by its name or by what it depicts, and the drawing itself is stored on the document alongside the name it was chosen by.
|
|
17
17
|
|
|
18
18
|
Rendering costs one component and **under 2 kB gzipped**, with no icon library in your application. That works because the document holds the drawing rather than a reference to it, so nothing needs resolving by name at runtime.
|
|
19
19
|
|
|
@@ -42,7 +42,7 @@ bun add -E @driftime/sanity-plugin-icon
|
|
|
42
42
|
|
|
43
43
|
## Basic Setup
|
|
44
44
|
|
|
45
|
-
Add the plugin to your Sanity configuration.
|
|
45
|
+
Add the plugin to your Sanity configuration.
|
|
46
46
|
|
|
47
47
|
```typescript
|
|
48
48
|
import { defineConfig } from "sanity";
|
|
@@ -67,12 +67,50 @@ defineField({
|
|
|
67
67
|
|
|
68
68
|
The type is registered as `icon` and the name is not configurable, so a Studio that already defines its own `icon` type will need to rename that one.
|
|
69
69
|
|
|
70
|
+
See [Configuration](#configuration) for the options the plugin takes.
|
|
71
|
+
|
|
72
|
+
<br />
|
|
73
|
+
|
|
74
|
+
## Restricting the Icon Set
|
|
75
|
+
|
|
76
|
+
By default the picker offers every icon in the library. Pass `icons` to limit it, and every field takes the set you name.
|
|
77
|
+
|
|
78
|
+
```typescript
|
|
79
|
+
export default defineConfig({
|
|
80
|
+
// ...
|
|
81
|
+
plugins: [iconPlugin({ icons: ["mail", "phone", "globe"] })],
|
|
82
|
+
});
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
The plugin augments Sanity's `IntrinsicDefinitions` interface, adding an `icons` option that TypeScript recognises automatically. A field can name its own set, which replaces the one the plugin was given rather than narrowing it.
|
|
86
|
+
|
|
87
|
+
```typescript
|
|
88
|
+
defineField({
|
|
89
|
+
name: "icon",
|
|
90
|
+
type: "icon",
|
|
91
|
+
description: "Shown on the feature card.",
|
|
92
|
+
options: { icons: ["leaf", "shield", "zap"] },
|
|
93
|
+
});
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
Names are typed against the Lucide version your project resolved, so they autocomplete as you write them. Icons appear in the order you list them, and a name that version does not recognise is skipped.
|
|
97
|
+
|
|
98
|
+
Use `SanityIconName` to type a set you want to share between fields.
|
|
99
|
+
|
|
100
|
+
```typescript
|
|
101
|
+
import type { SanityIconName } from "@driftime/sanity-plugin-icon";
|
|
102
|
+
|
|
103
|
+
export const clientIcons: SanityIconName[] = ["mail", "phone", "globe"];
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
Restricting a set does not affect what has already been stored. The document holds the drawing, so an icon saved earlier still renders even though the picker no longer offers it.
|
|
107
|
+
|
|
70
108
|
<br />
|
|
71
109
|
|
|
72
110
|
## Picking an Icon
|
|
73
111
|
|
|
74
112
|
- Search matches an icon's name and the terms it is tagged with, so "next" finds `arrow-right`.
|
|
75
|
-
- The complete Lucide set is offered, and the count reflects whatever
|
|
113
|
+
- The complete Lucide set is offered unless you restrict it, and the count reflects whatever is available.
|
|
76
114
|
- The last eight icons chosen are remembered, per browser rather than per dataset.
|
|
77
115
|
|
|
78
116
|
<br />
|
|
@@ -171,12 +209,46 @@ bun add -E @driftime/sanity-plugin-icon
|
|
|
171
209
|
|
|
172
210
|
## API
|
|
173
211
|
|
|
212
|
+
What the package exports at runtime, and which import path each one comes from.
|
|
213
|
+
|
|
174
214
|
| Export | Import from | Purpose |
|
|
175
215
|
| -------------------------- | ------------------------------------- | ------------------------------------------ |
|
|
176
|
-
| `iconPlugin()`
|
|
216
|
+
| `iconPlugin(config?)` | `@driftime/sanity-plugin-icon` | Registers the `icon` type with the Studio. |
|
|
177
217
|
| `createIconPreview(value)` | `@driftime/sanity-plugin-icon` | Builds preview media from a stored icon. |
|
|
178
218
|
| `Icon` | `@driftime/sanity-plugin-icon/render` | Draws a stored icon. |
|
|
179
|
-
|
|
219
|
+
|
|
220
|
+
<br />
|
|
221
|
+
|
|
222
|
+
## Configuration
|
|
223
|
+
|
|
224
|
+
Nothing is required. Without `icons`, the picker offers every icon in the library.
|
|
225
|
+
|
|
226
|
+
| Option | Type | Default | Purpose |
|
|
227
|
+
| ------- | ------------------ | ----------- | --------------------------------------------------------------------------------------- |
|
|
228
|
+
| `icons` | `SanityIconName[]` | `undefined` | Icons an author may choose from, in the order they are listed. Every icon when omitted. |
|
|
229
|
+
|
|
230
|
+
A field accepts the same option under `options`, where it replaces the set the plugin was given.
|
|
231
|
+
|
|
232
|
+
<br />
|
|
233
|
+
|
|
234
|
+
## Exported Types
|
|
235
|
+
|
|
236
|
+
These types are exported for typing your own configuration and for querying stored icons outside the Studio.
|
|
237
|
+
|
|
238
|
+
Configuration you supply:
|
|
239
|
+
|
|
240
|
+
| Type | Purpose |
|
|
241
|
+
| ---------------------- | ------------------------------------------------------- |
|
|
242
|
+
| `SanityIconName` | The name of an icon in the installed Lucide version. |
|
|
243
|
+
| `SanityIconOptions` | The `options` an icon field accepts. |
|
|
244
|
+
| `SanityIconDefinition` | The shape of a field or array member of type `icon`. |
|
|
245
|
+
| `SanityIconConfig` | The full plugin configuration accepted by `iconPlugin`. |
|
|
246
|
+
|
|
247
|
+
Content the dataset stores:
|
|
248
|
+
|
|
249
|
+
| Type | Purpose |
|
|
250
|
+
| ------------ | ------------------------------------------------------------------------------------------------------------ |
|
|
251
|
+
| `SanityIcon` | A stored icon, holding the name it was chosen by and the shapes it draws. Available from either import path. |
|
|
180
252
|
|
|
181
253
|
<br />
|
|
182
254
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,64 @@
|
|
|
1
|
-
import { t as SanityIcon } from "./types-
|
|
1
|
+
import { n as iconTypeName, t as SanityIcon } from "./types-_D2jGm25.js";
|
|
2
|
+
import { ObjectOptions, TypeAliasDefinition } from "sanity";
|
|
3
|
+
import { ComponentProps } from "react";
|
|
4
|
+
import iconNodes from "lucide-static/icon-nodes.json";
|
|
5
|
+
declare module "@sanity/types" {
|
|
6
|
+
interface IntrinsicDefinitions {
|
|
7
|
+
icon: SanityIconDefinition;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Names of every icon the library offers, read from the Lucide release a project resolved rather than
|
|
12
|
+
* from a list this plugin ships, so an icon added since the last plugin release still completes.
|
|
13
|
+
*
|
|
14
|
+
* @public
|
|
15
|
+
*/
|
|
16
|
+
type SanityIconName = keyof typeof iconNodes;
|
|
17
|
+
/**
|
|
18
|
+
* Options an icon field takes, narrowing what its picker offers.
|
|
19
|
+
*
|
|
20
|
+
* @public
|
|
21
|
+
*/
|
|
22
|
+
interface SanityIconOptions extends ObjectOptions {
|
|
23
|
+
/** Icons an author may choose from, offered in the order they are named. Every icon when omitted. */
|
|
24
|
+
icons?: SanityIconName[];
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Shape of a field or array member holding an icon, so its options are completed and checked the way
|
|
28
|
+
* a built-in type's are.
|
|
29
|
+
*
|
|
30
|
+
* @public
|
|
31
|
+
*/
|
|
32
|
+
interface SanityIconDefinition extends Omit<TypeAliasDefinition<typeof iconTypeName, undefined>, "options"> {
|
|
33
|
+
options?: SanityIconOptions;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Everything the plugin accepts, all of which may be left out.
|
|
37
|
+
*
|
|
38
|
+
* @public
|
|
39
|
+
*/
|
|
40
|
+
interface SanityIconConfig {
|
|
41
|
+
/** Icons an author may choose from, offered in the order they are named. Every icon when omitted. */
|
|
42
|
+
icons?: SanityIconName[];
|
|
43
|
+
}
|
|
2
44
|
/**
|
|
3
45
|
* Creates the icon field type for Sanity Studio, offering the Lucide library through a searchable
|
|
4
46
|
* picker and storing the chosen drawing ready to render.
|
|
5
47
|
*
|
|
48
|
+
* @param config - Plugin configuration.
|
|
6
49
|
* @returns Sanity plugin definition.
|
|
7
50
|
* @public
|
|
8
51
|
*/
|
|
9
|
-
declare
|
|
52
|
+
declare function iconPlugin(config?: SanityIconConfig): import("sanity").PluginOptions;
|
|
53
|
+
/** Elements an icon's drawing may be built from, narrowed to those that describe a shape. */
|
|
54
|
+
declare const iconElements: readonly ["circle", "ellipse", "g", "line", "path", "polygon", "polyline", "rect"];
|
|
55
|
+
/** Single shape in an icon's drawing, paired with the attributes it is drawn with. */
|
|
56
|
+
type IconElement = [element: (typeof iconElements)[number], attributes: Record<string, string>];
|
|
57
|
+
/** An icon's drawing, held as the shapes it is built from rather than as a component. */
|
|
58
|
+
type IconNode = IconElement[];
|
|
59
|
+
type DrawingProps = Omit<ComponentProps<"svg">, "children"> & {
|
|
60
|
+
node: IconNode | undefined;
|
|
61
|
+
};
|
|
10
62
|
/**
|
|
11
63
|
* Builds the media a stored icon previews with, so a document lists the drawing an author chose
|
|
12
64
|
* rather than one placeholder standing in for every icon alike.
|
|
@@ -15,6 +67,6 @@ declare const iconPlugin: import("sanity").Plugin<void>;
|
|
|
15
67
|
* @returns The media component, or undefined when nothing readable was stored.
|
|
16
68
|
* @public
|
|
17
69
|
*/
|
|
18
|
-
declare function createIconPreview(value: SanityIcon | undefined): (() => import("react").
|
|
19
|
-
export { type SanityIcon, createIconPreview, iconPlugin };
|
|
70
|
+
declare function createIconPreview(value: SanityIcon | undefined): (() => import("react").FunctionComponentElement<DrawingProps>) | undefined;
|
|
71
|
+
export { type SanityIcon, type SanityIconConfig, type SanityIconDefinition, type SanityIconName, type SanityIconOptions, createIconPreview, iconPlugin };
|
|
20
72
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/plugin.ts","../src/components/
|
|
1
|
+
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/plugin.ts","../src/lib/nodes.ts","../src/components/drawing.tsx","../src/lib/preview.ts"],"mappings":";;;;;YAQY;IACR,MAAM;;;;;;;;;KAUE,8BAA8B;;;;;;UAOzB,0BAA0B;;EAEzC,QAAQ;;;;;;;;UASO,6BAA6B,KAAK,2BAA2B;EAC5E,UAAU;;;;;;;UAQK;;EAEf,QAAQ;;;;;;;;;;iBAuBM,WAAW,SAAQ,oCAAqB;;cClElD;;KAGD,eAAe,iBAAiB,uBAAuB,YAAY;;KAG5D,WAAW;KCDX,eAAe,KAAK;EAAuC,MAAM;;;;;;;;;;iBCM7D,kBAAkB,OAAO,gDAAsB,yBAAtB"}
|