{"_id":"@davaux/tabler-icons","name":"@davaux/tabler-icons","dist-tags":{"latest":"0.9.0"},"versions":{"0.9.0":{"name":"@davaux/tabler-icons","version":"0.9.0","description":"Tabler Icons component for Davaux","type":"module","author":{"name":"David L Dyess II"},"license":"MIT","repository":{"type":"git","url":"https://codeberg.org/davaux/davaux"},"bugs":{"url":"https://codeberg.org/davaux/davaux/issues"},"homepage":"https://codeberg.org/davaux/davaux#readme","exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"}},"scripts":{"build":"tsc","typecheck":"tsc --noEmit"},"dependencies":{"@tabler/icons":"^3.44.0"},"peerDependencies":{"davaux":">=0.9.0"},"devDependencies":{"@types/node":"^26.1.1","davaux":"*","typescript":"^7.0.2"},"_id":"@davaux/tabler-icons@0.9.0","gitHead":"cf224ea175e81cba8de14db06b32b5ece7ed69af","_nodeVersion":"24.18.0","_npmVersion":"10.3.0","dist":{"integrity":"sha512-kiVs9OCWEvavldwhNk2AXQ6rYkBYPjGuHCren15YzHRTob4u3A0FYW4WqTqTRIhevRFrAc03Wg0FvjhC7wdfSw==","shasum":"b58be9e6a1997f88a47730b85d46bc968128afe7","tarball":"https://registry.npmjs.org/@davaux/tabler-icons/-/tabler-icons-0.9.0.tgz","fileCount":10,"unpackedSize":13537,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDvG2k1VIvZKdk9VjWWDHyWjy4jbd5nhNAfW7b0VSGp4AiEAjgm5fyeEHLniBPgjdF41UJ/ubmPAsvU1ZhZ8l/HJD60="}]},"_npmUser":{"name":"daviddyess","email":"david.dyess@gmail.com"},"directories":{},"maintainers":[{"name":"daviddyess","email":"david.dyess@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tabler-icons_0.9.0_1783973220862_0.8354969420409333"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-13T20:07:00.692Z","0.9.0":"2026-07-13T20:07:01.017Z","modified":"2026-07-13T20:07:01.259Z"},"maintainers":[{"name":"daviddyess","email":"david.dyess@gmail.com"}],"description":"Tabler Icons component for Davaux","homepage":"https://codeberg.org/davaux/davaux#readme","repository":{"type":"git","url":"https://codeberg.org/davaux/davaux"},"author":{"name":"David L Dyess II"},"bugs":{"url":"https://codeberg.org/davaux/davaux/issues"},"license":"MIT","readme":"# @davaux/tabler-icons\n\nRenders [Tabler Icons](https://tabler.io/icons) as inline SVG strings for Davaux. Reads the SVG source from `@tabler/icons` directly, so there's no icon font, no sprite sheet, and no separate icon-component build step — just the ~5900 icons in that package, addressed by name.\n\n## Installation\n\n```bash\nnpm install @davaux/tabler-icons\n```\n\n## Usage\n\n`TablerIcon` is async — it reads the SVG file and returns the finished markup as a string, so it must be awaited (or rendered from a `definePage`/component that Davaux already awaits for you):\n\n```tsx\nimport { TablerIcon } from '@davaux/tabler-icons'\n\nexport default definePage(() => (\n  <button>\n    <TablerIcon name=\"home\" size={20} />\n    Home\n  </button>\n))\n```\n\n```tsx\n<TablerIcon name=\"heart\" variant=\"filled\" color=\"var(--dv-color-red-6)\" />\n<TablerIcon name=\"settings\" size={32} stroke={1.5} class=\"nav-icon\" />\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `name` | `string` | — | Icon name from the Tabler set, e.g. `'home'`, `'user'`, `'settings'` |\n| `variant` | `'outline' \\| 'filled'` | `'outline'` | Icon style |\n| `size` | `number \\| string` | `24` | Width and height in pixels |\n| `stroke` | `number` | `2` | Stroke width (outline variant only) |\n| `color` | `string` | `'currentColor'` | Any CSS color, applied via `style=\"color:…\"` so it drives both `stroke` and `fill` |\n| `class` | `string` | — | Additional CSS class names appended to the root `<svg>` |\n\nAn unknown `name` (or one that doesn't match `[a-z0-9-]`) resolves to an empty string rather than throwing — check [tabler.io/icons](https://tabler.io/icons) for exact names.\n\n## Server-only\n\n`TablerIcon` reads icon files from disk via `node:fs` at render time. Davaux bundles every `davaux/client`-pragma'd file's full import graph for the browser (`platform: 'browser'`, no `node:*` external) to produce the islands bundle, so importing `@davaux/tabler-icons` from inside one of those files fails the client build itself — esbuild can't resolve `node:fs`/`node:path`/`node:url` for a browser target — not just at runtime.\n\nTo use an icon inside a reactive/client component, render it on the server first and pass the resulting SVG string down as a plain string prop, not an unawaited JSX call: island props are `JSON.stringify`'d for the hydration payload, and a `Promise` (what `<TablerIcon />` produces if it isn't awaited) serializes to `{}`, losing the icon on the client.\n\n```tsx\n// server component\nimport { TablerIcon } from '@davaux/tabler-icons'\nimport { MyIsland } from './MyIsland.js'\n\nexport default definePage(async () => (\n  <MyIsland icon={await TablerIcon({ name: 'star' })} />\n))\n```\n\n```tsx\n/** @jsxImportSource davaux/client */\nimport { reactive } from \"davaux\";\nimport { Icon } from \"@davaux/ui\";\n// MyIsland.tsx — reactive component, no @davaux/tabler-icons import here\nfunction MyIsland({ icon }: { icon: string }) {\n  return <span dangerouslySetInnerHTML={{ __html: icon }} />\n}\nexport default reactive(MyIsland);\n```\n\n## Caching\n\nEach `(name, variant)` pair's raw SVG content is cached in memory after the first read, including misses, so repeated renders of the same icon don't re-hit the filesystem.\n\n## Documentation\n\n[davaux.codeberg.page/docs/tabler-icons](https://davaux.codeberg.page/docs/tabler-icons)\n","readmeFilename":"README.md","_rev":"1-c8643a04c34e350d628dfa77d3af5f77"}