npm package: @mayankjha07/modern-icons
Description: A modern icon pack for web and app development.
Author: Mayank Jha
Latest version: 0.0.1

# @mayankjha07/modern-icons

A modern icon pack designed for web and app development, providing a wide range of icons in various styles and types, optimized for React, Vue, and direct HTML usage.

## Features

- **Multiple Styles:** Icons available in `Colored`, `Filled`, and `Outline` styles.
- **Diverse Types:** Icons offered in `Normal`, `Badge`, `Round`, and `Square` shapes.
- **Framework Support:** Ready-to-use components for React (JavaScript & TypeScript) and Vue (JavaScript & TypeScript).
- **HTML Integration:** Direct SVG files for easy embedding in HTML.
- **Modular Imports:** Optimized for tree-shaking and efficient bundling.

## Installation

```bash
npm install @mayankjha07/modern-icons
# or
yarn add @mayankjha07/modern-icons
```

## Usage

Icons are categorized into `icons` (general), `social-icons`, and `system-design-icons`. Each category further organizes icons by `Style` (Colored, Filled, Outline) and `Type` (Normal, Badge, Round, Square).

### React

React components are available in both JavaScript (`.jsx`) and TypeScript (`.tsx`).

**Importing:**

```jsx
// JavaScript (JSX)
import { Facebook } from '@mayankjha07/modern-icons/react/js/social-icons/Colored/Normal';
import { Computer } from '@mayankjha07/modern-icons/react/js/system-design-icons/Filled/Round';
import { Plus, Minus } from '@mayankjha07/modern-icons/react/js/icons/Outline/Square';

// TypeScript (TSX)
import { Facebook } from '@mayankjha07/modern-icons/react/ts/social-icons/Colored/Normal';
import { Computer } from '@mayankjha07/modern-icons/react/ts/system-design-icons/Filled/Round';
import { Plus, Minus } from '@mayankjha07/modern-icons/react/ts/icons/Outline/Square';
```

**Example Usage:**

```jsx
import React from 'react';
import { Facebook } from '@mayankjha07/modern-icons/react/js/social-icons/Colored/Normal';
import { Computer } from '@mayankjha07/modern-icons/react/js/system-design-icons/Filled/Round';
import { Plus } from '@mayankjha07/modern-icons/react/js/icons/Outline/Square';

const MyReactComponent = () => {
  return (
    <div>
      <h1>React Icons</h1>

      <h2>Social Icons</h2>
      <Facebook width="32" height="32" /> {/* Colored Normal Facebook */}
      <Facebook width="48" height="48" color="blue" /> {/* Filled Round Facebook, color prop will override currentColor */}

      <h2>System Design Icons</h2>
      <Computer width="32" height="32" /> {/* Filled Round Computer */}
      <Computer width="48" height="48" color="green" /> {/* Outline Square Computer, color prop will override currentColor */}

      <h2>General Icons</h2>
      <Plus width="24" height="24" color="red" /> {/* Outline Square Plus, color prop will override currentColor */}
    </div>
  );
};

export default MyReactComponent;
```

**Styling React Icons:**

- **`width` and `height`:** Control the dimensions of the icon.
- **`color`:** For `Filled` and `Outline` styles, `currentColor` is used by default, meaning the icon will inherit the text color of its parent. You can override this with the `color` prop or by setting the CSS `color` property on the parent element. `Colored` icons have a predefined color, but you can still override it with the `color` prop.
- **Other SVG Props:** You can pass any standard SVG attributes as props (e.g., `strokeWidth`, `className`).

### Vue

Vue components are available in both JavaScript (`.vue`) and TypeScript (`.vue` with `<script lang="ts">`).

**Importing:**

```vue
<script>
// JavaScript
import { Facebook } from '@mayankjha07/modern-icons/vue/js/social-icons/Colored/Normal';
import { Computer } from '@mayankjha07/modern-icons/vue/js/system-design-icons/Filled/Round';
import { Plus, Minus } from '@mayankjha07/modern-icons/vue/js/icons/Outline/Square';

// TypeScript
import { Facebook } from '@mayankjha07/modern-icons/vue/ts/social-icons/Colored/Normal';
import { Computer } from '@mayankjha07/modern-icons/vue/ts/system-design-icons/Filled/Round';
import { Plus, Minus } from '@mayankjha07/modern-icons/vue/ts/icons/Outline/Square';

export default {
  components: {
    Facebook,
    Computer,
    Plus,
    Minus,
  },
  // ...
}
</script>
```

**Example Usage:**

```vue
<template>
  <div>
    <h1>Vue Icons</h1>

    <h2>Social Icons</h2>
    <Facebook :width="32" :height="32" />
    <Facebook :width="48" :height="48" color="blue" />

    <h2>System Design Icons</h2>
    <Computer :width="32" :height="32" />
    <Computer :width="48" :height="48" color="green" />

    <h2>General Icons</h2>
    <Plus :width="24" :height="24" color="red" />
  </div>
</template>

<script>
import { Facebook } from '@mayankjha07/modern-icons/vue/js/social-icons/Colored/Normal';
import { Computer } from '@mayankjha07/modern-icons/vue/js/system-design-icons/Filled/Round';
import { Plus } from '@mayankjha07/modern-icons/vue/js/icons/Outline/Square';

export default {
  components: {
    Facebook,
    Computer,
    Plus,
  },
};
</script>
```

**Styling Vue Icons:**

- **`width` and `height`:** Control the dimensions of the icon using props.
- **`color`:** Similar to React, `currentColor` is used for `Filled` and `Outline` styles. You can pass a `color` prop to override it or set the CSS `color` property on the parent. `Colored` icons have a predefined color, but can be overridden.
- **Other SVG Props:** You can pass any standard SVG attributes as props.

### HTML

For direct HTML usage, you can embed the raw SVG content or use `<img>` tags pointing to the generated HTML files.

**Direct SVG Embedding (Recommended for full control):**

You can copy the content of the `.html` files from the `dist/html` directory and embed them directly into your HTML. This gives you full control over styling via CSS.

Example (content from `dist/html/social-icons/Colored/Normal/facebook.html`):

```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="#1877F2">
  <path d="M12 0C6.477 0 2 4.477 2 10c0 5.29 3.844 9.69 8.89 10.39v-7.39H7.5V10h3.39V7.5c0-3.39 2.07-5.25 5.09-5.25 1.45 0 2.7.11 3.06.16v3.34h-2c-1.65 0-1.97.78-1.97 1.93V10h3.72l-.6 3.01h-3.12v7.39C18.156 19.69 22 15.29 22 10c0-5.523-4.477-10-10-10z"/>
</svg>
```

**Using `<img>` tags (Limited Styling):**

You can reference the generated `.html` files (which contain only the SVG) using `<img>` tags. However, styling options will be limited.

```html
<!-- For a Colored Normal Facebook icon -->
<img src="./node_modules/@mayankjha07/modern-icons/dist/html/social-icons/Colored/Normal/facebook.html" alt="Facebook Icon" width="32" height="32">

<!-- For an Outline Square Plus icon -->
<img src="./node_modules/@mayankjha07/modern-icons/dist/html/icons/Outline/Square/plus.html" alt="Plus Icon" width="24" height="24">
```

**Styling HTML Icons:**

- **Direct SVG Embedding:** When embedding SVG directly, you can use CSS to style the SVG elements (e.g., `fill`, `stroke`, `width`, `height`).
- **`<img>` tags:** Styling is limited to `width` and `height` attributes. `fill` and `stroke` cannot be controlled via CSS on the `<img>` tag itself.

## Icon Categories and Structure

All icons are organized under the `dist` directory, then by framework (`react`, `vue`, `html`), language (`js`, `ts`), category (`icons`, `social-icons`, `system-design-icons`), style (`Colored`, `Filled`, `Outline`), and type (`Normal`, `Badge`, `Round`, `Square`).

For example, a `Filled` `Round` `Computer` icon for React in TypeScript would be located at:
`dist/react/ts/system-design-icons/Filled/Round/Computer.tsx`

## Contributing

Feel free to contribute by adding new icons, styles, or improving existing ones. Please ensure your contributions adhere to the existing structure and conventions.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.