{"_id":"@dendelion/icons","name":"@dendelion/icons","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@dendelion/icons","version":"1.0.0","description":"Hand-drawn line icons as React components — shared across the Dendelion UI libraries","type":"module","sideEffects":false,"packageManager":"pnpm@10.12.1","main":"dist/index.cjs","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"}},"scripts":{"generate":"node scripts/generate.mjs && biome format ./src/icons --write","build":"pnpm run generate && vite build","check-types":"tsc --noEmit","lint":"biome check ./src ./scripts","lint:fix":"biome check ./src ./scripts --write","check-package":"publint","ci":"pnpm run check-types && pnpm run lint && pnpm run build && pnpm run check-package"},"repository":{"type":"git","url":"git+https://github.com/adooone/icons.git"},"keywords":["react","icons","svg","hand-drawn","design-system"],"author":{"name":"Dendelion"},"license":"MIT","peerDependencies":{"react":"^18.0.0"},"devDependencies":{"@biomejs/biome":"^1.9.4","@types/react":"^18.3.12","@vitejs/plugin-react-swc":"^3.7.1","publint":"^0.3.21","react":"^18.3.1","typescript":"^5.6.3","vite":"^5.4.9","vite-plugin-dts":"^4.5.4"},"pnpm":{"onlyBuiltDependencies":["@biomejs/biome","@swc/core","esbuild"]},"_id":"@dendelion/icons@1.0.0","gitHead":"b881be2b909e3d97772f8da40e1526e4b1c97d6b","bugs":{"url":"https://github.com/adooone/icons/issues"},"homepage":"https://github.com/adooone/icons#readme","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-qARYZYtol5wOEnXwV9zFpauWK1YmSyIAP0eBLbNx/f5GdaeZ3AamQamoqChLnHDJD0OAvBlw0COCXBB4MklyQA==","shasum":"1758eef58e3b941c8e12da1bca79b8160fc8da3f","tarball":"https://registry.npmjs.org/@dendelion/icons/-/icons-1.0.0.tgz","fileCount":46,"unpackedSize":128431,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCl+KL92QBfAqLll8+P/7RSjbCXW/93JTrCOvYuDtr/2wIgbXfR0r6IA18zs8dQv6TBuVJAqmoYZqf2VkC8dyzPCFI="}]},"_npmUser":{"name":"croco-dendy","email":"croooco.dendy@gmail.com"},"directories":{},"maintainers":[{"name":"croco-dendy","email":"croooco.dendy@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/icons_1.0.0_1785931931884_0.012536034512108607"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-05T12:12:11.750Z","1.0.0":"2026-08-05T12:12:12.031Z","modified":"2026-08-05T12:12:12.310Z"},"maintainers":[{"name":"croco-dendy","email":"croooco.dendy@gmail.com"}],"description":"Hand-drawn line icons as React components — shared across the Dendelion UI libraries","homepage":"https://github.com/adooone/icons#readme","keywords":["react","icons","svg","hand-drawn","design-system"],"repository":{"type":"git","url":"git+https://github.com/adooone/icons.git"},"author":{"name":"Dendelion"},"bugs":{"url":"https://github.com/adooone/icons/issues"},"license":"MIT","readme":"# @dendelion/icons\n\nHand-drawn line icons as React components, shared by\n[`@dendelion/func-ui`](https://github.com/adooone/func-ui),\n[`@dendelion/paper-ui`](https://github.com/adooone/paper-ui) and\n[`@dendelion/mojo-ui`](https://github.com/adooone/mojo-ui).\n\nThe package sits beside the UI libraries rather than inside one of them, so no\nlibrary has to depend on another to get an icon. It has no runtime\ndependencies, ships no CSS, and carries no `'use client'` directive — the icons\nare static SVG and render fine from React Server Components.\n\n## Install\n\n```bash\npnpm add @dendelion/icons\n```\n\n## Usage\n\n```tsx\nimport { SearchIcon, TrashIcon } from '@dendelion/icons';\n\n<SearchIcon />\n<SearchIcon size={16} />\n<TrashIcon className=\"text-red-500\" />\n```\n\nIcons inherit their colour from `currentColor` and their stroke geometry is\ndrawn on a 24×24 grid, so they line up with text at any size.\n\n### Accessibility\n\nIcons are `aria-hidden` by default, which is correct when they sit next to a\nvisible label or inside an already-labelled control:\n\n```tsx\n<button>\n  <TrashIcon /> Delete\n</button>\n```\n\nPass `title` when the icon is the only content, and it will be exposed as an\nimage with that accessible name:\n\n```tsx\n<TrashIcon title=\"Delete item\" />\n```\n\nNote that the UI libraries' own wrappers already handle labelling — `IconButton`\nin func-ui takes a required `label` prop — so inside those you want the default\nhidden icon, not a `title`.\n\n### With the UI libraries\n\nEvery library accepts an icon as a `ReactNode`, so these drop straight in:\n\n```tsx\nimport { IconButton } from '@dendelion/func-ui';\nimport { Icon } from '@dendelion/paper-ui';\nimport { TrashIcon, SearchIcon } from '@dendelion/icons';\n\n<IconButton icon={<TrashIcon />} label=\"Delete\" />\n<Icon icon={<SearchIcon />} size=\"large\" />\n```\n\n## Icons\n\n`ArrowDown` `ArrowLeft` `ArrowRight` `ArrowUp` `Check` `CheckCircle` `Close`\n`CloseCircle` `Copy` `Download` `Filter` `Link` `Menu` `Search` `Share` `Trash`\n`Upload` — each exported with an `Icon` suffix, e.g. `ArrowDownIcon`.\n\n## Adding icons\n\nDrop a raw SVG into `svg/` and run:\n\n```bash\npnpm run generate\n```\n\n`scripts/generate.mjs` rewrites `src/icons/` from whatever is in `svg/`, so the\ncomponents are generated output and should not be hand-edited. The script\nre-centres each source SVG on a 24×24 grid, swaps hard-coded stroke colours for\n`currentColor`, and hoists shared stroke attributes onto the root element.\n\nSource artwork provenance and licensing are tracked in [NOTICE.md](./NOTICE.md).\n","readmeFilename":"README.md","_rev":"1-c0b1a5831eb77e5755df17b60d4507a4"}