{"_id":"@appjamstudio/vite-plugin-icon-forge","name":"@appjamstudio/vite-plugin-icon-forge","dist-tags":{"latest":"0.1.0-beta.1"},"versions":{"0.1.0-beta.1":{"name":"@appjamstudio/vite-plugin-icon-forge","type":"module","version":"0.1.0-beta.1","packageManager":"pnpm@10.14.0","description":"A Vite plugin that automatically transforms SVG files into React components with TypeScript support, allowing easy import and use of SVG icons in your React applications","author":{"name":"Geo Stokes"},"license":"MIT","homepage":"https://github.com/appjamstudio/vite-plugin-icon-forge#readme","repository":{"type":"git","url":"git+https://github.com/appjamstudio/vite-plugin-icon-forge.git"},"bugs":{"url":"https://github.com/appjamstudio/vite-plugin-icon-forge/issues"},"publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./*":"./*","./types/react":{"types":"./types/react.d.ts"}},"main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","typesVersions":{"*":{"*":["./dist/*","./*"]}},"scripts":{"build":"tsup","dev":"tsup --watch src","lint":"eslint .","lint:fix":"eslint . --fix","release":"bumpp && npm publish"},"keywords":["vite-plugin","svg","react","typescript","icons","svg-components","vite"],"peerDependencies":{"@svgr/core":">=7.0.0"},"peerDependenciesMeta":{"@svgr/core":{"optional":true}},"devDependencies":{"@stylistic/eslint-plugin":"^5.2.2","@svgr/core":"^8.1.0","@svgr/plugin-jsx":"^8.1.0","@types/lodash-es":"^4.17.12","@types/node":"^24.1.0","@typescript-eslint/parser":"^8.38.0","bumpp":"^10.2.2","eslint":"^9.32.0","eslint-plugin-simple-import-sort":"^12.1.1","tsup":"^8.5.0","typescript":"^5.9.2","vite":"^7.0.6"},"dependencies":{"lodash-es":"^4.17.21"},"_id":"@appjamstudio/vite-plugin-icon-forge@0.1.0-beta.1","gitHead":"51bb4c161909ac0432c425410fcfbf1bb453331a","_nodeVersion":"20.12.0","_npmVersion":"10.5.0","dist":{"integrity":"sha512-lmm6qr7WAA5a6CTiCmUleTyNMV1XJDn15wBRbZaBaNiUa2nCuAxoXi0NlqdM5evsEQ9aP134Gbu1SOt2s/B6+g==","shasum":"c3146e9568d739a0f9c0a800e21cab5c55981899","tarball":"https://registry.npmjs.org/@appjamstudio/vite-plugin-icon-forge/-/vite-plugin-icon-forge-0.1.0-beta.1.tgz","fileCount":8,"unpackedSize":19911,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEix+zXZl7wXzEYWrlYNZsKpvTp8zKMeQmhu/3Bh3SLEAiATz6ya2QJQy1epUxXR3ScBMSesKmx7Pa5UbFkp9fqWzA=="}]},"_npmUser":{"name":"heyitsgeo","email":"geo@slashpine.tech"},"directories":{},"maintainers":[{"name":"heyitsgeo","email":"geo@slashpine.tech"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vite-plugin-icon-forge_0.1.0-beta.1_1754319087303_0.25473394674442673"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-04T14:51:27.101Z","0.1.0-beta.1":"2025-08-04T14:51:27.504Z","modified":"2025-08-04T14:51:27.855Z"},"maintainers":[{"name":"heyitsgeo","email":"geo@slashpine.tech"}],"description":"A Vite plugin that automatically transforms SVG files into React components with TypeScript support, allowing easy import and use of SVG icons in your React applications","homepage":"https://github.com/appjamstudio/vite-plugin-icon-forge#readme","keywords":["vite-plugin","svg","react","typescript","icons","svg-components","vite"],"repository":{"type":"git","url":"git+https://github.com/appjamstudio/vite-plugin-icon-forge.git"},"author":{"name":"Geo Stokes"},"bugs":{"url":"https://github.com/appjamstudio/vite-plugin-icon-forge/issues"},"license":"MIT","readme":"# vite-plugin-icon-forge\n\nA Vite plugin that automatically transforms SVG files into React components with TypeScript support, allowing easy import and use of SVG icons in your React applications.\n\n## Features\n\n- 🔄 **Automatic transformation** - SVGs are converted to React components on-the-fly\n- 📁 **Directory scanning** - Automatically generates barrel exports for organized icon imports\n- 🔥 **Hot reload** - Icon changes are reflected immediately during development\n- 🎯 **TypeScript support** - Full type safety with generated TypeScript declarations\n- ⚙️ **Configurable** - Customize component naming, directories, and SVGR options\n- 🚀 **Zero runtime** - Icons are transformed at build time\n\n## Installation\n\n```bash\nnpm install @appjamstudio/vite-plugin-icon-forge\n```\n\n## Usage\n\n### 1. Configure the plugin\n\nAdd the plugin to your `vite.config.ts`:\n\n```typescript\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport iconForge from '@appjamstudio/vite-plugin-icon-forge'\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    iconForge({\n      iconsDirectory: 'src/icons', // Default: 'src/icons'\n      iconSuffix: 'Icon',          // Default: 'Icon'\n      iconPrefix: '',              // Default: ''\n    })\n  ],\n})\n```\n\n### 2. Organize your SVG files\n\nPlace your SVG files in the configured directory with subdirectories for organization:\n\n```\nsrc/\n  icons/\n    basic/\n      heart.svg\n      star.svg\n    social/\n      github.svg\n      twitter.svg\n```\n\n### 3. Import and use your icons\n\nThe plugin automatically generates barrel exports, so you can import icons cleanly:\n\n```tsx\nimport { HeartIcon, StarIcon } from './icons/basic'\nimport { GithubIcon, TwitterIcon } from './icons/social'\n\nfunction App() {\n  return (\n    <div>\n      <HeartIcon style={{ color: 'red' }} />\n      <StarIcon style={{ color: 'gold' }} />\n      <GithubIcon style={{ color: '#333' }} />\n      <TwitterIcon style={{ color: '#1da1f2' }} />\n    </div>\n  )\n}\n```\n\n## Configuration Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `iconsDirectory` | `string` | `'src/icons'` | Directory containing your SVG files |\n| `iconSuffix` | `string` | `'Icon'` | Suffix added to component names |\n| `iconPrefix` | `string` | `''` | Prefix added to component names |\n| `svgrOptions` | `Config` | `undefined` | Options passed to SVGR for transformation |\n\n## How it works\n\n1. **Scanning**: The plugin scans your icons directory for SVG files\n2. **Barrel generation**: Creates `index.ts` files in each subdirectory for clean imports\n3. **Transformation**: Uses SVGR to convert SVGs to React components when imported\n4. **Hot reload**: Watches for file changes and regenerates barrels automatically\n\n## Example Project Structure\n\n```\nmy-app/\n├── src/\n│   ├── icons/\n│   │   ├── basic/\n│   │   │   ├── heart.svg\n│   │   │   ├── star.svg\n│   │   │   └── index.ts          # Auto-generated\n│   │   └── social/\n│   │       ├── github.svg\n│   │       ├── twitter.svg\n│   │       └── index.ts          # Auto-generated\n│   └── App.tsx\n├── vite.config.ts\n└── package.json\n```\n\n## Requirements\n\n- Vite 3.0+\n- React 16.8+\n- Node.js 16+\n\n## Peer Dependencies\n\n- `@svgr/core` (optional) - For SVG transformation. The plugin will use a default configuration if not installed.\n\n## License\n\nMIT\n\n## Contributing\n\nIssues and pull requests are welcome! Please visit our [GitHub repository](https://github.com/appjamstudio/vite-plugin-icon-forge).","readmeFilename":"README.md","_rev":"1-c9e9acb429c2b242aa1d50914a11226f"}