{"_id":"@arpudhabotupload/fn-icon-angular","name":"@arpudhabotupload/fn-icon-angular","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@arpudhabotupload/fn-icon-angular","version":"1.0.0","description":"An Angular 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":{".":{"import":"./dist/index.mjs","require":"./dist/index.js"}},"bin":{"setup-fn-icons":"scripts/setup-icons.js"},"scripts":{"build":"ng-packagr -p ng-package.json","dev":"ng-packagr -p ng-package.json --watch","prepublishOnly":"npm run build"},"keywords":["angular","icon","svg","component","typescript","tailwindcss","standalone"],"author":"","license":"MIT","peerDependencies":{"@angular/common":"^19.0.0 || ^18.2.15 || ^20.0.0","@angular/core":"^19.0.0 || ^18.2.15 || ^20.0.0","@angular/platform-browser":"^19.0.0 || ^18.2.15 || ^20.0.0"},"devDependencies":{"@angular/common":"^19.0.0","@angular/core":"^19.0.0","@angular/compiler":"^19.0.0","@angular/compiler-cli":"^19.0.0","@angular/platform-browser":"^19.0.0","ng-packagr":"^19.0.0","typescript":"~5.7.0","rxjs":"~7.8.0","zone.js":"~0.15.0"},"repository":{"type":"git","url":""},"_id":"@arpudhabotupload/fn-icon-angular@1.0.0","_nodeVersion":"24.11.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-9c4vFY5EVqHZywK9vwqsQk4Tg0+QqTBMRS8izfT6NcbxApwlaEG+NAxb00dihpDx027vvGylqa28dwAkqHUpMQ==","shasum":"6e9fe44cefc1f35e8dd388ddab845e81f8dd2fd3","tarball":"https://registry.npmjs.org/@arpudhabotupload/fn-icon-angular/-/fn-icon-angular-1.0.0.tgz","fileCount":12,"unpackedSize":49139,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAQCmJtNxWpQ4QUnKr6nZwPApaqFowFi7UtyInTqg96qAiEA+VbWPQUyLRF+F7J4cOXk+3GtFIV9zhIql6a9Qfs/zj8="}]},"_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-angular_1.0.0_1773226394882_0.8949712418675657"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-11T10:53:14.773Z","1.0.0":"2026-03-11T10:53:15.044Z","modified":"2026-03-11T10:53:15.249Z"},"maintainers":[{"name":"arpudhabotupload","email":"arpudhabotupload@gmail.com"}],"description":"An Angular icon component library with dynamic SVG loading and Tailwind CSS support","keywords":["angular","icon","svg","component","typescript","tailwindcss","standalone"],"repository":{"type":"git","url":""},"license":"MIT","readme":"# @arpudhabotupload/fn-icon-angular\r\n\r\nAn Angular 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- ⚡ Standalone component (Angular 14+)\r\n- 🔥 Zero dependencies (except Angular peer dependencies)\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @arpudhabotupload/fn-icon-angular\r\n```\r\n\r\nor\r\n\r\n```bash\r\nyarn add @arpudhabotupload/fn-icon-angular\r\n```\r\n\r\nor\r\n\r\n```bash\r\npnpm add @arpudhabotupload/fn-icon-angular\r\n```\r\n\r\n## Setup\r\n\r\n### HttpClient Configuration\r\n\r\nThis component uses Angular's `HttpClient` to load SVG files. You need to provide `HttpClient` in your application:\r\n\r\n**For standalone apps (Angular 14+):**\r\n\r\n```typescript\r\n// main.ts or app.config.ts\r\nimport { provideHttpClient } from '@angular/common/http';\r\nimport { bootstrapApplication } from '@angular/platform-browser';\r\nimport { AppComponent } from './app/app.component';\r\n\r\nbootstrapApplication(AppComponent, {\r\n  providers: [\r\n    provideHttpClient()\r\n  ]\r\n});\r\n```\r\n\r\n**For module-based apps:**\r\n\r\n```typescript\r\n// app.module.ts\r\nimport { HttpClientModule } from '@angular/common/http';\r\n\r\n@NgModule({\r\n  imports: [\r\n    HttpClientModule,\r\n    // ... other imports\r\n  ],\r\n})\r\nexport class AppModule {}\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 Angular 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```typescript\r\nimport { Component } from '@angular/core';\r\nimport { FNIconComponent } from '@arpudhabotupload/fn-icon-angular';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  standalone: true,\r\n  imports: [FNIconComponent],\r\n  template: `\r\n    <div>\r\n      <fn-icon name=\"home\"></fn-icon>\r\n    </div>\r\n  `\r\n})\r\nexport class AppComponent {}\r\n```\r\n\r\n### With Tailwind CSS\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\nimport { FNIconComponent } from '@arpudhabotupload/fn-icon-angular';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  standalone: true,\r\n  imports: [FNIconComponent],\r\n  template: `\r\n    <div class=\"flex items-center gap-2\">\r\n      <fn-icon \r\n        name=\"home\" \r\n        size=\"large\" \r\n        className=\"text-blue-500\">\r\n      </fn-icon>\r\n      <fn-icon \r\n        name=\"settings\" \r\n        variant=\"Fill\" \r\n        size=\"medium\"\r\n        className=\"text-gray-600 hover:text-gray-900\">\r\n      </fn-icon>\r\n    </div>\r\n  `\r\n})\r\nexport class AppComponent {}\r\n```\r\n\r\n### Advanced Usage\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\nimport { FNIconComponent } from '@arpudhabotupload/fn-icon-angular';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  standalone: true,\r\n  imports: [FNIconComponent],\r\n  template: `\r\n    <div>\r\n      <!-- Custom color -->\r\n      <fn-icon \r\n        name=\"star\" \r\n        variant=\"Fill\" \r\n        color=\"#FFD700\">\r\n      </fn-icon>\r\n\r\n      <!-- Custom stroke width for line icons -->\r\n      <fn-icon \r\n        name=\"heart\" \r\n        variant=\"Line\" \r\n        [strokeWidth]=\"2\"\r\n        size=\"x-large\">\r\n      </fn-icon>\r\n\r\n      <!-- Disabled state -->\r\n      <fn-icon \r\n        name=\"trash\" \r\n        [disabled]=\"true\">\r\n      </fn-icon>\r\n\r\n      <!-- Custom base path -->\r\n      <fn-icon \r\n        name=\"user\" \r\n        basePath=\"/custom/icons/path\">\r\n      </fn-icon>\r\n    </div>\r\n  `\r\n})\r\nexport class AppComponent {}\r\n```\r\n\r\n### Using in Non-Standalone Components\r\n\r\nIf you're using module-based Angular components, import it in your module:\r\n\r\n```typescript\r\nimport { NgModule } from '@angular/core';\r\nimport { FNIconComponent } from '@arpudhabotupload/fn-icon-angular';\r\n\r\n@NgModule({\r\n  imports: [FNIconComponent],\r\n  // ... other config\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\n## Props (Inputs)\r\n\r\n| Input | 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```typescript\r\nimport type { TypeIconVariant, TypeIconSize, TypeIconSizeName } from '@arpudhabotupload/fn-icon-angular';\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` inputs\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 using safe DOM manipulation\r\n\r\n## Browser Support\r\n\r\nThis component works in all modern browsers that support:\r\n- ES2022\r\n- DOMParser API\r\n- Angular 18.2.15+ or Angular 19+\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","_rev":"1-b87f37be352cec74539fe6eaefd0f1ee"}