{"_id":"@buun_group/precast-icons","name":"@buun_group/precast-icons","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@buun_group/precast-icons","version":"1.0.0","description":"A modern, minimal SVG icon library for React, Vue, Svelte and more","type":"module","author":{"name":"Sacha Roussakis-Notter"},"license":"MIT","homepage":"https://github.com/BuunGroup-Packages/npm-precast-icons#readme","bugs":{"url":"https://github.com/BuunGroup-Packages/npm-precast-icons/issues"},"repository":{"type":"git","url":"git+https://github.com/BuunGroup-Packages/npm-precast-icons.git","directory":"."},"publishConfig":{"access":"public"},"keywords":["icons","svg","react","vue","svelte","precast","ui","components"],"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"},"./react":{"types":"./dist/react/index.d.ts","import":"./dist/react/index.mjs","require":"./dist/react/index.js"},"./vue":{"types":"./dist/vue/index.d.ts","import":"./dist/vue/index.mjs","require":"./dist/vue/index.js"},"./svelte":{"types":"./dist/svelte/index.d.ts","import":"./dist/svelte/index.mjs","require":"./dist/svelte/index.js"},"./icons":{"types":"./dist/icons/index.d.ts","import":"./dist/icons/index.mjs","require":"./dist/icons/index.js"}},"scripts":{"generate-icons":"node scripts/build-icons.js","generate-manifest":"node scripts/generate-manifest.js","prebuild":"npm run generate-icons","build":"rollup -c && npm run generate-manifest","dev":"npm run generate-icons && rollup -c -w","test":"vitest","test:watch":"vitest --watch","lint":"eslint . --ext .ts,.tsx,.js,.jsx","lint:svg":"svglint lobe-icons/**/*.svg","typecheck":"tsc --noEmit","format":"prettier --write .","prepublishOnly":"npm run build","prepare":"husky"},"peerDependencies":{"react":">=16.8.0","svelte":">=3.0.0","vue":">=3.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"vue":{"optional":true},"svelte":{"optional":true}},"devDependencies":{"@eslint/js":"^9.0.0","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.6","@types/node":"^20.11.16","@types/react":"^18.2.52","@types/react-dom":"^18.2.18","eslint":"^9.0.0","eslint-config-prettier":"^10.1.8","eslint-plugin-react":"^7.33.2","eslint-plugin-react-hooks":"^5.0.0","eslint-plugin-react-refresh":"^0.4.5","husky":"^9.1.7","lint-staged":"^16.1.6","prettier":"^3.6.2","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^4.9.6","rollup-plugin-dts":"^6.1.0","rollup-plugin-svg":"^2.0.0","svglint":"^4.1.0","tslib":"^2.6.2","typescript":"^5.3.3","typescript-eslint":"^8.42.0","vitest":"^1.2.2","vue":"^3.4.15"},"_id":"@buun_group/precast-icons@1.0.0","gitHead":"60daa3db9af5e220a1408dd87305b135d0372788","_nodeVersion":"20.19.1","_npmVersion":"11.4.2","dist":{"integrity":"sha512-WfjIv2ddTnvgLNoNWRNn0ILI4vq+tRx5ji8g45tUC8ejs/GUpxq7Z9qNvVUx6yRHCdde/ZVLUEKA3EhOfs7ScA==","shasum":"68f14f5dc612d85da4f85981739626f0d6dd3030","tarball":"https://registry.npmjs.org/@buun_group/precast-icons/-/precast-icons-1.0.0.tgz","fileCount":20,"unpackedSize":57092344,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCrMvDTvlW4WE1uXEKJM32gUjFO/83UqiI6lHVdSueMFAIgFGpf8XlqQKju9PWIYPdPSLwR3vNYjb4vk87csgAobVo="}]},"_npmUser":{"name":"buun_group","email":"sacha.roussakis-notter@buungroup.com"},"directories":{},"maintainers":[{"name":"buun_group","email":"sacha.roussakis-notter@buungroup.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/precast-icons_1.0.0_1756866156178_0.1422336405147797"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-03T02:22:36.082Z","1.0.0":"2025-09-03T02:22:36.641Z","modified":"2025-09-03T02:22:36.899Z"},"maintainers":[{"name":"buun_group","email":"sacha.roussakis-notter@buungroup.com"}],"description":"A modern, minimal SVG icon library for React, Vue, Svelte and more","homepage":"https://github.com/BuunGroup-Packages/npm-precast-icons#readme","keywords":["icons","svg","react","vue","svelte","precast","ui","components"],"repository":{"type":"git","url":"git+https://github.com/BuunGroup-Packages/npm-precast-icons.git","directory":"."},"author":{"name":"Sacha Roussakis-Notter"},"bugs":{"url":"https://github.com/BuunGroup-Packages/npm-precast-icons/issues"},"license":"MIT","readme":"# Precast Icons\n\nA comprehensive SVG icon library optimized for modern web applications. Provides framework-agnostic icons with tree-shaking support, TypeScript definitions, and zero runtime dependencies.\n\n## Features\n\n- **Framework Agnostic** - Native support for React, Vue, Svelte, and vanilla JavaScript\n- **Optimized Bundle Size** - Tree-shakeable architecture ensures only imported icons are included\n- **Full Customization** - Complete control over size, color, stroke width, and styling\n- **Zero Dependencies** - No runtime dependencies for minimal overhead\n- **TypeScript Ready** - Comprehensive type definitions for all components and utilities\n- **Extensive Icon Set** - Over 4,000+ professionally designed icons available\n- **Monochrome Support** - Toggle between stroke and fill rendering modes\n\n## Architecture\n\n```mermaid\nflowchart TD\n    A[SVG Source Files] -->|Build Script| B[Icon Parser]\n    B --> C[TypeScript Definitions]\n    C --> D[Framework Implementations]\n    D --> E[React Components]\n    D --> F[Vue Components]\n    D --> G[Svelte Components]\n    D --> H[Vanilla JS]\n\n    E --> I[Tree-Shakeable Bundle]\n    F --> I\n    G --> I\n    H --> I\n\n    I --> J[Application Bundle]\n\n    style A fill:#f9f,stroke:#333,stroke-width:2px\n    style J fill:#9f9,stroke:#333,stroke-width:2px\n```\n\n## Installation\n\n```bash\nnpm install @precast/icons\n# or\nyarn add @precast/icons\n# or\npnpm add @precast/icons\n```\n\n## Usage\n\n### React\n\n```jsx\nimport { HomeIcon, SearchIcon, MenuIcon } from '@precast/icons/react';\n\nfunction MyComponent() {\n  return (\n    <div>\n      <HomeIcon size={24} color=\"blue\" />\n      <SearchIcon size={32} strokeWidth={1.5} />\n      <MenuIcon className=\"custom-class\" style={{ color: 'red' }} />\n    </div>\n  );\n}\n```\n\n#### Using the Icon component with dynamic icons\n\n```jsx\nimport { Icon } from '@precast/icons/react';\nimport { icons } from '@precast/icons';\n\nfunction DynamicIcon({ iconName }) {\n  return <Icon icon={icons[iconName]} size={24} />;\n}\n```\n\n#### Creating custom icons\n\n```jsx\nimport { createIcon } from '@precast/icons/react';\n\nconst CustomIcon = createIcon({\n  name: 'custom',\n  viewBox: '0 0 24 24',\n  content: [\n    {\n      tag: 'path',\n      attrs: {\n        d: 'M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z',\n      },\n    },\n  ],\n});\n\n// Use it like any other icon\n<CustomIcon size={24} color=\"green\" />;\n```\n\n### Vue\n\n```vue\n<template>\n  <div>\n    <HomeIcon :size=\"24\" color=\"blue\" />\n    <SearchIcon :size=\"32\" :stroke-width=\"1.5\" />\n    <MenuIcon class=\"custom-class\" />\n  </div>\n</template>\n\n<script setup>\nimport { HomeIcon, SearchIcon, MenuIcon } from '@precast/icons/vue';\n</script>\n```\n\n#### Creating custom Vue icons\n\n```javascript\nimport { createIcon } from '@precast/icons/vue';\n\nconst CustomIcon = createIcon({\n  name: 'custom',\n  viewBox: '0 0 24 24',\n  content: [\n    {\n      tag: 'path',\n      attrs: {\n        d: 'M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z',\n      },\n    },\n  ],\n});\n```\n\n### Svelte\n\n```svelte\n<script>\n  import { Icon, icons } from '@precast/icons/svelte';\n</script>\n\n<Icon icon={icons.home} size={24} color=\"blue\" />\n<Icon icon={icons.search} size={32} strokeWidth={1.5} />\n<Icon icon={icons.menu} class=\"custom-class\" />\n```\n\n### Vanilla JavaScript\n\n```javascript\nimport { icons, renderIconDefinition } from '@precast/icons';\n\n// Get SVG string\nconst svgString = renderIconDefinition(icons.home, {\n  size: 24,\n  color: 'blue',\n  strokeWidth: 2,\n});\n\n// Insert into DOM\ndocument.getElementById('icon-container').innerHTML = svgString;\n```\n\n## Icon Generation Process\n\n```mermaid\nsequenceDiagram\n    participant Dev as Developer\n    participant Build as Build Script\n    participant SVG as SVG Files\n    participant Gen as Generator\n    participant TS as TypeScript\n    participant Bundle as Bundle\n\n    Dev->>Build: npm run build\n    Build->>SVG: Read SVG files\n    SVG->>Gen: Parse SVG content\n    Gen->>Gen: Extract paths & attributes\n    Gen->>TS: Generate TypeScript definitions\n    TS->>Bundle: Compile components\n    Bundle->>Dev: Output dist/\n```\n\n## Available Icons\n\nThe library includes over 3,000 professionally designed icons covering various categories:\n\n### Common Icons\n\n- `home` - Home/house icon\n- `search` - Magnifying glass\n- `user` - User profile\n- `menu` - Hamburger menu\n- `heart` - Heart/favorite\n- `star` - Star/rating\n- `download` - Download arrow\n- `upload` - Upload arrow\n- `check` - Checkmark\n\n### Navigation\n\n- `chevronRight` - Right chevron arrow\n- `chevronLeft` - Left chevron arrow\n- `arrowUp` - Up arrow\n- `arrowDown` - Down arrow\n\n### Actions\n\n- `plus` - Plus/add icon\n- `minus` - Minus/subtract icon\n- `edit` - Edit/pencil icon\n- `trash` - Delete/trash icon\n\nView the complete icon list in the [icons directory](./src/icons/generated/)\n\n## Props\n\nAll icon components accept these props:\n\n| Prop          | Type               | Default          | Description                     |\n| ------------- | ------------------ | ---------------- | ------------------------------- |\n| `size`        | `number \\| string` | `24`             | Icon size (width and height)    |\n| `color`       | `string`           | `'currentColor'` | Icon color                      |\n| `strokeWidth` | `number \\| string` | `2`              | Stroke width for the icon paths |\n| `fill`        | `string`           | `'none'`         | Fill color                      |\n| `stroke`      | `string`           | `'currentColor'` | Stroke color                    |\n| `className`   | `string`           | `''`             | CSS class name                  |\n| `style`       | `object`           | `{}`             | Inline styles                   |\n\n## Advanced Usage\n\n### Creating Icon Definitions\n\n```javascript\nimport { createIconDefinition } from '@precast/icons';\n\nconst myIcon = createIconDefinition(\n  'myIcon',\n  ['M12 2L2 7v10c0 5.55 3.84 10.74 9 12'], // Array of path data\n  { viewBox: '0 0 24 24' } // Optional overrides\n);\n```\n\n### Custom Styling\n\nIcons use `currentColor` by default, making them easy to style with CSS:\n\n```css\n.my-icon {\n  color: #3b82f6;\n  transition: color 0.2s;\n}\n\n.my-icon:hover {\n  color: #2563eb;\n}\n```\n\n## TypeScript Support\n\nFull TypeScript support with exported types:\n\n```typescript\nimport type { IconDefinition, IconProps } from '@precast/icons';\nimport { HomeIcon } from '@precast/icons/react';\n\nconst MyIcon: React.FC<IconProps> = (props) => {\n  return <HomeIcon {...props} />;\n};\n```\n\n## Performance Characteristics\n\n```mermaid\ngraph LR\n    A[Import Icon] -->|Tree Shaking| B[Bundle Analysis]\n    B --> C{Used?}\n    C -->|Yes| D[Include in Bundle]\n    C -->|No| E[Exclude from Bundle]\n    D --> F[~200-400 bytes gzipped]\n\n    style A fill:#ffd,stroke:#333,stroke-width:2px\n    style F fill:#dfd,stroke:#333,stroke-width:2px\n    style E fill:#fdd,stroke:#333,stroke-width:2px\n```\n\n### Bundle Size\n\nThe library leverages tree-shaking to ensure optimal bundle sizes:\n\n| Import Type                 | Bundle Impact          |\n| --------------------------- | ---------------------- |\n| Single Icon                 | ~200-400 bytes gzipped |\n| 10 Icons                    | ~2-4 KB gzipped        |\n| 50 Icons                    | ~10-20 KB gzipped      |\n| All Icons (not recommended) | ~650 KB gzipped        |\n\n### Build Performance\n\n- Icon generation: ~0.4s for 3,000+ icons\n- TypeScript compilation: ~30s\n- Zero runtime overhead\n\n## Browser Support\n\n| Browser | Version |\n| ------- | ------- |\n| Chrome  | 88+     |\n| Firefox | 78+     |\n| Safari  | 14+     |\n| Edge    | 88+     |\n| Opera   | 74+     |\n\nNote: Legacy browser support (IE11) possible with appropriate polyfills.\n\n## Development Workflow\n\n```mermaid\nflowchart LR\n    A[Add SVG to assets/] --> B[Run npm run generate-icons]\n    B --> C[Icons generated in src/icons/generated/]\n    C --> D[Run npm run build]\n    D --> E[Test in examples/]\n    E --> F[Submit PR]\n\n    style A fill:#bbf,stroke:#333,stroke-width:2px\n    style F fill:#bfb,stroke:#333,stroke-width:2px\n```\n\n### Adding New Icons\n\n1. Place SVG files in `assets/` directory\n2. Run `npm run generate-icons`\n3. Build the library with `npm run build`\n4. Test integration in example applications\n\n### Contributing\n\nContributions are welcome. Please ensure:\n\n1. SVG files are optimized (SVGO recommended)\n2. Icons follow consistent 24x24 viewBox\n3. Stroke-based designs preferred over fill\n4. Tests pass with `npm test`\n5. Examples work correctly\n\n## License\n\nMIT License - see LICENSE file for details\n\n## Project Structure\n\n```\nprecast-icons/\n├── assets/              # Source SVG files\n├── dist/                # Built library output\n│   ├── react/          # React components\n│   ├── vue/            # Vue components\n│   ├── svelte/         # Svelte components\n│   └── icons/          # Core icon definitions\n├── examples/            # Framework examples\n│   ├── react-example.tsx\n│   ├── vue-example.vue\n│   ├── svelte-example.svelte\n│   └── html-example.html\n├── scripts/             # Build scripts\n│   └── build-icons.js  # Icon generation script\n└── src/                 # Source code\n    ├── icons/          # Icon definitions\n    ├── react/          # React implementation\n    ├── vue/            # Vue implementation\n    └── svelte/         # Svelte implementation\n```\n\n## Icon Manifest & AI Schema\n\nFor AI tools and documentation purposes, we provide a comprehensive manifest:\n\n- **Manifest**: `/dist/manifest.json` - Complete icon catalog with usage examples\n- **JSON Schema**: `/dist/schema.json` - Machine-readable schema for AI tools\n\n```bash\n# Access the manifest\ncurl https://unpkg.com/@precast/icons@latest/dist/manifest.json\n\n# Use in AI tools or documentation generators\nfetch('@precast/icons/dist/manifest.json')\n  .then(res => res.json())\n  .then(manifest => {\n    console.log(`${manifest.totalIcons} icons available`);\n    console.log('Categories:', manifest.categories);\n  });\n```\n\n## Disclaimer\n\n⚠️ **Icon Removal Policy**: If any companies want their icons removed from this library, please reach out to **support@buungroup.com**. We respect intellectual property rights and will promptly address any concerns.\n\n## Acknowledgments\n\nInspired by modern icon libraries with focus on performance and developer experience.\n","readmeFilename":"README.md","_rev":"1-544b01c2ff12e4ff6275779fa0d6633b"}