{"_id":"@arpudhabotupload/fn-icon","_rev":"3-8dd067080a6237a67dcc5db917a45803","name":"@arpudhabotupload/fn-icon","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@arpudhabotupload/fn-icon","version":"1.0.0","keywords":["react","icon","svg","component","typescript","tailwindcss"],"author":"","license":"MIT","_id":"@arpudhabotupload/fn-icon@1.0.0","maintainers":[{"name":"arpudhabotupload","email":"arpudhabotupload@gmail.com"}],"dist":{"shasum":"25774768cacd06d36849dd0af6569c2ac51ef522","tarball":"https://registry.npmjs.org/@arpudhabotupload/fn-icon/-/fn-icon-1.0.0.tgz","fileCount":11,"integrity":"sha512-S4opk85reFsS5xF+33Rr4E6beGe8HLMeQze/Z9ScEkk4QRjGL0n7ebSEbWt8pE1aDRo/+Ej/4vIW1JMSAQjxKg==","signatures":[{"sig":"MEUCIQCCn5sG3MRoJe9YPxf3pDm+TAsiRZMYPdn9NJhwfVsDcwIgI3Q/YTOEYsywBlOxiD+FkIPTTU/o89/Qt4diEjJ1G0g=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":50758},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"dev":"tsup --watch","build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"arpudhabotupload","email":"arpudhabotupload@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.6.2","description":"A React icon component library with dynamic SVG loading and Tailwind CSS support","directories":{},"_nodeVersion":"24.11.1","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.2.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/fn-icon_1.0.0_1773142880401_0.0357304325335559","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@arpudhabotupload/fn-icon","version":"1.0.1","keywords":["react","icon","svg","component","typescript","tailwindcss"],"author":"","license":"MIT","_id":"@arpudhabotupload/fn-icon@1.0.1","maintainers":[{"name":"arpudhabotupload","email":"arpudhabotupload@gmail.com"}],"dist":{"shasum":"de211648c764f985a50dc6908cfc68b9153aaad8","tarball":"https://registry.npmjs.org/@arpudhabotupload/fn-icon/-/fn-icon-1.0.1.tgz","fileCount":11,"integrity":"sha512-X8NokD6MWaOrCXb/wL3SDtTs9QUBegqZuJTNrIQ9xAk5BYGUWBKjmdPvlglBBcUJ5au4Z4uzlkh20gDGbrR9zw==","signatures":[{"sig":"MEUCIGCgzw+IG/DeWXQrgVzOtvzAX3Wy5K6MnKE+6c7TI7tOAiEApROTZhJKrdF6/YWQgA6etd9TfhXFN6WbsNPjlLWkpQQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":50780},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"dev":"tsup --watch","build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"arpudhabotupload","email":"arpudhabotupload@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.6.2","description":"A React icon component library with dynamic SVG loading and Tailwind CSS support","directories":{},"_nodeVersion":"24.11.1","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.2.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/fn-icon_1.0.1_1773143308060_0.795473311857823","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@arpudhabotupload/fn-icon","version":"1.0.3","description":"A React icon component library with dynamic SVG loading and Tailwind CSS support","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"bin":{"setup-fn-icons":"scripts/setup-icons.js"},"scripts":{"build":"tsup","dev":"tsup --watch","prepublishOnly":"npm run build"},"keywords":["react","icon","svg","component","typescript","tailwindcss"],"author":"","license":"MIT","peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"devDependencies":{"@types/react":"^18.2.0","@types/react-dom":"^18.2.0","react":"^18.2.0","react-dom":"^18.2.0","tsup":"^8.0.0","typescript":"^5.3.0"},"repository":{"type":"git","url":""},"gitHead":"53ff04a8e4dabe3b16c038481eec4b110a5f6db0","_id":"@arpudhabotupload/fn-icon@1.0.3","_nodeVersion":"24.11.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-+e/pBf/ikkHrj88Ezopx8AMckroxWQj5/se+atyk+UmvBkE3cAOPZS14wiK4ZJ1tdzpxr5ZerzMzDwaaRqMYpg==","shasum":"f426f1611cbc1c494de04905bd1862b72f07e7ed","tarball":"https://registry.npmjs.org/@arpudhabotupload/fn-icon/-/fn-icon-1.0.3.tgz","fileCount":11,"unpackedSize":50752,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCyhbqjgtUQSz9UpT/8zyo8Dwm1msU5RLAQ/1y1JTEUGgIgF+xhVEk3+wMHJXKjrYte9vTxFG2rgLmskwc78Isp0Z8="}]},"_npmUser":{"name":"arpudhabotupload","email":"arpudhabotupload@gmail.com"},"directories":{},"maintainers":[{"name":"arpudhabotupload","email":"arpudhabotupload@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/fn-icon_1.0.3_1773205310534_0.3817344871627635"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-10T11:41:20.201Z","modified":"2026-03-11T05:01:50.830Z","1.0.0":"2026-03-10T11:41:20.564Z","1.0.1":"2026-03-10T11:48:28.207Z","1.0.3":"2026-03-11T05:01:50.710Z"},"license":"MIT","keywords":["react","icon","svg","component","typescript","tailwindcss"],"repository":{"type":"git","url":""},"description":"A React icon component library with dynamic SVG loading and Tailwind CSS support","maintainers":[{"name":"arpudhabotupload","email":"arpudhabotupload@gmail.com"}],"readme":"# @arpudhabotupload/fn-icon\r\n\r\nA React icon component library with dynamic SVG loading and Tailwind CSS support.\r\n\r\n## Features\r\n\r\n- 🎨 Multiple icon variants (Colour, Duotone, Fill, Line)\r\n- 📏 Flexible sizing with predefined size names\r\n- 🎯 Dynamic SVG loading from assets\r\n- 🌈 Customizable colors and stroke widths\r\n- ♿ Accessibility-ready\r\n- 📦 TypeScript support\r\n- 🔥 Zero dependencies (except React peer dependency)\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @arpudhabotupload/fn-icon\r\n```\r\n\r\nor\r\n\r\n```bash\r\nyarn add @arpudhabotupload/fn-icon\r\n```\r\n\r\nor\r\n\r\n```bash\r\npnpm add @arpudhabotupload/fn-icon\r\n```\r\n\r\n## 🎨 Icon Setup\r\n\r\n**Important:** This package does NOT include icon files. You need to provide your own SVG icons.\r\n\r\nPlace your icon files in the `public/assets/icons/` folder of your React app following this structure:\r\n\r\n```\r\npublic/\r\n assets/\r\n icons/\r\n {Variant}/ # Line, Fill, Duotone, or Colour\r\n {Size}px/ # 10px, 16px, 20px, 24px, 32px, 48px\r\n {name}.svg # For 10px and 16px\r\n {name}--{size}.svg # For 20px, 24px, 32px, 48px\r\n```\r\n\r\n**Example:**\r\n- `public/assets/icons/Line/24px/home--24.svg`\r\n- `public/assets/icons/Line/16px/home.svg`\r\n- `public/assets/icons/Fill/32px/star--32.svg`\r\n\r\n### Quick Setup Script\r\n\r\nRun this command in your project to create the folder structure automatically:\r\n\r\n```bash\r\nnpx setup-fn-icons\r\n```\r\n\r\nOr with a custom path:\r\n\r\n```bash\r\nnpx setup-fn-icons public/my-custom-icons\r\n```\r\n\r\nSee [ICON_SETUP.md](./ICON_SETUP.md) for detailed icon organization guide.\r\n\r\n## Usage\r\n\r\n### Basic Usage\r\n\r\n```tsx\r\nimport { FNIcon } from '@arpudhabotupload/fn-icon';\r\n\r\nfunction App() {\r\n return (\r\n \r\n \r\n
\r\n );\r\n}\r\n```\r\n\r\n### With Tailwind CSS\r\n\r\n```tsx\r\nimport { FNIcon } from '@arpudhabotupload/fn-icon';\r\n\r\nfunction App() {\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n```\r\n\r\n### Advanced Usage\r\n\r\n```tsx\r\nimport { FNIcon } from '@arpudhabotupload/fn-icon';\r\n\r\nfunction App() {\r\n return (\r\n \r\n {/* Custom color */}\r\n \r\n\r\n {/* Custom stroke width for line icons */}\r\n \r\n\r\n {/* Disabled state */}\r\n \r\n\r\n {/* Custom base path */}\r\n \r\n
\r\n );\r\n}\r\n```\r\n\r\n## Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `name` | `string` | *required* | Icon name without extension |\r\n| `variant` | `'Colour' \\| 'Duotone' \\| 'Fill' \\| 'Line'` | `'Line'` | Icon variant style |\r\n| `size` | `'extrasmall' \\| 'small' \\| 'medium' \\| 'large' \\| 'x-large' \\| 'xxlarge'` | `'medium'` | Icon size name |\r\n| `color` | `string` | - | Custom color (CSS color value) |\r\n| `strokeWidth` | `number` | - | Stroke width for line icons |\r\n| `disabled` | `boolean` | `false` | Disabled state (reduces opacity and changes cursor) |\r\n| `className` | `string` | `''` | Additional CSS classes (works with Tailwind) |\r\n| `basePath` | `string` | `'/assets/icons'` | Base path for icon assets |\r\n\r\n## Size Mapping\r\n\r\n| Size Name | Pixel Size |\r\n|-----------|------------|\r\n| extrasmall | 10px |\r\n| small | 16px |\r\n| medium | 20px |\r\n| large | 24px |\r\n| x-large | 32px |\r\n| xxlarge | 48px |\r\n\r\n## Icon File Structure\r\n\r\nThe component expects SVG files to be organized in the following structure:\r\n\r\n```\r\npublic/\r\n assets/\r\n icons/\r\n Line/\r\n 16px/\r\n icon-name.svg\r\n 20px/\r\n icon-name--20.svg\r\n 24px/\r\n icon-name--24.svg\r\n 32px/\r\n icon-name--32.svg\r\n 48px/\r\n icon-name--48.svg\r\n Fill/\r\n ...\r\n Colour/\r\n ...\r\n Duotone/\r\n ...\r\n```\r\n\r\n**Note:** For sizes 10px and 16px, the filename doesn't include the size suffix. For other sizes (20, 24, 32, 48), the filename includes `--{size}` suffix.\r\n\r\n## TypeScript\r\n\r\nThe package includes full TypeScript definitions. Import types as needed:\r\n\r\n```tsx\r\nimport type { FNIconProps, TypeIconVariant, TypeIconSize, TypeIconSizeName } from '@arpudhabotupload/fn-icon';\r\n```\r\n\r\n## How It Works\r\n\r\n1. The component fetches the SVG file dynamically based on the `name`, `variant`, and `size` props\r\n2. It parses the SVG and normalizes colors to use `currentColor` for easy styling\r\n3. Removes inline styles that might interfere with custom styling\r\n4. Configures SVG attributes for proper scaling and accessibility\r\n5. Renders the processed SVG inline\r\n\r\n## Browser Support\r\n\r\nThis component works in all modern browsers that support:\r\n- ES2020\r\n- DOMParser API\r\n- Fetch API\r\n\r\n## License\r\n\r\nMIT\r\n\r\n## Contributing\r\n\r\nContributions are welcome! Please feel free to submit a Pull Request.\r\n\r\n","readmeFilename":"README.md"}