@krizaka/icons 0.5.0 → 0.5.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 +2 -2
- package/dist/glyphs.d.ts +1 -1
- package/dist/glyphs.js.map +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -32,7 +32,7 @@ const { theme } = useTheme();
|
|
|
32
32
|
| :-- | :-- |
|
|
33
33
|
| `@krizaka/icons` | `<Name>Icon` (React, `forwardRef` to the `<svg>`), `createIcon`, `IconProps`, `Glyph`. |
|
|
34
34
|
| `@krizaka/icons/native` | `<Name>Icon` (react-native-svg), `createNativeIcon`, `NativeIconProps`. |
|
|
35
|
-
| `@krizaka/icons/glyphs` | The raw glyphs (`chat`, `tip`…) and `glyphIndex` (component, group, keywords): catalogues, search, canvas. `iconGroups` and `iconGuidelines`: the words of [krizaka.com/
|
|
35
|
+
| `@krizaka/icons/glyphs` | The raw glyphs (`chat`, `tip`…) and `glyphIndex` (component, group, keywords): catalogues, search, canvas. `iconGroups` and `iconGuidelines`: the words of [ui.krizaka.com/foundations/icons](https://ui.krizaka.com/foundations/icons). |
|
|
36
36
|
|
|
37
37
|
**Props** (web): `size` (24), `strokeWidth` (1.75), `title`, `nodeColor` (`currentColor`), and every SVG attribute
|
|
38
38
|
(`className`, `style`, `aria-*`…). Native: `size`, `color`, `strokeWidth`, `title`, `nodeColor`.
|
|
@@ -59,7 +59,7 @@ The drawing is code: `scripts/glyphs.mjs` (helpers `cut`, `hex`, `arc`) → `pnp
|
|
|
59
59
|
| system (15) | `ThemeIcon` · `SunIcon` · `MoonIcon` · `SearchIcon` · `SettingsIcon` · `NotificationIcon` · `UserIcon` · `UsersIcon` · `CalendarIcon` · `ClockIcon` · `GlobeIcon` · `EyeIcon` · `EyeOffIcon` · `InfoIcon` · `WarningIcon` |
|
|
60
60
|
| interface (24) | `PlayIcon` · `PauseIcon` · `HomeIcon` · `MenuIcon` · `CloseIcon` · `BackIcon` · `ForwardIcon` · `ChevronDownIcon` · `ChevronRightIcon` · `PlusIcon` · `CheckIcon` · `MoreIcon` · `ExternalIcon` · `LinkIcon` · `FilterIcon` · `EditIcon` · `TrashIcon` · `CopyIcon` · `DownloadIcon` · `LogoutIcon` · `BookmarkIcon` · `SoundIcon` · `MuteIcon` · `FlagIcon` |
|
|
61
61
|
|
|
62
|
-
Catalogue with search, copy and the rules of use: [krizaka.com/
|
|
62
|
+
Catalogue with search, copy and the rules of use: [ui.krizaka.com/foundations/icons](https://ui.krizaka.com/foundations/icons).
|
|
63
63
|
A missing icon: an issue "icons: <name>" on krizaka/krizaka-ui (concept, where it is used, the closest icon).
|
|
64
64
|
|
|
65
65
|
## Size
|
package/dist/glyphs.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { G as Glyph } from './glyph-DQ_QCZSm.js';
|
|
|
2
2
|
export { N as NODE_RADIUS, S as STROKE_WIDTH } from './glyph-DQ_QCZSm.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
|
-
* The documentation of the set, as data (krizaka.com/
|
|
5
|
+
* The documentation of the set, as data (ui.krizaka.com/foundations/icons renders it with `glyphIndex`): the groups, the
|
|
6
6
|
* sizes, the node, accessibility, and how to ask for a new icon. Written here, beside the drawings — never on the site.
|
|
7
7
|
*/
|
|
8
8
|
/** A group of the set, in reading order. */
|
package/dist/glyphs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/docs.ts"],"sourcesContent":["/**\n * The documentation of the set, as data (krizaka.com/
|
|
1
|
+
{"version":3,"sources":["../src/docs.ts"],"sourcesContent":["/**\n * The documentation of the set, as data (ui.krizaka.com/foundations/icons renders it with `glyphIndex`): the groups, the\n * sizes, the node, accessibility, and how to ask for a new icon. Written here, beside the drawings — never on the site.\n */\n\n/** A group of the set, in reading order. */\nexport interface IconGroup {\n readonly id: \"product\" | \"system\" | \"interface\";\n readonly title: string;\n readonly description: string;\n}\n\nexport const iconGroups: readonly IconGroup[] = /* @__PURE__ */ Object.freeze([\n {\n id: \"product\",\n title: \"Product\",\n description:\n \"The vocabulary of the products — creators and audiences (Orochia), sovereign AI (Orazaka), meeting people (small batches, debriefs, introductions), listening (a moment, the thread, what you keep), money and trust. Every product icon carries a node, the core of the Krizaka marks, at its meaningful point.\",\n },\n {\n id: \"system\",\n title: \"System\",\n description: \"The states and settings every app shares: theme, search, notifications, people, time, visibility, information.\",\n },\n {\n id: \"interface\",\n title: \"Interface\",\n description: \"Navigation and actions. Utility glyphs (arrows, chevrons, close, plus, check, menu) stay bare — no node — so the nodes keep their meaning.\",\n },\n]);\n\n/** The rules of use, by topic. */\nexport const iconGuidelines = /* @__PURE__ */ Object.freeze({\n grammar: [\n \"A 24-unit grid, live area 2–22, one stroke (1.75) with round caps and joins.\",\n \"Containers have cut corners — 45° chamfers, the angle of the Krizaka hexagon — where other sets round them.\",\n \"A node (a filled dot, r 1.6) on every product icon, none on utility glyphs. No currency sign, no logo inside an icon.\",\n ],\n sizes: [\n { size: 16, use: \"Dense tables, inline with 12–14 px text. Keep the default stroke: the icon thins with it.\" },\n { size: 20, use: \"Buttons, fields, menus — the interface default next to 14–16 px text.\" },\n { size: 24, use: \"The drawing size: navigation, tab bars, empty states.\" },\n { size: 32, use: \"Feature lists and cards. From 32 px, a 1.5 stroke keeps the weight of the text.\" },\n ],\n color: [\n \"An icon takes the colour of its text (`currentColor`): set the text role on the parent (`text-fg-secondary`), never a colour on the icon.\",\n \"`nodeColor=\\\"var(--kz-accent)\\\"` lights the node with the brand accent — once per view, on what matters (the active tab, the primary feature).\",\n \"React Native has no currentColor: pass `color` and `nodeColor` from the theme (`theme.textPrimary`, `theme.accent`).\",\n ],\n accessibility: [\n \"Decorative by default: `aria-hidden` and not focusable — the words next to the icon carry the meaning.\",\n \"Alone (an icon button, a status), give it a `title`: it becomes an image (`role=\\\"img\\\"`, `aria-label`, `<title>`). On a button, prefer the button's own `aria-label` and keep the icon decorative.\",\n \"Never meaning by the node colour alone: a state needs a word or a shape too.\",\n ],\n request: [\n \"Search the set first, by meaning: keywords cover synonyms (`gift` finds Tip, `escrow` finds Auction).\",\n \"Open an issue on krizaka/krizaka-ui with the title \\\"icons: <name>\\\": the concept, where it is used (product, screen), and the closest existing icon.\",\n \"The drawing is code (`scripts/glyphs.mjs`, helpers `cut`, `hex`, `arc`): a pull request that adds the glyph, its group and keywords is welcome — the grammar test checks it.\",\n \"A new icon is a minor release of @krizaka/icons; a redrawn icon too. Removing or renaming one is a major.\",\n ],\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,IAAM,aAAmD,uBAAO,OAAO;AAAA,EAC5E;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aACE;AAAA,EACJ;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AACF,CAAC;AAGM,IAAM,iBAAiC,uBAAO,OAAO;AAAA,EAC1D,SAAS;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,EAAE,MAAM,IAAI,KAAK,iGAA4F;AAAA,IAC7G,EAAE,MAAM,IAAI,KAAK,kFAAwE;AAAA,IACzF,EAAE,MAAM,IAAI,KAAK,wDAAwD;AAAA,IACzE,EAAE,MAAM,IAAI,KAAK,kFAAkF;AAAA,EACrG;AAAA,EACA,OAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF,CAAC;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@krizaka/icons",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.1",
|
|
4
4
|
"description": "The Krizaka signature icons: one drawing language (24 grid, cut corners, a node at the core) for every Krizaka product — React (tree-shakable, server-safe) and React Native (react-native-svg).",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"krizaka",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"design-system",
|
|
13
13
|
"tree-shakable"
|
|
14
14
|
],
|
|
15
|
-
"homepage": "https://
|
|
15
|
+
"homepage": "https://ui.krizaka.com/foundations/icons",
|
|
16
16
|
"bugs": "https://github.com/krizaka/krizaka-ui/issues",
|
|
17
17
|
"repository": {
|
|
18
18
|
"type": "git",
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
"tsup": "^8.5.1",
|
|
73
73
|
"typescript": "^5.9.0",
|
|
74
74
|
"vitest": "^4.1.11",
|
|
75
|
-
"@krizaka/config": "0.
|
|
75
|
+
"@krizaka/config": "0.4.1"
|
|
76
76
|
},
|
|
77
77
|
"engines": {
|
|
78
78
|
"node": ">=22"
|