{"_id":"@boxicons/react","_rev":"4-a43610f388614e5e596146aa2b19b234","name":"@boxicons/react","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@boxicons/react","version":"1.0.0","keywords":["boxicons","icons","react","react-icons","svg"],"author":"","license":"MIT","_id":"@boxicons/react@1.0.0","maintainers":[{"name":"bxicons","email":"contact@boxicons.com"}],"dist":{"shasum":"fcda218cf9702f9deaaf3ac513d6bfd89feb58d0","tarball":"https://registry.npmjs.org/@boxicons/react/-/react-1.0.0.tgz","fileCount":13100,"integrity":"sha512-rMigKIf7thnHRcifmRYg1JTsO0fATleAP9dQdBESpxlpGfZZesWfD1dZxORV7g4rPcCBWpvtt3VfTBRNdUVL0Q==","signatures":[{"sig":"MEYCIQCFL5XjGIv8zwrbF8IunBwGgoLi91y0ZSF8+abXDDE/8gIhAMmWr0XCfexbJVW4HGM21OQVrMgCO5qZC3ySwPpiq4NL","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18519138},"main":"./dist/cjs/index.js","types":"./dist/types/index.d.ts","module":"./dist/esm/index.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/esm/index.js","default":"./dist/cjs/index.js","require":"./dist/cjs/index.js"},"./*":{"types":"./dist/types/icons/*.d.ts","import":"./dist/esm/icons/*.js","default":"./dist/cjs/icons/*.js","require":"./dist/cjs/icons/*.js"}},"gitHead":"ef5d5b2f30d154302ee33df8197afb092efadc13","scripts":{"build":"npm run generate && npm run build:esm && npm run build:cjs && npm run build:types","clean":"rm -rf dist src/icons","generate":"node scripts/generate-icons.js","build:cjs":"tsc --project tsconfig.cjs.json","build:esm":"tsc --project tsconfig.esm.json","build:types":"tsc --project tsconfig.types.json","prepublishOnly":"npm run clean && npm run build","publish:package":"npm publish"},"_npmUser":{"name":"bxicons","email":"contact@boxicons.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.7.0","description":"React components for Boxicons","directories":{},"sideEffects":false,"_nodeVersion":"24.13.0","_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","typescript":"^5.3.0","@types/node":"^20.10.0","@types/react":"^18.2.0"},"peerDependencies":{"react":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react_1.0.0_1769468363743_0.9826129145679134","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@boxicons/react","version":"1.0.1","keywords":["boxicons","icons","react","react-icons","svg"],"author":"","license":"MIT","_id":"@boxicons/react@1.0.1","maintainers":[{"name":"bxicons","email":"contact@boxicons.com"}],"dist":{"shasum":"c5a8e14c9e486caca9be1e15d0a19990a5d78f47","tarball":"https://registry.npmjs.org/@boxicons/react/-/react-1.0.1.tgz","fileCount":13100,"integrity":"sha512-RSmFziEdvb9urx/dtSwPy4pKwquE2PiOxdwna4Gd02vKbJSr/kQ5yfVKWoC0/hyXXkws1zZFpT37Xkaisc5npw==","signatures":[{"sig":"MEQCIH7h7MeAPWSLwFdiP79+JxUczSPHDf0VQOLGaFPMKBFAAiAIQW3ITCd1yopaOr5P5Q54GLes7ZUKjcBaTJTqGLdjIg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18519149},"main":"./dist/cjs/index.js","types":"./dist/types/index.d.ts","module":"./dist/esm/index.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/esm/index.js","default":"./dist/cjs/index.js","require":"./dist/cjs/index.js"},"./*":{"types":"./dist/types/icons/*.d.ts","import":"./dist/esm/icons/*.js","default":"./dist/cjs/icons/*.js","require":"./dist/cjs/icons/*.js"}},"gitHead":"ef5d5b2f30d154302ee33df8197afb092efadc13","scripts":{"build":"npm run generate && npm run build:esm && npm run build:cjs && npm run build:types","clean":"rm -rf dist src/icons","generate":"node scripts/generate-icons.js","build:cjs":"tsc --project tsconfig.cjs.json","build:esm":"tsc --project tsconfig.esm.json","build:types":"tsc --project tsconfig.types.json","prepublishOnly":"npm run clean && npm run build","publish:package":"npm publish"},"_npmUser":{"name":"bxicons","email":"contact@boxicons.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.7.0","description":"React components for Boxicons","directories":{},"sideEffects":false,"_nodeVersion":"24.13.0","_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","typescript":"^5.3.0","@types/node":"^20.10.0","@types/react":"^18.2.0"},"peerDependencies":{"react":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react_1.0.1_1769468516032_0.8350720432131173","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@boxicons/react","version":"1.0.2","keywords":["boxicons","icons","react","react-icons","svg"],"author":{"name":"Boxicons"},"license":"MIT","_id":"@boxicons/react@1.0.2","maintainers":[{"name":"bxicons","email":"contact@boxicons.com"}],"homepage":"https://boxicons.com","bugs":{"url":"https://github.com/box-icons/boxicons-react/issues"},"dist":{"shasum":"8d71f36a232f40702ccef5bc645885405f58bf07","tarball":"https://registry.npmjs.org/@boxicons/react/-/react-1.0.2.tgz","fileCount":13100,"integrity":"sha512-DDGEjwLaIKn6FEHBwYPqE/kFyrom7X0dIJ++6+wxlgi5jPfsrg26S0Tl1JXgDUBGpd2ay/c2aNFZmpFhucu+CQ==","signatures":[{"sig":"MEQCIHjun42ocjlPB3AczhkrVgEWSQoi7VJRGBBxi81QwnNrAiB2QNjiApBM+5axxqieFJRV1iKsPjLGChXYDBA9ku8+1Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18519237},"main":"./dist/cjs/index.js","types":"./dist/types/index.d.ts","module":"./dist/esm/index.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/esm/index.js","default":"./dist/cjs/index.js","require":"./dist/cjs/index.js"},"./*":{"types":"./dist/types/icons/*.d.ts","import":"./dist/esm/icons/*.js","default":"./dist/cjs/icons/*.js","require":"./dist/cjs/icons/*.js"}},"gitHead":"da11b5ff4be511fd512e491114837fdd64bffe0c","scripts":{"build":"npm run generate && npm run build:esm && npm run build:cjs && npm run build:types","clean":"rm -rf dist src/icons","generate":"node scripts/generate-icons.js","build:cjs":"tsc --project tsconfig.cjs.json","build:esm":"tsc --project tsconfig.esm.json","build:types":"tsc --project tsconfig.types.json","prepublishOnly":"npm run clean && npm run build","publish:package":"npm publish"},"_npmUser":{"name":"bxicons","email":"contact@boxicons.com"},"repository":{"url":"git+ssh://git@github.com/box-icons/boxicons-react.git","type":"git"},"_npmVersion":"11.7.0","description":"React components for Boxicons","directories":{},"sideEffects":false,"_nodeVersion":"24.13.0","_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","typescript":"^5.3.0","@types/node":"^20.10.0","@types/react":"^18.2.0"},"peerDependencies":{"react":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react_1.0.2_1769655640478_0.880437399895615","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@boxicons/react","version":"1.0.3","description":"React components for Boxicons","main":"./dist/cjs/index.js","module":"./dist/esm/index.js","types":"./dist/types/index.d.ts","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.js","default":"./dist/cjs/index.js"},"./*":{"types":"./dist/types/icons/*.d.ts","import":"./dist/esm/icons/*.js","require":"./dist/cjs/icons/*.js","default":"./dist/cjs/icons/*.js"}},"sideEffects":false,"scripts":{"generate":"node scripts/generate-icons.js","build:esm":"tsc --project tsconfig.esm.json","build:cjs":"tsc --project tsconfig.cjs.json","build:types":"tsc --project tsconfig.types.json","build":"npm run generate && npm run build:esm && npm run build:cjs && npm run build:types","clean":"rm -rf dist src/icons","prepublishOnly":"npm run clean && npm run build","publish:package":"npm publish"},"peerDependencies":{"react":">=16.8.0"},"devDependencies":{"@boxicons/core":"file:../boxicons-core","@types/node":"^20.10.0","@types/react":"^18.2.0","react":"^18.2.0","typescript":"^5.3.0"},"keywords":["boxicons","icons","react","react-icons","svg"],"author":{"name":"Boxicons"},"homepage":"https://boxicons.com","license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/box-icons/boxicons-react.git"},"gitHead":"a323f7bbaae13e73290b866d654126ba3a131128","_id":"@boxicons/react@1.0.3","bugs":{"url":"https://github.com/box-icons/boxicons-react/issues"},"_nodeVersion":"24.13.0","_npmVersion":"11.7.0","dist":{"integrity":"sha512-NASJNbk4X6Xi24CIa/Anx7KhMH1KPiBuaq0RJq3HJiFg65Ct9mhIB6j/a/Ciz/ZOTGaGzisWYmbU4jdKKK/YYA==","shasum":"da02f561be2326e0aac16419be17952892bc44b1","tarball":"https://registry.npmjs.org/@boxicons/react/-/react-1.0.3.tgz","fileCount":13101,"unpackedSize":18520349,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCvVWtPY8BW3e0q9LxfcapuOcResRbPC9zQz8mMHYfMigIhAO3aTelJby6t3UroTJ7gaBPdI5+t4iodpDr9Ke/qMnoT"}]},"_npmUser":{"name":"bxicons","email":"contact@boxicons.com"},"directories":{},"maintainers":[{"name":"bxicons","email":"contact@boxicons.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_1.0.3_1771202853635_0.07072205993608649"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-26T22:59:23.675Z","modified":"2026-02-16T00:47:34.016Z","1.0.0":"2026-01-26T22:59:24.024Z","1.0.1":"2026-01-26T23:01:56.313Z","1.0.2":"2026-01-29T03:00:40.784Z","1.0.3":"2026-02-16T00:47:33.885Z"},"bugs":{"url":"https://github.com/box-icons/boxicons-react/issues"},"author":{"name":"Boxicons"},"license":"MIT","homepage":"https://boxicons.com","keywords":["boxicons","icons","react","react-icons","svg"],"repository":{"type":"git","url":"git+ssh://git@github.com/box-icons/boxicons-react.git"},"description":"React components for Boxicons","maintainers":[{"name":"bxicons","email":"contact@boxicons.com"}],"readme":"# @boxicons/react\n\nReact icon library built from Boxicons SVG files with full tree-shaking support.\n\n## Installation\n\n```bash\nnpm install @boxicons/react\n# or\nyarn add @boxicons/react\n# or\npnpm add @boxicons/react\n```\n\n## Usage\n\n### Basic Usage\n\n```tsx\nimport { Alarm, Twitter, Home } from '@boxicons/react';\n\nfunction App() {\n  return (\n    <div>\n      <Alarm />\n      <Twitter />\n      <Home />\n    </div>\n  );\n}\n```\n\n### Icon Packs\n\nEach icon can have multiple variants. Use the `pack` prop to switch between them:\n\n- **basic** - Outline/regular style icons (default for most icons)\n- **filled** - Solid/filled style icons\n- **brands** - Brand/logo icons (default for brand icons like Twitter, Facebook, etc.)\n\n```tsx\nimport { Alarm } from '@boxicons/react';\n\nfunction App() {\n  return (\n    <div>\n      {/* Basic/outline style (default) */}\n      <Alarm />\n      \n      {/* Filled style */}\n      <Alarm pack=\"filled\" />\n    </div>\n  );\n}\n```\n\n### Sizing\n\n#### Size Presets\n\nUse the `size` prop for convenient preset sizes:\n\n```tsx\n<Alarm size=\"xs\" />   {/* 16px */}\n<Alarm size=\"sm\" />   {/* 20px */}\n<Alarm size=\"base\" /> {/* 24px (default) */}\n<Alarm size=\"md\" />   {/* 36px */}\n<Alarm size=\"lg\" />   {/* 48px */}\n<Alarm size=\"xl\" />   {/* 64px */}\n<Alarm size=\"2xl\" />  {/* 96px */}\n<Alarm size=\"3xl\" />  {/* 128px */}\n<Alarm size=\"4xl\" />  {/* 256px */}\n<Alarm size=\"5xl\" />  {/* 512px */}\n```\n\n#### Custom Sizing\n\nFor custom sizes, use `width` and `height` props (overrides `size`):\n\n```tsx\n<Alarm width={32} height={32} />\n<Alarm width=\"48\" height=\"48\" />\n<Alarm width=\"2rem\" height=\"2rem\" />\n```\n\n### Colors\n\nUse the `fill` prop to change the icon color (defaults to `currentColor`):\n\n```tsx\n<Alarm fill=\"#ff0000\" />\n<Alarm fill=\"rgb(0, 128, 255)\" />\n<Alarm fill=\"currentColor\" /> {/* Inherits text color */}\n```\n\n### Opacity\n\nControl transparency with the `opacity` prop:\n\n```tsx\n<Alarm opacity={0.5} />\n<Alarm opacity=\"0.75\" />\n```\n\n### Flip\n\nMirror icons horizontally or vertically:\n\n```tsx\n<Alarm flip=\"horizontal\" /> {/* Mirrors left-to-right */}\n<Alarm flip=\"vertical\" />   {/* Mirrors top-to-bottom */}\n```\n\n### Rotate\n\nRotate icons by any degree:\n\n```tsx\n<Alarm rotate={45} />      {/* Rotates 45 degrees */}\n<Alarm rotate=\"90\" />      {/* Rotates 90 degrees */}\n<Alarm rotate=\"180deg\" />  {/* Also accepts \"deg\" suffix */}\n```\n\n### Remove Padding\n\nRemove the default 2px padding around icons for a tighter fit:\n\n```tsx\n<Alarm removePadding />    {/* Crops padding, viewBox becomes \"2 2 20 20\" */}\n```\n\n### Combining Props\n\nAll props can be combined:\n\n```tsx\n<Alarm \n  pack=\"filled\"\n  fill=\"#ffffff\"\n  opacity={0.8}\n  size=\"lg\"\n  flip=\"horizontal\"\n  rotate={45}\n  className=\"my-icon\"\n  style={{ margin: '8px' }}\n/>\n```\n\n### Standard SVG Props\n\nAll standard SVG props are supported and passed through to the underlying `<svg>` element:\n\n```tsx\n<Alarm \n  className=\"icon\"\n  id=\"my-alarm-icon\"\n  aria-label=\"Alarm\"\n  role=\"img\"\n  onClick={() => console.log('clicked')}\n/>\n```\n\n### Ref Forwarding\n\nRefs are forwarded to the SVG element:\n\n```tsx\nimport { useRef } from 'react';\nimport { Alarm } from '@boxicons/react';\n\nfunction App() {\n  const iconRef = useRef<SVGSVGElement>(null);\n  \n  return <Alarm ref={iconRef} />;\n}\n```\n\n## Tree Shaking\n\nThis library is fully tree-shakeable. Only the icons you import will be included in your final bundle.\n\n```tsx\n// ✅ Only Alarm is bundled\nimport { Alarm } from '@boxicons/react';\n\n// ✅ Direct import also works\nimport { Alarm } from '@boxicons/react/icons/Alarm';\n```\n\n## Available Icons\n\nThe library includes all Boxicons:\n- **1884** basic (outline) icons\n- **1884** filled icons  \n- **295** brand icons\n\n### Naming Convention\n\nIcon names are converted from kebab-case SVG filenames to PascalCase:\n\n| SVG File | Component Name |\n|----------|---------------|\n| `bx-alarm.svg` | `<Alarm />` |\n| `bx-alarm-clock.svg` | `<AlarmClock />` |\n| `bx-twitter.svg` | `<Twitter />` |\n| `bx-8-ball.svg` | `<Icon8Ball />` |\n\n**Note:** Icons starting with numbers are prefixed with \"Icon\" (e.g., `Icon8Ball`, `Icon500px`).\n\n**Note:** Some icons have the \"Icon\" suffix to avoid conflicts with reserved words (e.g., `ReactIcon` for the React logo).\n\n## TypeScript\n\nFull TypeScript support with exported types:\n\n```tsx\nimport type { BoxIconProps, IconPack, IconSize, FlipDirection } from '@boxicons/react';\n```\n\n### BoxIconProps\n\n```tsx\ninterface BoxIconProps extends SVGProps<SVGSVGElement> {\n  pack?: 'basic' | 'filled' | 'brands';\n  fill?: string;\n  opacity?: number | string;\n  width?: number | string;\n  height?: number | string;\n  size?: 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';\n  flip?: 'horizontal' | 'vertical';\n  rotate?: number | string;\n  removePadding?: boolean;\n}\n```\n\n\n# @boxicons/react\n","readmeFilename":"README.md"}