{"_id":"@arloui/icons","name":"@arloui/icons","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@arloui/icons","version":"0.1.0","description":"Arlo UI — custom icon set compiled from SVG to react-native-svg components.","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Base16-Labs/arloui.git","directory":"packages/icons"},"homepage":"https://arloui.com","bugs":{"url":"https://github.com/Base16-Labs/arloui/issues"},"sideEffects":false,"main":"./dist/cjs/index.js","types":"./dist/esm/index.d.ts","exports":{".":{"types":"./dist/esm/index.d.ts","react-native":"./dist/esm/index.js","import":"./dist/esm/index.js","require":"./dist/cjs/index.js","default":"./dist/esm/index.js"},"./*":{"types":"./dist/esm/generated/*.d.ts","react-native":"./dist/esm/generated/*.js","import":"./dist/esm/generated/*.js","require":"./dist/cjs/generated/*.js","default":"./dist/esm/generated/*.js"},"./package.json":"./package.json"},"scripts":{"generate":"tsx ../../tooling/build-icons/src/index.ts","build":"tsc -p tsconfig.build.json && tsc -p tsconfig.cjs.json && node scripts/finalize-dist.mjs","typecheck":"tsc --noEmit","lint":"eslint src --ignore-pattern 'src/generated/**'","clean":"rm -rf .turbo dist"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.74.0","react-native-svg":">=15.0.0"},"devDependencies":{"@arloui/eslint-config":"file:../eslint-config","@arloui/tsconfig":"file:../tsconfig","@types/react":"~19.1.10","react-native-svg":"15.8.0","typescript":"^5.6.2"},"module":"./dist/esm/index.js","react-native":"./dist/esm/index.js","_id":"@arloui/icons@0.1.0","gitHead":"b8fbe068c69814364db80e060102e8c3d5c798b7","_nodeVersion":"22.14.0","_npmVersion":"11.5.1","dist":{"integrity":"sha512-01OxlcGeC136shAaWH/1I8dih2HIvmYPtu4UiNRFDChUHVFBW8MwrHllumjmKyAlORFMlFxq95FwtulUWsZgUg==","shasum":"b32dbb3f5dfdb8e8aac204ed8df8f04cfa0f4c29","tarball":"https://registry.npmjs.org/@arloui/icons/-/icons-0.1.0.tgz","fileCount":8950,"unpackedSize":13285313,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGkmce8SeY9A/C4ZYCZSLWydGwvOVUpxDzfIXQftan8wAiB8YsdddE+OcE1PwOmg5ZrIhSgsvsiXRpaJK0uiq/FNmA=="}]},"_npmUser":{"name":"arloui","email":"accounts@base16.studio"},"directories":{},"maintainers":[{"name":"arloui","email":"accounts@base16.studio"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/icons_0.1.0_1785657398554_0.6820257784632278"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-02T07:56:38.320Z","0.1.0":"2026-08-02T07:56:38.779Z","modified":"2026-08-02T07:56:39.057Z"},"maintainers":[{"name":"arloui","email":"accounts@base16.studio"}],"description":"Arlo UI — custom icon set compiled from SVG to react-native-svg components.","homepage":"https://arloui.com","repository":{"type":"git","url":"git+https://github.com/Base16-Labs/arloui.git","directory":"packages/icons"},"bugs":{"url":"https://github.com/Base16-Labs/arloui/issues"},"license":"MIT","readme":"# @arloui/icons\n\nArlo UI’s **first-party icon set**. Designers own the SVG sources in Figma; this package turns them into **React Native components** (`react-native-svg`) that apps import by name.\n\n## Why a package — not copy-paste like primitives?\n\nIcons are a **large, uniform asset graph**. Shipping them as `@arloui/icons` gives you:\n\n- One **versioned artifact** (like a custom font)\n- **Tree-shakeable** named imports: `import { ChevronRight } from '@arloui/icons'`\n- No explosion of hundreds of files pasted into every consumer repo\n\nRegistry components (Button, Row, …) stay copy-paste; they **accept `ReactNode` slots** and you pass `<ChevronRight />` from this package.\n\n## Consumer setup\n\n```bash\nnpm install @arloui/icons react-native-svg\n```\n\n```tsx\nimport { ChevronRight } from '@arloui/icons';\nimport { useTokens } from '@/lib/arloui/theme-provider';\n\nfunction Row() {\n  const t = useTokens();\n  return <ChevronRight width={20} height={20} color={t.colors.textSecondary} />;\n}\n```\n\nGenerated components follow `react-native-svg` props: `width`, `height`, `color`, `stroke`, etc., depending on the SVG (SVGR maps `fill`/`stroke` to the root).\n\n### Copy raw SVG (HeroUI-style)\n\nThe **docs app** (`apps/docs`) includes an **`/icons`** gallery on **web**: search, preview, **Copy SVG**, and **Copy React usage**. Static SVGs are synced from this package into `apps/docs/public/arloui-icons/` (gitignored) via `npm run sync-icons -w @arloui/docs`; the icon name list lives in `apps/docs/data/icon-names.json`.\n\nAfter installing **`@arloui/icons`**, you can also open **`node_modules/@arloui/icons/assets/svg/<name>.svg`** and paste the file into `SvgXml` from `react-native-svg` if you prefer not to import a component.\n\n**Accessibility:** For decorative icons, leave them unlabeled; for meaningful icons, set `accessibilityLabel` on the **pressable** or wrap with a label — don’t rely on the raw SVG for semantics.\n\n## Maintainer workflow (this monorepo)\n\n1. Export SVG from Figma into `packages/icons/assets/svg/` — **one file per icon**, `kebab-case.svg`.\n2. Run **`npm run icons:build`** at the repo root (uses `tooling/build-icons` + SVGR).\n3. Commit **`assets/svg/`** and the updated **`src/generated/`** output.\n4. Release **`@arloui/icons`** with Changesets like any other public package.\n\n### Naming\n\n| File | Generated component |\n|------|---------------------|\n| `chevron-right.svg` | `ChevronRight` |\n| `arlo-check.svg` | `ArloCheck` |\n\n## Figma checklist\n\n- Single **stroke weight** family across the set (or explicit `thin` / `regular` **variants** if the design calls for two tiers — use different files, e.g. `check.svg` vs `check-bold.svg`).\n- Fixed **grid** (24×24 recommended) so `viewBox` alignment stays predictable.\n- **Outline** icons: convert strokes to outlines *only* if you need to; keeping strokes often gives cleaner RN scaling — discuss with whoever runs the build if something renders wrong.\n\n## License\n\n[MIT](../../LICENSE) © Base16 Labs and Arlo UI contributors.\n","readmeFilename":"README.md","_rev":"1-ca3115c3a0f3a60766cac93b0b373953"}