@web-portfolio/icons-sanity 0.1.0 → 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.
Files changed (8) hide show
  1. package/README.md +91 -37
  2. package/dist/index.cjs +1623 -670
  3. package/dist/index.d.cts +24 -3
  4. package/dist/index.d.ts +24 -3
  5. package/dist/index.js +1637 -672
  6. package/package.json +5 -3
  7. package/dist/index.cjs.map +0 -1
  8. package/dist/index.js.map +0 -1
package/README.md CHANGED
@@ -1,35 +1,50 @@
1
1
  # @web-portfolio/icons-sanity
2
2
 
3
- A [Sanity Studio](https://www.sanity.io) plugin that adds an **icon picker
4
- field** backed by a bundled library of **622 SVG icons** — so content editors
5
- can pick an icon by searching a name, tag, or category instead of pasting raw
6
- SVG markup into every field. Built for portfolio sites, agency/marketing
7
- sites, and any Sanity project where editors need to attach icons to skills,
8
- tech stacks, services, or social/contact links — without needing design or
9
- dev help for every change.
3
+ A [Sanity Studio](https://www.sanity.io) plugin that adds a proper icon
4
+ picker field to your schema, backed by the same **633-icon** library as
5
+ [`@web-portfolio/icons`](https://www.npmjs.com/package/@web-portfolio/icons).
6
+ It exists because "paste an SVG into a text field" is a bad experience for
7
+ content editors — they either need to know what valid SVG markup looks
8
+ like, or they need you to do it for them every time a new skill or social
9
+ link gets added. This plugin turns that into: click the field, search,
10
+ pick an icon, done.
11
+
12
+ **[Browse the icon set →](https://icons.getresume.dev)** before you install,
13
+ to see exactly what your editors will be choosing from.
10
14
 
11
15
  [![npm version](https://img.shields.io/npm/v/@web-portfolio/icons-sanity.svg)](https://www.npmjs.com/package/@web-portfolio/icons-sanity)
12
16
  [![license](https://img.shields.io/npm/l/@web-portfolio/icons-sanity.svg)](https://github.com/jatinrao/icons/blob/main/LICENSE)
13
17
 
18
+ [![Browse icons at icons.getresume.dev](https://raw.githubusercontent.com/jatinrao/icons/main/.github/assets/gallery-grid.png)](https://icons.getresume.dev)
19
+
14
20
  ## Why this plugin
15
21
 
16
- If you're a **developer** shipping a portfolio or personal-site CMS setup,
17
- you've probably built a "paste an SVG" field before — it works, but it means
18
- every content edit needs someone who knows what valid SVG markup looks like.
19
- This plugin replaces that with a proper picker:
20
-
21
- - **622 icons out of the box** — tech/tool logos, social platform icons, and
22
- common communication/navigation icons (see [Icon set](#whats-in-the-icon-set)).
23
- Editors search by name, tag, or category; no SVG knowledge required.
24
- - **No API calls from Studio** — the entire icon registry is bundled into the
25
- plugin at build time, so the picker works offline and loads instantly.
26
- Nothing is fetched from a database or CDN while editing.
27
- - **Stores just a name** — the field value is a plain string (`"react"`,
28
- `"github"`, ...), which pairs directly with
29
- [`@web-portfolio/icons`](https://www.npmjs.com/package/@web-portfolio/icons)'s
30
- `<Icon name="..." />` on your frontend — no ID lookups, no asset references.
31
- - **Live preview** — the currently selected icon renders inline in the form,
32
- not just its name.
22
+ If you've built a portfolio, agency site, or any Sanity project with a
23
+ "skills" or "tech stack" or "connect with us" section, you've probably
24
+ built some version of an icon field before. This plugin is meant to save
25
+ you from doing that again:
26
+
27
+ - **633 icons, ready to search.** Tech-stack logos, social platform icons,
28
+ and everyday UI icons — editors search by name, label, or tag, and can
29
+ narrow to a category, no SVG knowledge required.
30
+ - **Results ranked, not just filtered.** Typing `go` leads with `go`, not
31
+ `godot` — exact matches first, then name prefixes, then everything that
32
+ merely mentions the term.
33
+ - **Nothing fetched while editing.** The whole registry is bundled into the
34
+ plugin at build time, so the picker opens instantly and works even if
35
+ Studio is running offline.
36
+ - **Stores a name, not a blob.** The field value is a plain string
37
+ (`"react"`, `"github"`) rather than raw markup or an asset reference,
38
+ which pairs directly with `@web-portfolio/icons`'s `<Icon name="..." />`
39
+ on your frontend — no lookups, no asset resolution, just the name.
40
+ - **Shows what's selected.** The current icon renders inline in the form
41
+ alongside its label, category, and the exact string that got stored — so
42
+ editors can confirm at a glance they picked the right one.
43
+ - **Built entirely from Sanity UI.** `Card`, `Dialog`, `Badge`, `Select`,
44
+ `TextInput`, `Tooltip` and `@sanity/icons`, sized off the Sanity UI space
45
+ scale. It inherits your Studio's theme and light/dark scheme instead of
46
+ fighting it, and respects `readOnly` fields and Studio's focus/presence
47
+ tracking like a built-in input.
33
48
 
34
49
  ## Installation
35
50
 
@@ -42,7 +57,8 @@ pnpm add @web-portfolio/icons-sanity
42
57
  ```
43
58
 
44
59
  Peer dependencies (already present in any standard Sanity Studio v3 project):
45
- `sanity >=3`, `@sanity/ui >=2`, `react >=18`, `styled-components >=6`.
60
+ `sanity >=3`, `@sanity/ui >=2`, `@sanity/icons >=3`, `react >=18`,
61
+ `styled-components >=6`.
46
62
 
47
63
  ## Setup
48
64
 
@@ -84,9 +100,40 @@ export default defineType({
84
100
  })
85
101
  ```
86
102
 
87
- Editors click the field, search ("react", "docker", "mail"...), and select an
88
- icon from a live-previewed grid. The field stores the icon's name as a plain
89
- string — e.g. `"react"`.
103
+ In Studio, that renders as a field editors click to open a searchable grid.
104
+ They type "react" or "docker" or "mail", pick a result, and the field
105
+ stores that icon's name as a plain string — e.g. `"react"`.
106
+
107
+ ### What editors see
108
+
109
+ - The collapsed field shows the chosen icon, its label, its source category,
110
+ and the raw string stored in the document.
111
+ - Clicking **Select icon** / **Change icon** opens a dialog with a search
112
+ field and a category dropdown (Devicon, Material, Social, Tools, …).
113
+ Results render a page at a time so the dialog opens instantly even though
114
+ the whole 633-icon set is in memory.
115
+ - Hovering a tile reveals its registry name — the exact value that gets
116
+ saved.
117
+ - A `readOnly` field (schema-level, or a role without write access) disables
118
+ both actions and emits no patches.
119
+ - If a document holds a name that is no longer in the bundled set — say the
120
+ icon was renamed upstream — the field says so explicitly instead of
121
+ rendering an empty box, and offers to replace or clear it.
122
+
123
+ ### Building your own input
124
+
125
+ If `iconRef` isn't the shape you want, the pieces are exported so you can
126
+ wire the same picker into a custom schema type or reuse its matching logic:
127
+
128
+ ```ts
129
+ import {
130
+ IconPickerInput, // the input component itself
131
+ formatCategoryLabel, // "original" -> "Devicon"
132
+ matchesQuery, // name/label/tag matching
133
+ rankMatch, // relevance score, lower is better
134
+ type IconEntry, // the shape matchesQuery/rankMatch expect
135
+ } from '@web-portfolio/icons-sanity'
136
+ ```
90
137
 
91
138
  ### Social/contact links example
92
139
 
@@ -110,8 +157,10 @@ defineField({
110
157
 
111
158
  ### Rendering the picked icon on your frontend
112
159
 
113
- Pair with [`@web-portfolio/icons`](https://www.npmjs.com/package/@web-portfolio/icons)
114
- — pass the stored string straight through as `name`:
160
+ This is the part that makes the whole thing worth it — pair with
161
+ [`@web-portfolio/icons`](https://www.npmjs.com/package/@web-portfolio/icons)
162
+ and pass the stored string straight through as `name`, no transformation
163
+ needed:
115
164
 
116
165
  ```tsx
117
166
  import { Icon } from '@web-portfolio/icons'
@@ -128,16 +177,21 @@ function SkillBadge({ skill }: { skill: { name: string; icon: string } }) {
128
177
 
129
178
  ## What's in the icon set
130
179
 
131
- 622 icons from three sources, shared with `@web-portfolio/icons`:
180
+ 633 icons from three sources, shared with `@web-portfolio/icons`:
132
181
 
133
182
  - **[devicon](https://github.com/devicons/devicon)** (578 icons, MIT) —
134
183
  programming languages, frameworks, databases, cloud platforms, dev tools.
135
- - **[Material Symbols](https://github.com/marella/material-symbols)** (32
136
- icons, Apache-2.0) — communication and navigation icons (mail, call,
137
- arrows, menu, close, ...).
138
- - **[Simple Icons](https://simpleicons.org)** (12 icons, CC0-1.0) — social
139
- platform logos devicon doesn't cover (Instagram, YouTube, WhatsApp,
140
- Telegram, TikTok, Discord, ...).
184
+ - **[Material Symbols](https://github.com/marella/material-symbols)** (38
185
+ icons, Apache-2.0) — everyday UI icons: mail, call, arrows, menu, close,
186
+ connected TV, bolt, translate, checklist, gift, and more.
187
+ - **[Simple Icons](https://simpleicons.org)** (17 icons, CC0-1.0) — social
188
+ platforms and dev-tool brands devicon doesn't cover (Instagram, YouTube,
189
+ WhatsApp, MCP, LangChain, Ollama, and more).
190
+
191
+ Not sure exactly what's in there? The
192
+ [gallery](https://icons.getresume.dev) is the fastest way to check — search
193
+ or filter by category to see every icon before you commit to using it in a
194
+ schema.
141
195
 
142
196
  ## License
143
197