mx-icons 1.0.10 → 1.0.14

package/README.md

@@ -1,127 +1,193 @@
-<div align="center">
-  
-  ![Preview](/imgs/mxicons-banner-ts.png)
-
-![npm version](https://img.shields.io/npm/v/mx-icons)
-![npm downloads](https://img.shields.io/npm/dm/mx-icons)
-![license](https://img.shields.io/github/license/ig-imanish/mx-icons)
-![bundle size](https://img.shields.io/bundlephobia/minzip/mx-icons)
-
-**A modern, lightweight React icon library with beautiful SVG icons**
-
-Built with React • Optimized for Production
-
-[Live Demo](https://mx-icons.vercel.app/) • [Browse Icons](#-available-icons) • [Documentation](#-usage) • [Contributing](#-contributing)
-
-</div>
-
----
-
-## ✨ Features
-
-- 🎨 **Multiple Variants** - Every icon comes in outline, solid, and mini (16px) versions
-- ⚡ **Lightweight & Fast** - Tree-shakeable, only imports what you use
-- 🔧 **Fully Customizable** - Control size, color, and all SVG attributes
-- 📦 **Zero Dependencies** - Only React as a peer dependency (18.x or 19.x)
-- 💅 **Modern Design** - Clean, professional icons optimized for light-mode interfaces
-- 📱 **Responsive** - Built-in support for different sizes (24px standard, 16px mini)
-
-## 📦 Installation
-
-```bash
-npm install mx-icons
-```
-
-## 🚀 Quick Start
-
-```jsx
-import { NoteTextLinear } from "mx-icons";
-
-function App() {
-  return (
-    <div>
-      <NoteTextLinear />
-
-      <NoteTextLinear size={24} color="#292D32" />
-    </div>
-  );
-}
-```
-
-## 🎨 Props & Customization
-
-All icon components accept the following props:
-
-| Prop        | Type               | Default     | Description                                |
-| ----------- | ------------------ | ----------- | ------------------------------------------ |
-| `size`      | `number \| string` | `24`        | Icon width and height (px or any CSS unit) |
-| `color`     | `string`           | `"#292D32"` | Icon color (any CSS color)                 |
-| `className` | `string`           | `""`        | Additional CSS classes                     |
-
-### Run Preview Locally
-
-```bash
-# Clone the repository
-git clone https://github.com/ig-imanish/mx-icons.git
-cd mx-icons
-
-# Install dependencies
-npm install
-
-# Start the preview app
-npm run dev
-```
-
-Open [http://localhost:5173](http://localhost:5173) in your browser.
-
-## 🤝 Contributing
-
-We welcome contributions! Here's how you can help make MX Icons even better:
-
-### Ways to Contribute
-
-- 🐛 **Report Bugs** - [Open an issue](https://github.com/ig-imanish/mx-icons/issues)
-- 💡 **Request Icons** - Tell us which icons you need
-- 🎨 **Add New Icons** - Follow our [contribution guidelines](https://github.com/ig-imanish/mx-icons/blob/main/CONTRIBUTING.md)
-- 📖 **Improve Docs** - Help make the documentation better
-- ⭐ **Star the Repo** - Show your support!
-- 🐦 **Share** - Tweet about MX Icons
-
-### Quick Start for Contributors
-
-1. Fork the repository
-2. Create a feature branch: `git checkout -b feature/new-icon`
-3. Make your changes
-4. Test locally: `npm run dev`
-5. Submit a pull request
-
-For detailed guidelines, check out our [CONTRIBUTING.md](https://github.com/ig-imanish/mx-icons/blob/main/CONTRIBUTING.md)
-
-## 📄 License
-
-MIT License © 2025 [MX Icons Contributors](https://github.com/ig-imanish/mx-icons/graphs/contributors)
-
-Free to use in personal and commercial projects. See [LICENSE](./LICENSE) for details.
-
-## 📊 Project Stats
-
-![Contributors](https://img.shields.io/github/contributors/ig-imanish/mx-icons)
-![Last Commit](https://img.shields.io/github/last-commit/ig-imanish/mx-icons)
-![Issues](https://img.shields.io/github/issues/ig-imanish/mx-icons)
-![Pull Requests](https://img.shields.io/github/issues-pr/ig-imanish/mx-icons)
-
-## 🔗 Links
-
-- **📦 NPM Package:** [npmjs.com/package/mx-icons](https://www.npmjs.com/package/mx-icons)
-- **🌐 Live Preview:** [ig-imanish.github.io/mx-icons](https://ig-imanish.github.io/mx-icons)
-- **📚 Documentation:** [github.com/ig-imanish/mx-icons](https://github.com/ig-imanish/mx-icons)
-- **🐛 Issues:** [github.com/ig-imanish/mx-icons/issues](https://github.com/ig-imanish/mx-icons/issues)
-- **💬 Discussions:** [github.com/ig-imanish/mx-icons/discussions](https://github.com/ig-imanish/mx-icons/discussions)
-
-<div align="center">
-  
-  **Made with ❤️ by the open-source community**
-  
-  If you find this project useful, please consider giving it a ⭐ on GitHub!
-  
-</div>
+<div align="center">
+  
+  ![Preview](/imgs/mxicons-banner-ts.png)
+
+![npm version](https://img.shields.io/npm/v/mx-icons)
+![npm downloads](https://img.shields.io/npm/dm/mx-icons)
+![license](https://img.shields.io/github/license/ig-imanish/mx-icons)
+![bundle size](https://img.shields.io/bundlephobia/minzip/mx-icons)
+
+**A modern, lightweight React icon library with beautiful SVG icons**
+
+Built with React • Optimized for Production
+
+[Live Demo](https://mx-icons.vercel.app/) • [Browse Icons](#-available-icons) • [Documentation](#-usage) • [Contributing](#-contributing)
+
+</div>
+
+---
+
+## ✨ Features
+
+- 🎨 **Multiple Variants** - Every icon comes in outline, solid, and mini (16px) versions
+- ⚡ **Lightweight & Fast** - Tree-shakeable, only imports what you use
+- 🔧 **Fully Customizable** - Control size, color, and all SVG attributes
+- 📦 **Zero Dependencies** - Only React as a peer dependency (18.x or 19.x)
+- 💅 **Modern Design** - Clean, professional icons optimized for light-mode interfaces
+- 📱 **Responsive** - Built-in support for different sizes (24px standard, 16px mini)
+
+## 📦 Installation
+
+```bash
+npm install mx-icons
+```
+
+## 🚀 Quick Start
+
+```jsx
+import { NoteTextLinear } from "mx-icons";
+
+function App() {
+  return (
+    <div>
+      <NoteTextLinear />
+
+      <NoteTextLinear size={24} color="#292D32" />
+    </div>
+  );
+}
+```
+
+## 🎨 Props & Customization
+
+All icon components accept the following props:
+
+| Prop        | Type               | Default     | Description                                |
+| ----------- | ------------------ | ----------- | ------------------------------------------ |
+| `size`      | `number \| string` | `24`        | Icon width and height (px or any CSS unit) |
+| `color`     | `string`           | `"#292D32"` | Icon color (any CSS color)                 |
+| `className` | `string`           | `""`        | Additional CSS classes                     |
+
+### Run Preview Locally
+
+```bash
+# Clone the repository
+git clone https://github.com/ig-imanish/mx-icons.git
+cd mx-icons
+
+# Install dependencies
+npm install
+
+# Start the preview app
+npm run dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) in your browser.
+
+## 🤝 Contributing
+
+We welcome contributions from developers of all skill levels! Here's how you can help make MX Icons even better:
+
+### Ways to Contribute
+
+- 🐛 **Report Bugs** - Found an issue? [Open a bug report](https://github.com/ig-imanish/mx-icons/issues/new)
+- 💡 **Request Icons** - Tell us which icons you need for your projects
+- 🎨 **Add New Icons** - Contribute new icons following our design guidelines
+- 📖 **Improve Documentation** - Help make our docs clearer and more comprehensive
+- 🔧 **Fix Issues** - Browse [open issues](https://github.com/ig-imanish/mx-icons/issues) and submit fixes
+- ⭐ **Star the Repo** - Show your support and help us grow!
+- 🐦 **Share** - Spread the word about MX Icons
+
+### Quick Start for Contributors
+
+1. **Fork** the repository
+2. **Clone** your fork: `git clone https://github.com/YOUR_USERNAME/mx-icons.git`
+3. **Install** dependencies: `npm install`
+4. **Create** a feature branch: `git checkout -b feature/new-icon`
+5. **Make** your changes and test: `npm run dev`
+6. **Lint** your code: `npm run lint`
+7. **Build** the library: `npm run build:lib`
+8. **Commit** with a clear message: `git commit -m "feat(icons): add calendar icon"`
+9. **Push** to your fork: `git push origin feature/new-icon`
+10. **Submit** a pull request
+
+### Development Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/ig-imanish/mx-icons.git
+cd mx-icons
+
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Run linter
+npm run lint
+
+# Build library
+npm run build:lib
+```
+
+### Adding a New Icon
+
+Icons should follow these guidelines:
+- **Format**: Optimized SVG
+- **Size**: 24x24px (standard) or 16x16px (mini)
+- **Variants**: Provide Linear, Bold, and Mini versions
+- **Color**: Use `currentColor` for easy customization
+- **Naming**: PascalCase with variant suffix (e.g., `CalendarLinear`, `CalendarBold`)
+
+Example icon component:
+
+```jsx
+import React from "react";
+import Icon from "../../Icon";
+
+export const CalendarLinear = (props) => (
+  <Icon {...props}>
+    <path d="..." fill="none" stroke="currentColor" strokeWidth="1.5" />
+  </Icon>
+);
+```
+
+### Commit Message Format
+
+We follow [Conventional Commits](https://www.conventionalcommits.org/):
+
+```
+feat(icons): add calendar icon with all variants
+fix(modal): resolve scrollbar display issue
+docs(readme): update installation guide
+```
+
+### Pull Request Guidelines
+
+- Provide a clear description of your changes
+- Include screenshots for visual changes
+- Reference related issues (e.g., "Closes #123")
+- Ensure all tests pass and linting is clean
+- Update documentation if needed
+
+For comprehensive guidelines, check out our [**CONTRIBUTING.md**](https://github.com/ig-imanish/mx-icons/blob/main/CONTRIBUTING.md)
+
+## 📄 License
+
+MIT License © 2025 [MX Icons Contributors](https://github.com/ig-imanish/mx-icons/graphs/contributors)
+
+Free to use in personal and commercial projects. See [LICENSE](./LICENSE) for details.
+
+## 📊 Project Stats
+
+![Contributors](https://img.shields.io/github/contributors/ig-imanish/mx-icons)
+![Last Commit](https://img.shields.io/github/last-commit/ig-imanish/mx-icons)
+![Issues](https://img.shields.io/github/issues/ig-imanish/mx-icons)
+![Pull Requests](https://img.shields.io/github/issues-pr/ig-imanish/mx-icons)
+
+## 🔗 Links
+
+- **📦 NPM Package:** [npmjs.com/package/mx-icons](https://www.npmjs.com/package/mx-icons)
+- **🌐 Live Preview:** [ig-imanish.github.io/mx-icons](https://ig-imanish.github.io/mx-icons)
+- **📚 Documentation:** [github.com/ig-imanish/mx-icons](https://github.com/ig-imanish/mx-icons)
+- **🐛 Issues:** [github.com/ig-imanish/mx-icons/issues](https://github.com/ig-imanish/mx-icons/issues)
+- **💬 Discussions:** [github.com/ig-imanish/mx-icons/discussions](https://github.com/ig-imanish/mx-icons/discussions)
+
+<div align="center">
+  
+  **Made with ❤️ by the open-source community**
+  
+  If you find this project useful, please consider giving it a ⭐ on GitHub!
+  
+</div>

package/dist/components/facebook/FacebookBold.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import Icon from "../../Icon.js";
+function FacebookBold({
+  size = 24,
+  color = "#292D32",
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      size,
+      color,
+      fill: "currentColor",
+      viewBox: "0 0 512 512",
+      className,
+      ...props,
+      children: /* @__PURE__ */ jsx("path", { d: "M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z", fill: "currentColor" })
+    }
+  );
+}
+export {
+  FacebookBold as default
+};

package/dist/components/facebook/FacebookLinear.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import Icon from "../../Icon.js";
+function FacebookLinear({
+  size = 24,
+  color = "#292D32",
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      size,
+      color,
+      fill: "currentColor",
+      className,
+      ...props,
+      children: /* @__PURE__ */ jsx("path", { d: "M13 19.938A8.001 8.001 0 0 0 12 4a8 8 0 0 0-1 15.938V14H9v-2h2v-1.654c0-1.337.14-1.822.4-2.311A2.726 2.726 0 0 1 12.536 6.9c.382-.205.857-.328 1.687-.381.329-.021.755.005 1.278.08v1.9H15c-.917 0-1.296.043-1.522.164a.727.727 0 0 0-.314.314c-.12.226-.164.45-.164 1.368V12h2.5l-.5 2h-2v5.938zM12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z", fill: "currentColor" })
+    }
+  );
+}
+export {
+  FacebookLinear as default
+};

package/dist/components/facebook/index.js

@@ -0,0 +1,21 @@
+import FacebookBold from "./FacebookBold.js";
+import FacebookLinear from "./FacebookLinear.js";
+const variants = [
+  {
+    variant: "bold",
+    slug: "bold",
+    Component: FacebookBold,
+    componentName: "FacebookBold"
+  },
+  {
+    variant: "linear",
+    slug: "linear",
+    Component: FacebookLinear,
+    componentName: "FacebookLinear"
+  }
+];
+export {
+  FacebookBold,
+  FacebookLinear,
+  variants
+};

package/dist/components/linkedin/LinkedInBold.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import Icon from "../../Icon.js";
+function LinkedInBold({
+  size = 24,
+  color = "#292D32",
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      size,
+      color,
+      fill: "currentColor",
+      viewBox: "0 0 448 512",
+      className,
+      ...props,
+      children: /* @__PURE__ */ jsx("path", { d: "M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z", fill: "currentColor" })
+    }
+  );
+}
+export {
+  LinkedInBold as default
+};

package/dist/components/linkedin/LinkedInLinear.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import Icon from "../../Icon.js";
+function LinkedInLinear({
+  size = 24,
+  color = "#292D32",
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      size,
+      color,
+      fill: "currentColor",
+      className,
+      ...props,
+      children: /* @__PURE__ */ jsx("path", { d: "M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v14h14V5H5zm2.5 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm-1 1h2v7.5h-2V10zm5.5.43c.584-.565 1.266-.93 2-.93 2.071 0 3.5 1.679 3.5 3.75v4.25h-2v-4.25a1.75 1.75 0 0 0-3.5 0v4.25h-2V10h2v.43z", fill: "currentColor" })
+    }
+  );
+}
+export {
+  LinkedInLinear as default
+};

package/dist/components/linkedin/index.js

@@ -0,0 +1,21 @@
+import LinkedInLinear from "./LinkedInLinear.js";
+import LinkedInBold from "./LinkedInBold.js";
+const variants = [
+  {
+    variant: "bold",
+    slug: "bold",
+    Component: LinkedInBold,
+    componentName: "LinkedInBold"
+  },
+  {
+    variant: "linear",
+    slug: "linear",
+    Component: LinkedInLinear,
+    componentName: "LinkedInLinear"
+  }
+];
+export {
+  LinkedInBold,
+  LinkedInLinear,
+  variants
+};

package/dist/index.js

@@ -950,6 +950,8 @@ import { variants as variants$eP } from "./components/twitch/index.js";
 import { variants as variants$eQ } from "./components/mail-02/index.js";
 import { variants as variants$eR } from "./components/cancel-circle/index.js";
 import { variants as variants$eS } from "./components/checkmark-circle-02/index.js";
+import { variants as variants$eT } from "./components/linkedin/index.js";
+import { variants as variants$eU } from "./components/facebook/index.js";
 import { default as default3 } from "./components/icon-24-support/Icon24SSupportBold.js";
 import { default as default4 } from "./components/icon-24-support/Icon24SSupportBroken.js";
 import { default as default5 } from "./components/icon-24-support/Icon24SSupportBulk.js";
@@ -6362,6 +6364,10 @@ import { default as default5411 } from "./components/cancel-circle/CancelCircleL
 import { default as default5412 } from "./components/cancel-circle/CancelCircleBold.js";
 import { default as default5413 } from "./components/checkmark-circle-02/CheckmarkCircle02Linear.js";
 import { default as default5414 } from "./components/checkmark-circle-02/CheckmarkCircle02Bold.js";
+import { default as default5415 } from "./components/linkedin/LinkedInBold.js";
+import { default as default5416 } from "./components/linkedin/LinkedInLinear.js";
+import { default as default5417 } from "./components/facebook/FacebookBold.js";
+import { default as default5418 } from "./components/facebook/FacebookLinear.js";
 const icons = [
   {
     name: "24-support",
@@ -11117,6 +11123,16 @@ const icons = [
     name: "checkmark-circle-02",
     slug: "checkmark-circle-02",
     variants: variants$eS
+  },
+  {
+    name: "linkedin",
+    slug: "linkedin",
+    variants: variants$eT
+  },
+  {
+    name: "facebook",
+    slug: "facebook",
+    variants: variants$eU
   }
 ];
 export {
@@ -13013,6 +13029,8 @@ export {
   default1907 as EyeSlashOutline,
   default1908 as EyeSlashTwotone,
   default1913 as EyeTwotone,
+  default5417 as FacebookBold,
+  default5418 as FacebookLinear,
   default1914 as FatrowsBold,
   default1915 as FatrowsBroken,
   default1916 as FatrowsBulk,
@@ -13955,6 +13973,8 @@ export {
   default2783 as LinkSquareOutline,
   default2784 as LinkSquareTwotone,
   default2790 as LinkTwotone,
+  default5415 as LinkedInBold,
+  default5416 as LinkedInLinear,
   default2791 as LocationAddBold,
   default2792 as LocationAddBroken,
   default2793 as LocationAddBulk,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mx-icons",
-  "version": "1.0.10",
+  "version": "1.0.14",
   "description": "Beautiful hand-crafted SVG icons for React - light mode only",
   "type": "module",
   "main": "./dist/index.js",
@@ -45,19 +45,12 @@
     "build": "vite build",
     "build:lib": "vite build --config vite.lib.config.js",
     "generate": "node scripts/generate-icons.js",
-    "prepublishOnly": "npm run build:lib",
     "lint": "eslint .",
     "preview": "vite preview"
   },
-  "dependencies": {
-    "@vercel/analytics": "^1.5.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^19.1.1"
-  },
   "devDependencies": {
     "@eslint/js": "^9.36.0",
     "@types/react": "^19.1.16",
-    "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^5.0.4",
     "eslint": "^9.36.0",
     "eslint-plugin-react-hooks": "^5.2.0",