{"_id":"@blairwitch/conjure-icons","name":"@blairwitch/conjure-icons","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.2":{"name":"@blairwitch/conjure-icons","version":"0.0.2","description":"CLI tool to generate React Icon components from SVG files","type":"module","bin":{"conjure-icons":"dist/cli.js"},"main":"./dist/index.js","types":"./dist/index.d.ts","scripts":{"build":"tsup","publish:packages":"npm publish --access public"},"dependencies":{"commander":"^11.1.0","node-html-parser":"^6.1.11","prettier":"^3.1.0","react":"^18.2.0","@types/react":"^18.2.45"},"devDependencies":{"typescript":"^5.3.3","tsup":"^8.0.1","@types/node":"^20.10.4","@changesets/cli":"^2.27.1"},"engines":{"node":">=14.0.0"},"keywords":["svg","react","icons","cli"],"license":"MIT","_id":"@blairwitch/conjure-icons@0.0.2","gitHead":"c3829b93c6f8545501a3dbc7ac622bb0de544481","_nodeVersion":"22.9.0","_npmVersion":"10.8.3","dist":{"integrity":"sha512-M6QkQ78cys0m3782x9CzpMSVnVMcE49P+utBM9+lmD1ZGymzRnCO0soXYQF8nAvh+odvDJ/3pBj2UgpCwt4o8w==","shasum":"6aca6f6c246f6df076c16c961c65183eacc77d42","tarball":"https://registry.npmjs.org/@blairwitch/conjure-icons/-/conjure-icons-0.0.2.tgz","fileCount":5,"unpackedSize":19371,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdc3znoKGFvzfRQXR1pFnFAiZtuOiOdLL00XVIq4qRtAIhAICx++fQoa/jpoIaLqoSrBxVnBwaRI4lOTOtjsZ4Um+L"}]},"_npmUser":{"name":"theblairwitch","email":"eblair.mckee@gmail.com"},"directories":{},"maintainers":[{"name":"theblairwitch","email":"eblair.mckee@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/conjure-icons_0.0.2_1733211760561_0.11950736150418972"},"_hasShrinkwrap":false}},"time":{"created":"2024-12-03T07:42:40.457Z","0.0.2":"2024-12-03T07:42:40.729Z","modified":"2024-12-03T07:42:41.027Z"},"maintainers":[{"name":"theblairwitch","email":"eblair.mckee@gmail.com"}],"description":"CLI tool to generate React Icon components from SVG files","keywords":["svg","react","icons","cli"],"license":"MIT","readme":"# @blairwitch/conjure-icons\n\nA CLI tool and library to conjure fully typed React Icon components from SVG files with proper Typescript support, and CSS custom properties --because why not?\n\n## Features\n\n- ✨ Converts SVG files to React components\n- 🎯 Generates TypeScript types and IconMap\n- 🎨 Configurable styling with CSS variables\n- 📦 Can be used as a CLI tool or library\n- 🔄 Handles kebab-case to PascalCase conversion\n- 🎁 Generates index file for easy importing\n- 💪 Maintains SVG viewBox and structure\n- 🔧 Fully typed with TypeScript\n\n## Installation\n\n```bash\n# Install globally to use as a CLI tool\nnpm install -g @blairwitch/conjure-icons\n\n# Or install locally in your project\nnpm install @blairwitch/conjure-icons --save-dev\n```\n\n## Usage\n\n### CLI Usage\n\n```bash\nconjure-icons -i <input-directory> -o <output-directory>\n```\n\n#### Options\n\n- `-i, --input <directory>`: Directory containing SVG files (required)\n- `-o, --output <directory>`: Output directory for generated components (required)\n- `-v, --version`: Display version number\n- `-h, --help`: Display help information\n\n#### Example\n\n```bash\nconjure-icons -i ./assets/icons -o ./src/icons\n```\n\nwill output:\n\n```\noutput-directory/\n├── icons/          # Individual icon components\n│   ├── CheckIcon.tsx\n│   ├── CloseIcon.tsx\n│   └── ...\n├── types/              # TypeScript type definitions\n│   └── icon-types.ts        # Contains IconName type\n├── utils/\n│   └── icon-map.ts     # Maps icon names to components\n└── index.ts           # Exports everything\n```\n\n### Library Usage\n\nYou can also use the package programmatically in your code:\n\n```typescript\nimport { generateIcons } from \"@blairwitch/conjure-icons\";\n\nawait generateIcons({\n  inputDir: \"./assets/icons\",\n  outputDir: \"./src/icons\"\n});\n```\n\n### Using Generated Icons\n\n#### Direct Component Usage\n\n```tsx\nimport { CheckIcon, CloseIcon } from \"./icons\";\n\nfunction MyComponent() {\n  return <CheckIcon />;\n}\n```\n\n#### Using the IconMap\n\n```tsx\nimport { IconMap, type IconName } from \"./icons\";\n\n// Type-safe icon name\nconst iconName: IconName = \"check\";\n\nfunction DynamicIcon({ name }: { name: IconName }) {\n  const Icon = IconMap[name];\n  return <Icon className=\"icon-wrapper\" />;\n}\n```\n\n### Styling Icons\n\nThe generated icons are designed to be flexible with styling:\n\n```css\n/* Size control - icons fill their container */\n.icon-wrapper {\n  width: 24px;\n  height: 24px;\n}\n\n/* Color control */\n.icon-success {\n  /* For filled icons */\n  color: green;\n\n  /* For stroked icons */\n  --icon-stroke: #00ff00;\n}\n\n/* Using with Tailwind */\n<div className=\"w-6 h-6 text-green-500\">\n  <CheckIcon />\n</div>\n```\n\n#### Styling Properties\n\n- Icons use `width: 100%` and `height: 100%` to fill their container\n- Fill colors use `currentColor` (controlled via CSS `color` property)\n- Stroke colors use `var(--icon-stroke, inherit)` (falls back to inherited color)\n","readmeFilename":"README.md"}