msr-icons 0.0.1 → 1.0.0

package/README.md

@@ -1,10 +1,9 @@
 # msr-icons
-
-A lightweight, production-ready React SVG icon library with 100+ pre-built icons. Perfect for modern web applications.
+A lightweight, production-ready React SVG icon library with **380+ pre-built icons**. Perfect for modern web applications.
 
 ## Features
 
-- ✨ **100+ SVG Icons** – Social media, tech stack, UI, utilities, and custom icons
+- ✨ **380+ SVG Icons** – Files, UI, brands, social, tech stack, utilities, and more
 - 🎨 **Customizable** – Control color, size, and styling via props
 - 📦 **Tree-shakeable** – Import only what you need
 - ⚡ **Optimized** – Built with Vite for fast dev/build
@@ -28,21 +27,35 @@ pnpm add msr-icons
 import { Icon } from 'msr-icons';
 
 export default function App() {
-  return <Icon name="SvgFacebook" size={32} color="#286bc2" />;
+  return <Icon name="Facebook" size={32} color="#286bc2" />;
 }
 ```
 
+### Listing All Icon Names
+
+If you want to inspect all available icon component names (for docs, autocomplete hints, or dynamic selection), you can list the exported keys:
+
+```jsx
+import * as Icons from 'msr-icons';
+
+const iconNames = Object
+  .keys(Icons)
+  .filter((key) => key !== 'Icon'); // omit the wrapper if you only need raw icons
+
+console.log(iconNames);
+```
+
 ### Importing Individual Icons
 
 ```jsx
-import { SvgFacebook, SvgGithub, SvgTwitter } from 'msr-icons';
+import { Facebook, Github, Twitter } from 'msr-icons';
 
 export default function App() {
   return (
     <div>
-      <SvgFacebook color="#286bc2" onClick={() => alert('Facebook')} />
-      <SvgGithub color="#000" />
-      <SvgTwitter color="#1DA1F2" isColored />
+      <Facebook fillColor="#286bc2" onClick={() => alert('Facebook')} />
+      <Github fillColor="#000" />
+      <Twitter fillColor="#1DA1F2" isColored />
     </div>
   );
 }
@@ -50,77 +63,124 @@ export default function App() {
 
 ## Icon Props
 
-### Common Props
+### Standard Props (Available on all icons)
 
-- **`color`** (string) – SVG fill/stroke color. Default varies by icon.
+- **`fillColor`** (string) – SVG fill/stroke color. Default varies by icon.
 - **`isColored`** (boolean) – Use brand color or custom color. Default: `true`
 - **`onClick`** (function) – Click handler
-- **`classes`** (string) – CSS class names
-- **`className`** (string) – React className (for Icon wrapper)
-- **`style`** (object) – Inline styles
+- **`onHover`** (function) – Mouse enter event handler
+- **`backgroundColor`** (string) – Background color for the SVG container
+- **`style`** (object) – Inline styles object (spread with standard props)
+- **`className`** (string) – CSS class names for styling
 
 ### Icon-Specific Props
 
-- **`SvgWIFI`** – `isDot` (boolean), `is4` (boolean)
-- **`SvgSnapchat`** – `backgroundColor` (string)
-- **`SvgLogin/SvgLogout`** – `lineWidth` (string)
-- **`SvgInstagram`** – `onHover` (function)
+- **`WIFI`** – `isDot` (boolean), `is4Lines` (boolean), `strokeWidth` (string)
+- **`Snapchat`** – `backgroundColor` (string)
+- **`Login/Logout`** – `lineWidth` (string)
+- **`Reload`** – `lineWidth` (string)
+- **`EditBox`** – `strokeWidth` (string)
 
-## Available Icons
-
-**Social Media:** Facebook, Twitter, Instagram, LinkedIn, GitHub, TikTok, Snapchat, WhatsApp, Telegram, Discord, Reddit, Pinterest, Viber, Vine
-
-**Tech Stack:** JavaScript, React, NodeJS, Python, Java, PHP, Docker, AWS, Azure, Google Cloud
-
-**UI Components:** Settings, Search, Menu, Trash, Edit, Download, Upload, Refresh, Reload, Send, Bell, Search, and more
+### Usage Examples
 
-**Utilities:** Mail, Phone, Map, Location, Printer, Shield, Globe, Internet, Disk
-
-... and **100+ more icons**!
-
-## Development
+```jsx
+// Basic usage with custom color
+<Facebook fillColor="#286bc2" />
+
+// With event handlers
+<Twitter 
+  fillColor="#1DA1F2" 
+  onClick={() => console.log('clicked')}
+  onHover={() => console.log('hovered')}
+/>
+
+// With styling
+<Github 
+  fillColor="#000" 
+  backgroundColor="#f0f0f0"
+  style={{ padding: '10px', borderRadius: '4px' }}
+  className="my-icon"
+/>
+
+// With custom colors and brand colors
+<Instagram isColored fillColor="#E1306C" />  // Custom color
+<Instagram isColored />  // Brand color (default #cc39a4)
+<Instagram />  // Default currentColor
+```
 
-### Build
+## Available Icons
 
-```bash
-npm run build
-```
+**Files & Formats:** File, Folder variants, CSV, JSON, XML, Markdown, Excel, PowerPoint, Config, DB, RAR, SVG, WEBP, YAML, TOML
 
-### Dev Server
+**UI Components:** Settings, Search, Menu, Trash, Edit, Download/Upload, Refresh/Reload, Send, Bell, Alerts, Charts, Toggles, Inputs, Layouts, Themes, Accessibility
 
-```bash
-npm run dev
-```
+**Brands & Platforms:** OpenAI, Perplexity, Claude, Gemini, Hugging Face, MongoDB, PostgreSQL, Elasticsearch, RabbitMQ, Redis, Solana, Ethereum, Bitcoin, MetaMask, Twilio, Sendgrid, Mailchimp, Intercom, StatusPage, PagerDuty, Facebook, Twitter, Instagram, GitHub, LinkedIn, Discord, Slack, Figma, Google, AWS, Azure, Docker, and more
 
-### Lint
+**Utilities:** Mail, Phone, Map, Location, Printer, Shield, Globe, Internet, Disk, Lock/Unlock, Key, Clipboard, QR/Barcode, Scanner, Flip/Rotate, Zoom
 
-```bash
-npm lint
-```
+... and **380+ icons in total**.
 
 ## Project Structure
 
 ```
 src/
-├── SvgComponents.js    # All icon exports
-├── Icon.jsx            # Icon wrapper component
-├── Icon.css            # Icon styling
-├── index.js            # Main entry point
-└── App.jsx             # Demo app
+├── icons/
+│   ├── files.jsx      # File & format icons
+│   ├── ui.jsx         # UI & controls
+│   └── brands.jsx     # Brand & platform icons
+├── Icon.jsx           # Icon wrapper component
+├── Icon.css           # Icon styling
+├── index.js           # Library entry
+└── main.jsx           # Dev entry
 ```
 
-## Publishing to NPM
-
-This package is configured for NPM publishing:
+### Self-Explaining Props
+All props use clear, descriptive names:
+- `fillColor` instead of `color` - explicitly indicates it controls the fill color
+- `backgroundColor` - for container background
+- `onHover` - for mouse hover events
+- `strokeWidth` - for SVG stroke thickness
 
-```bash
-npm publish --access public
+### Styling Support
+Each icon supports comprehensive styling:
+```jsx
+<Facebook
+  fillColor="#286bc2"
+  backgroundColor="rgba(255,255,255,0.1)"
+  style={{ 
+    padding: '8px',
+    borderRadius: '50%',
+    cursor: 'pointer'
+  }}
+  onHover={() => {/* handle hover */}}
+  onClick={() => {/* handle click */}}
+/>
 ```
 
-Ensure `dist/` is built before publishing:
+### Tree-Shakeable
+Import only the icons you need - unused icons are automatically removed during build:
 
-```bash
-npm run build && npm publish
+```jsx
+// Only Facebook and Github are bundled
+import { Facebook, Github } from 'msr-icons';
+```
+
+### ESM and CommonJS Support
+The library is built with both formats:
+- **ESM** (ES Modules) - `dist/index.js` - for modern bundlers
+- **CJS** (CommonJS) - `dist/index.cjs` - for Node.js environments
+- **TypeScript Definitions** - `dist/index.d.ts` - for type support
+
+### Export Map
+Configured in `package.json` for optimal resolution:
+```json
+"exports": {
+  ".": {
+    "types": "./dist/index.d.ts",
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs"
+  }
+}
 ```
 
 ## License

package/dist/index.d.ts

@@ -0,0 +1,103 @@
+import React from 'react';
+
+export interface IconProps {
+  /** Icon fill/stroke color. Default: "#000" */
+  fillColor?: string;
+  /** Whether to use the color or fallback to currentColor. Default: true */
+  isColored?: boolean;
+  /** Click handler */
+  onClick?: (e: React.MouseEvent<SVGSVGElement>) => void;
+  /** Background color for the SVG container */
+  backgroundColor?: string;
+  /** Hover handler */
+  onHover?: (e: React.MouseEvent<SVGSVGElement>) => void;
+  /** Additional inline styles */
+  style?: React.CSSProperties;
+  /** Additional CSS class name */
+  className?: string;
+  /** Stroke width for stroke-based icons */
+  strokeWidth?: number | string;
+}
+
+// Social Media Icons
+export const SvgFacebook: React.FC<IconProps>;
+export const SvgWIFI: React.FC<IconProps>;
+export const SvgDiscord: React.FC<IconProps>;
+export const SvgInstagram: React.FC<IconProps>;
+export const SvgLinkedIn: React.FC<IconProps>;
+export const SvgPinterest: React.FC<IconProps>;
+export const SvgReddit: React.FC<IconProps>;
+export const SvgSnapchat: React.FC<IconProps>;
+export const SvgTwitter: React.FC<IconProps>;
+export const SvgWhatsApp: React.FC<IconProps>;
+
+// UI Icons
+export const SvgDoubleCheck: React.FC<IconProps>;
+export const SvgEditBox: React.FC<IconProps>;
+export const SvgEX: React.FC<IconProps>;
+export const SvgEye: React.FC<IconProps>;
+export const SvgLogin: React.FC<IconProps>;
+export const SvgLogout: React.FC<IconProps>;
+export const SvgNotEye: React.FC<IconProps>;
+export const SvgReload: React.FC<IconProps>;
+export const SvgRefresh: React.FC<IconProps>;
+export const SvgSend: React.FC<IconProps>;
+export const SvgTrash: React.FC<IconProps>;
+export const SvgTrashBig: React.FC<IconProps>;
+
+// Tech Stack Icons
+export const SvgHTML: React.FC<IconProps>;
+export const SvgCSS: React.FC<IconProps>;
+export const SvgJS: React.FC<IconProps>;
+export const SvgNodeJS: React.FC<IconProps>;
+export const SvgReact: React.FC<IconProps>;
+
+// Navigation Icons
+export const SvgChevronDown: React.FC<IconProps>;
+export const SvgChevronLeft: React.FC<IconProps>;
+export const SvgChevronRight: React.FC<IconProps>;
+export const SvgChevronUp: React.FC<IconProps>;
+export const SvgPlaySkipBack: React.FC<IconProps>;
+export const SvgPlay: React.FC<IconProps>;
+export const SvgPause: React.FC<IconProps>;
+export const SvgSkipToStart: React.FC<IconProps>;
+export const SvgSkipToEnd: React.FC<IconProps>;
+
+// Additional Icons
+export const SvgGithub: React.FC<IconProps>;
+export const SvgFolder: React.FC<IconProps>;
+export const SvgMenu: React.FC<IconProps>;
+export const SvgSettings: React.FC<IconProps>;
+
+// New Tier 2 Icons
+export const SvgAlert: React.FC<IconProps>;
+export const SvgMic: React.FC<IconProps>;
+export const SvgCamera: React.FC<IconProps>;
+export const SvgPaste: React.FC<IconProps>;
+export const SvgCheckCircleFilled: React.FC<IconProps>;
+export const SvgXCircleFilled: React.FC<IconProps>;
+export const SvgBack: React.FC<IconProps>;
+export const SvgForward: React.FC<IconProps>;
+export const SvgSort: React.FC<IconProps>;
+export const SvgMailOpen: React.FC<IconProps>;
+export const SvgFax: React.FC<IconProps>;
+export const SvgDocument: React.FC<IconProps>;
+export const SvgDocumentAdd: React.FC<IconProps>;
+export const SvgDocumentCheck: React.FC<IconProps>;
+export const SvgDocumentDownload: React.FC<IconProps>;
+export const SvgDocumentUpload: React.FC<IconProps>;
+export const SvgArchiveAdd: React.FC<IconProps>;
+export const SvgArchiveRemove: React.FC<IconProps>;
+export const SvgMailRead: React.FC<IconProps>;
+export const SvgMailUnread: React.FC<IconProps>;
+export const SvgHeadphones: React.FC<IconProps>;
+export const SvgSpeaker: React.FC<IconProps>;
+export const SvgEye3: React.FC<IconProps>;
+export const SvgEye4: React.FC<IconProps>;
+export const SvgMenu2: React.FC<IconProps>;
+export const SvgMenu3: React.FC<IconProps>;
+
+// Export all icons as a record
+export const icons: Record<string, React.FC<IconProps>>;
+
+export default icons;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "msr-icons",
   "private": false,
-  "version": "0.0.1",
+  "version": "1.0.0",
   "type": "module",
-  "description": "A lightweight, production-ready React SVG icon library with 100+ pre-built icons.",
+  "description": "A lightweight, production-ready React SVG icon library with 300+ pre-built icons.",
   "keywords": [
     "icons",
     "react",
@@ -12,21 +12,21 @@
     "library",
     "ui"
   ],
-  "author": "",
+  "author": "Michael Scharff",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": ""
+    "url": "https://github.com/Minka1902/msr-icons.git"
   },
-  "homepage": "",
   "bugs": {
-    "url": ""
+    "url": "https://github.com/Minka1902/msr-icons/issues"
   },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit"
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -57,6 +57,7 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "typescript": "^5.6.3",
     "vite": "^7.2.4"
   }
-}
+}