{"_id":"lemon-lime-svgs","_rev":"3-7feb6128a7fdd01c0f076e1806377092","name":"lemon-lime-svgs","dist-tags":{"latest":"2.0.1"},"versions":{"1.0.0":{"name":"lemon-lime-svgs","version":"1.0.0","keywords":["svg","sprite"],"author":{"url":"Haywood","name":"Amy"},"license":"ISC","_id":"lemon-lime-svgs@1.0.0","maintainers":[{"name":"selfteachme","email":"amy@selfteach.me"}],"homepage":"https://github.com/ahaywood/lemon-lime-sprite#readme","bugs":{"url":"https://github.com/ahaywood/lemon-lime-sprite/issues"},"bin":{"lemon-lime-svgs":"dist/cli.mjs"},"dist":{"shasum":"206980c1196a6b500a4fe3e352a3bdb20150ede2","tarball":"https://registry.npmjs.org/lemon-lime-svgs/-/lemon-lime-svgs-1.0.0.tgz","fileCount":18,"integrity":"sha512-5ApH4hACMAwzIC8C9FMd9XwHGfvqRFK1RLh6pJlHakWJuOKviO/cQLGx7JEeVEQEJlwW8/yKqxHqCdCEMJUusQ==","signatures":[{"sig":"MEQCIC9iweWlBVTtdvITa81yC4eG5yYac/2onBQpE5D/9TiGAiBYYWPaxQac+gq36vm1tS9PG0VqGhzIOF8HgiLGIjTU9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":53046},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"c4c835be7cd29f1a81b8230e3237ed11d2fc00ff","scripts":{"test":"jest","build":"tsc","icons":"tsx ./src/index.mts","prepare":"npm run build","test:watch":"jest --watch"},"_npmUser":{"name":"selfteachme","email":"amy@selfteach.me"},"repository":{"url":"git+https://github.com/ahaywood/lemon-lime-sprite.git","type":"git"},"_npmVersion":"10.9.2","description":"an npm package for converting a folder of svg icons into a single sprite","directories":{},"_nodeVersion":"22.13.0","dependencies":{"tsx":"^4.19.2","glob":"^11.0.0","chalk":"^5.4.1","dotenv":"^16.4.7","fs-extra":"^11.2.0","node-html-parser":"^6.1.13"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","ts-jest":"^29.1.2","@types/jest":"^29.5.12","@types/node":"^22.9.3","@types/fs-extra":"^11.0.4"},"_npmOperationalInternal":{"tmp":"tmp/lemon-lime-svgs_1.0.0_1737262292097_0.44818717311803113","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"lemon-lime-svgs","version":"2.0.0","keywords":["svg","sprite"],"author":{"url":"Haywood","name":"Amy"},"license":"ISC","_id":"lemon-lime-svgs@2.0.0","maintainers":[{"name":"selfteachme","email":"amy@selfteach.me"}],"homepage":"https://github.com/ahaywood/lemon-lime-sprite#readme","bugs":{"url":"https://github.com/ahaywood/lemon-lime-sprite/issues"},"bin":{"lemon-lime-svgs":"dist/cli.mjs","lemon-lime-svgs-migrate":"dist/cli-migrate.mjs","lemon-lime-svgs-component":"dist/cli-component.mjs"},"dist":{"shasum":"d415c21e7bdc7662122aa3b0ec1c11c609ab061f","tarball":"https://registry.npmjs.org/lemon-lime-svgs/-/lemon-lime-svgs-2.0.0.tgz","fileCount":43,"integrity":"sha512-PKHSEZ9jZ2KHUEGBJHw/2IEqxq00D/5jGzN9FYGJks7+cTxPStQL8nC80PM+UyVhpW3OqQlPphbYhQvtNAvZuQ==","signatures":[{"sig":"MEYCIQCktImUx+/3u+jzNbKDXcbJ7EeEFfmCdTrL78DCtmsu+wIhAJLsvZ+z4W12C3JsjmY73+XPpsRDIyTwAow6E/LETmQG","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":112065},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"a9a9cef442cf52267bc2473570276aa00c6fa08e","scripts":{"test":"jest","build":"tsc","icons":"tsx ./src/index.mts","migrate":"tsx ./src/migrate.mts","prepare":"npm run build","component":"tsx ./src/install-component.mts","test:watch":"jest --watch"},"_npmUser":{"name":"selfteachme","email":"amy@selfteach.me"},"repository":{"url":"git+https://github.com/ahaywood/lemon-lime-sprite.git","type":"git"},"_npmVersion":"10.9.2","description":"an npm package for converting a folder of svg icons into a single sprite","directories":{},"_nodeVersion":"22.13.0","dependencies":{"tsx":"^4.19.2","glob":"^11.0.0","chalk":"^5.4.1","fs-extra":"^11.2.0","inquirer":"^9.2.15","node-html-parser":"^6.1.13"},"lemonLimeSvgs":{"verbose":false,"inputDir":"other/svg-icons","typesDir":"src/types","outputDir":"public/images/icons","typeFilename":"name.d.ts","generateReadme":false,"spriteFilename":"sprite.svg"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","dotenv":"^16.4.7","ts-jest":"^29.1.2","@types/jest":"^29.5.12","@types/node":"^22.9.3","@types/fs-extra":"^11.0.4","@types/inquirer":"^9.0.7"},"_npmOperationalInternal":{"tmp":"tmp/lemon-lime-svgs_2.0.0_1742581579767_0.12026420649478653","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"lemon-lime-svgs","version":"2.0.1","description":"an npm package for converting a folder of svg icons into a single sprite","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"test":"jest","test:watch":"jest --watch","build":"tsc","prepare":"npm run build","icons":"tsx ./src/index.mts","migrate":"tsx ./src/migrate.mts","component":"tsx ./src/install-component.mts"},"repository":{"type":"git","url":"git+https://github.com/ahaywood/lemon-lime-sprite.git"},"keywords":["svg","sprite"],"author":{"name":"Amy","url":"Haywood"},"license":"ISC","bugs":{"url":"https://github.com/ahaywood/lemon-lime-sprite/issues"},"homepage":"https://github.com/ahaywood/lemon-lime-sprite#readme","dependencies":{"chalk":"^5.4.1","dotenv":"^16.4.7","fs-extra":"^11.2.0","glob":"^11.0.0","inquirer":"^9.2.15","node-html-parser":"^6.1.13","tsx":"^4.19.2"},"devDependencies":{"@types/fs-extra":"^11.0.4","@types/inquirer":"^9.0.7","@types/jest":"^29.5.12","@types/node":"^22.9.3","jest":"^29.7.0","ts-jest":"^29.1.2"},"bin":{"lemon-lime-svgs":"dist/cli.mjs","lemon-lime-svgs-migrate":"dist/cli-migrate.mjs","lemon-lime-svgs-component":"dist/cli-component.mjs"},"type":"module","lemonLimeSvgs":{"inputDir":"other/svg-icons","outputDir":"public/images/icons","typesDir":"src/types","spriteFilename":"sprite.svg","typeFilename":"name.d.ts","verbose":false,"generateReadme":false},"_id":"lemon-lime-svgs@2.0.1","gitHead":"8191481d831e2beeb44338b733d0c0965804fc93","_nodeVersion":"22.13.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-QJQStcaJJWUfSNA3XF/+OloFE2+HMvzIsiTWFm+33u7uSq7n10moYRNj9awQ5/DvF2Cw9syDSXtmEA13HsG5UA==","shasum":"a0d29d4dfb81187f3d32d45eb42e6d4ce4156e73","tarball":"https://registry.npmjs.org/lemon-lime-svgs/-/lemon-lime-svgs-2.0.1.tgz","fileCount":43,"unpackedSize":112247,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDz8L1nTXFpd5nsPIvMN/1ofYYzHC5kYMseahcqAgT/CgIgFAyCWtlj3FTP61DwMEtWMSxz/LQvB33JjwUmsmyWLa4="}]},"_npmUser":{"name":"selfteachme","email":"amy@selfteach.me"},"directories":{},"maintainers":[{"name":"selfteachme","email":"amy@selfteach.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/lemon-lime-svgs_2.0.1_1743473265426_0.5037819437086026"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-19T04:51:32.096Z","modified":"2025-04-01T02:07:45.841Z","1.0.0":"2025-01-19T04:51:32.300Z","2.0.0":"2025-03-21T18:26:19.954Z","2.0.1":"2025-04-01T02:07:45.671Z"},"bugs":{"url":"https://github.com/ahaywood/lemon-lime-sprite/issues"},"author":{"name":"Amy","url":"Haywood"},"license":"ISC","homepage":"https://github.com/ahaywood/lemon-lime-sprite#readme","keywords":["svg","sprite"],"repository":{"type":"git","url":"git+https://github.com/ahaywood/lemon-lime-sprite.git"},"description":"an npm package for converting a folder of svg icons into a single sprite","maintainers":[{"name":"selfteachme","email":"amy@selfteach.me"}],"readme":"# ๐ Lemon Lime SVGs\n\n[](https://www.npmjs.com/package/lemon-lime-svgs)\n[](https://www.npmjs.com/package/lemon-lime-svgs)\n[](https://github.com/ahaywood/lemon-lime-svgs/actions/workflows/npm-publish.yml)\n[](https://github.com/ahaywood/lemon-lime-svgs/blob/main/LICENSE)\n[](https://www.typescriptlang.org/)\n[](https://github.com/ahaywood/lemon-lime-svgs)\n\nA zero-config SVG sprite generator. Convert individual SVG files into a single sprite file with TypeScript support.\n\n## Features\n\n- ๐ Simple CLI interface\n- ๐จ Generates SVG sprite from individual files\n- ๐ Creates TypeScript definitions\n- โก Zero-config setup\n- ๐ ๏ธ Customizable paths and options\n- ๐ฏ Preserves SVG attributes\n- ๐งน Removes fill attributes for CSS styling\n\n## Installation\n\n```bash\nnpm install lemon-lime-svgs --save-dev\n```\n\n## Quick Start\n\n1. Run the setup command:\n\n```bash\nnpx lemon-lime-svgs setup\n```\n\n2. Add your SVG files to the input directory (default: `./other/svg-icons`)\n\n3. Generate the sprite:\n\n```bash\nnpm run icons\n```\n\n4. (Optional) Install a framework-specific Icon component:\n\n```bash\nnpx lemon-lime-svgs component\n```\n\nThis will add an Icon component to your project that makes it easy to use your SVG sprites. If a component already exists at the specified location, you'll be asked if you want to overwrite it.\n\n## Configuration\n\n> **Note:** Starting from version 1.1.0, configuration is stored in package.json instead of .env. If you're upgrading from an earlier version, run `npx lemon-lime-svgs migrate` to move your configuration.\n>\n> The tool will automatically check if you have configuration set up. If not, it will prompt you to run the setup wizard. If you have configuration in an .env file but not in package.json, it will recommend running the migration script.\n>\n> During setup, you'll also be asked if you want to install an Icon component for your project. This saves you from running the component installation command separately.\n\nThe setup wizard will help you configure:\n\n- Input directory for SVG files\n- Output directory for the sprite\n- TypeScript types directory\n- Sprite and type definition filenames\n- Verbose logging\n- README generation\n\nAll settings are stored in your project's `package.json` file under the `lemonLimeSvgs` key and can be modified manually:\n\n```json\n{\n \"lemonLimeSvgs\": {\n \"inputDir\": \"other/svg-icons\",\n \"outputDir\": \"public/images/icons\",\n \"typesDir\": \"src/types\",\n \"spriteFilename\": \"sprite.svg\",\n \"typeFilename\": \"name.d.ts\",\n \"verbose\": false,\n \"generateReadme\": false\n }\n}\n```\n\n## Commands\n\n- `npx lemon-lime-svgs setup` - Interactive setup wizard\n- `npx lemon-lime-svgs setup --y` - Non-interactive setup using defaults\n- `npx lemon-lime-svgs` - Generate sprite file\n- `npm run icons` - Generate sprite (after setup)\n- `npx lemon-lime-svgs migrate` - Migrate configuration from .env to package.json\n- `npx lemon-lime-svgs component` - Install icon component for your framework\n\n## Setup Wizard Guide\n\nThe setup wizard (`npx lemon-lime-svgs setup`) walks you through configuring the package for your project. Here's what to expect during setup:\n\n> **Tip:** Use the `--y` flag (`npx lemon-lime-svgs setup --y`) to skip all prompts and use default values. This is useful for CI/CD environments or when you want a quick setup with standard configuration.\n\n### 1. Framework Selection\n\nChoose your framework from the following options:\n\n```\n1. Next.js (Pages Router)\n2. Next.js (App Router)\n3. Remix\n4. SvelteKit\n5. Astro\n6. React + Vite\n0. Custom configuration\n```\n\nThis selection pre-configures optimal paths for your specific framework.\n\n### 2. Configuration Questions\n\nAfter selecting a framework, you'll be asked to confirm or customize these settings:\n\n- **Input directory for SVG files**: Where your SVG icons are located\n- **Output directory for sprite**: Where the generated sprite file will be saved\n- **Directory for TypeScript types**: Where to save the TypeScript definitions\n- **Sprite filename**: Name of the generated SVG sprite file\n- **Type definition filename**: Name of the TypeScript definition file\n- **Enable verbose logging**: Whether to show detailed logs during generation\n- **Generate README**: Whether to create a README file in the output directory\n\n### 3. Package.json Updates\n\nThe ๐ช wizard will:\n\n- Add an `icons` script to your package.json (if it doesn't exist)\n- Add the `lemonLimeSvgs` configuration to your package.json\n\nIf these already exist, you'll be asked whether to overwrite them.\n\n### 4. Component Installation\n\nFinally, you'll be asked if you want to install an Icon component for your project:\n\n```\nWould you like to install an Icon component for your project? (y/N):\n```\n\nIf you answer yes, the wizard will detect your framework and install the appropriate component.\n\n## Component Installation\n\nThe `npx lemon-lime-svgs component` command helps you install a framework-specific Icon component that makes it easy to use your SVG sprites in your project.\n\n### Features\n\n- Automatically detects your project's framework (React, Svelte, or Astro)\n- Prompts for the component location\n- Provides overwrite protection for existing files\n- For Astro projects, offers to install additional components for React or Svelte\n\n### Usage\n\n```bash\nnpx lemon-lime-svgs component\n```\n\nThis will start an interactive prompt that guides you through the installation process:\n\n1. **Framework Selection**: Choose your framework (React, Svelte, or Astro)\n2. **Additional Framework** (Astro only): If using Astro, you can choose to install additional React or Svelte components\n3. **Component Path**: Specify where to install the component\n\n### Example Component Usage\n\n#### React\n\n```jsx\nimport Icon from \"./components/Icon\";\n\nfunction App() {\n return (\n \n \n \n
\n );\n}\n```\n\n#### Svelte\n\n```svelte\n\n\n\n\n```\n\n#### Astro\n\n```astro\n---\nimport Icon from '../components/Icon.astro';\n---\n\n\n\n```\n\n## Contributing\n\nPull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.\n\n## Versioning\n\nLemon Lime SVGs follows [Semantic Versioning](https://semver.org/) (SemVer):\n\n- **Major version** (X.0.0): Introduces breaking changes that require updates to your code\n- **Minor version** (0.X.0): Adds new features in a backward-compatible manner\n- **Patch version** (0.0.X): Includes backward-compatible bug fixes and minor improvements\n\nWe maintain a detailed [CHANGELOG.md](./CHANGELOG.md) to document all significant changes between versions.\n\n## License\n\n[GNU Lesser General Public License (LGPL)](./LICENSE.md)\n\n## Author\n\nAmy (Haywood) Dutton - [@ahaywood](https://github.com/ahaywood)\n\n## Framework-Specific Configurations\n\nLemon Lime SVGs provides optimized default configurations for popular frameworks:\n\n### Next.js (Pages Router)\n\n```json\n{\n \"lemonLimeSvgs\": {\n \"inputDir\": \"./other/svg-icons\",\n \"outputDir\": \"./public/images/icons\",\n \"typesDir\": \"./src/types/icons\",\n \"typeFilename\": \"icons.d.ts\"\n }\n}\n```\n\n### Next.js (App Router)\n\n```json\n{\n \"lemonLimeSvgs\": {\n \"inputDir\": \"./src/other/svg-icons\",\n \"outputDir\": \"./public/images/icons\",\n \"typesDir\": \"./src/types/icons\",\n \"typeFilename\": \"icons.d.ts\"\n }\n}\n```\n\n### Remix\n\n```json\n{\n \"lemonLimeSvgs\": {\n \"inputDir\": \"./other/svg-icons\",\n \"outputDir\": \"./public/images/icons\",\n \"typesDir\": \"./app/types/icons\",\n \"typeFilename\": \"icons.d.ts\"\n }\n}\n```\n\n### SvelteKit\n\n```json\n{\n \"lemonLimeSvgs\": {\n \"inputDir\": \"./other/svg-icons\",\n \"outputDir\": \"./static/images/icons\",\n \"typesDir\": \"./src\",\n \"typeFilename\": \"icons.d.ts\"\n }\n}\n```\n\n### Astro\n\n```json\n{\n \"lemonLimeSvgs\": {\n \"inputDir\": \"./other/svg-icons\",\n \"outputDir\": \"./public/images/icons\",\n \"typesDir\": \"./src\",\n \"typeFilename\": \"icons.d.ts\"\n }\n}\n```\n\n### React + Vite\n\n```json\n{\n \"lemonLimeSvgs\": {\n \"inputDir\": \"./other/svg-icons\",\n \"outputDir\": \"./public/images/icons\",\n \"typesDir\": \"./src/types\",\n \"typeFilename\": \"icons.d.ts\"\n }\n}\n```\n","readmeFilename":"README.md"}