open-index/open-npm huggingface dataset:
npm package: @muhmdraouf/eslint-config
Description: ESLint and TypeScript configuration.
Author: Mohammed Abdel Raouf
Latest version: 1.0.9

# @muhmdraouf/eslint-config
ESLint and TypeScript configuration.

[![Tests and Release](https://github.com/MuhmdRaouf/eslint-config/actions/workflows/release.yml/badge.svg)](https://github.com/MuhmdRaouf/eslint-config/actions/workflows/release.yml)
[![npm version](https://badge.fury.io/js/%40muhmdraouf%2Feslint-config.svg)](https://badge.fury.io/js/%40muhmdraouf%2Feslint-config)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
## Usage

```sh
yarn add eslint @muhmdraouf/eslint-config --dev
```

In `.eslintrc`:

```json
{ 
  "extends": "@muhmdraouf/eslint-config"
} 
```

In `tsconfig.json`:

```json
{
  "extends": "@muhmdraouf/eslint-config/tsconfig"
}
```
npm package: @muhmdraouf/eslint-config-react
Description: ESLint and TypeScript configuration for React.
Author: Mohammed Abdel Raouf
Latest version: 1.0.9

# @muhmdraouf/eslint-config-react
ESLint and TypeScript configuration for React.

[![Tests and Release](https://github.com/MuhmdRaouf/eslint-config-react/actions/workflows/release.yml/badge.svg)](https://github.com/MuhmdRaouf/eslint-config-react/actions/workflows/release.yml)
[![npm version](https://badge.fury.io/js/%40muhmdraouf%2Feslint-config-react.svg)](https://badge.fury.io/js/%40muhmdraouf%2Feslint-config-react)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
## Usage

```sh
yarn add eslint @muhmdraouf/eslint-config-react --dev
```

In `.eslintrc`:

```json
{ 
  "extends": "@muhmdraouf/eslint-config-react"
} 
```

In `tsconfig.json`:

```json
{
  "extends": "@muhmdraouf/eslint-config-react/tsconfig"
}
```
npm package: @muhmdraouf/eslint-config-react-native
Description: ESLint and TypeScript configuration for React Native.
Author: Mohammed Abdel Raouf
Latest version: 1.0.9

# @muhmdraouf/eslint-config-react-native
ESLint and TypeScript configuration for React native.

[![Tests and Release](https://github.com/MuhmdRaouf/eslint-config-react-native/actions/workflows/release.yml/badge.svg)](https://github.com/MuhmdRaouf/eslint-config-react-native/actions/workflows/release.yml)
[![npm version](https://badge.fury.io/js/%40muhmdraouf%2Feslint-config-react-native.svg)](https://badge.fury.io/js/%40muhmdraouf%2Feslint-config-react-native)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
## Usage

```sh
yarn add eslint @muhmdraouf/eslint-config-react-native --dev
```

In `.eslintrc`:

```json
{ 
  "extends": "@muhmdraouf/eslint-config-react-native"
} 
```

In `tsconfig.json`:

```json
{
  "extends": "@muhmdraouf/eslint-config-react-native/tsconfig"
}
```
npm package: @muhortov/prettier-config
Description: Prettier configuration
Author: Peter Mukhortov
Latest version: 1.0.4

# Prettier config

Configuration for the [Prettier](https://prettier.io) code formatter.

## Installation

```sh
yarn add --dev @muhortov/prettier-config
```

## Usage

To enable prettier in your project add the `prettier` key to your `package.json` file:

```js
{
  // ...
  "prettier": "@muhortov/prettier-config"
}
```

To be able to format your files add the following command to the `package.json` file

```js
{
  // ...
  "scripts": {
    // ...
    "format": "prettier --write '**/*.{ts,tsx,js,jsx,vue,json,html,css,sass,scss,less,md,yaml,yml}'"
  }
}
```

You can now run `yarn format` to format your code.
npm package: @muhsinmk/my-button-library
Description: A React button component library using Tailwind CSS
Author: Muhsin MK
Latest version: 1.0.0

# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
npm package: @muhtalipdede/echo-mcp-server
Description: A simple echo server using Model Context Protocol
Author: Muhtalip Dede
Latest version: 0.0.6

# Echo MCP Server

This folder contains an example implementation of an MCP (Model Context Protocol) server using Node.js. The server includes a simple tool called `echo_tool` that echoes back the input provided by the client.

## Getting Started

1. Install dependencies:
   ```bash
   npm install
   ```

2. Run the server:
   ```bash
   npm start
   ```

## Usage

The `echo_tool` accepts a string input and returns the same string as output. This is useful for testing and understanding the basic functionality of an MCP server.
npm package: @muhzi/react-native-user-avatar
Description: React native user avatar component with progressive loading and text fallback support
Author: Muhsin.k
Latest version: 1.0.7

<h1 align="center">
react-native-user-avatar
</h1>
<div align="center">

![](https://img.shields.io/npm/v/@muhzi/react-native-user-avatar.svg?style=flat)
![](https://img.shields.io/npm/dt/@muhzi/react-native-user-avatar.svg)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)
![](https://img.shields.io/npm/l/@muhzi/react-native-user-avatar.svg)

</div>

<h4 align="center">A react native user avatar component with progressive loading and text fallback support.</h4>

<p align="center" >
   <img alt="screenshot" src="https://user-images.githubusercontent.com/12408980/82775711-1b4b6480-9e66-11ea-96fc-907dfbbd8277.png" title="iOS" width="400">
</p>

### Demo

You can find [Snack](https://expo.io/) expo example [here](https://snack.expo.io/@muhsin/react-native-user-avatar)

### Installation

```sh
npm install @muhzi/react-native-user-avatar
#OR
yarn add @muhzi/react-native-user-avatar
```

### How to use?

```js
import UserAvatar from "@muhzi/react-native-user-avatar";
```

Simply place a `<UserAvatar/>` component.

```js
<UserAvatar
  userName="John Samuel"
  size={80}
  backgroundColor="#0be881"
  src="https://images.pexels.com/photos/4403924/pexels-photo-4403924.jpeg"
  active
/>
```

### Props

<table class="table">
<thead><tr>
  <th>Name</th><th>Default</th><th>Type</th><th>Description</th>
</tr></thead>
<tbody>
  <tr><td>userName</td>
    <td> - </td>
    <td> String </td>
    <td>The user name that will be used to compute user initials.</td></tr>
  <tr><td>initialName</td>
    <td> - </td>
    <td> String </td>
    <td>Force the displayed initials by overriding the computed ones.</td></tr>
  <tr><td>src</td>
    <td> - </td>
    <td> String </td>
    <td>Path of image.</td></tr>
  <tr><td>active</td>
    <td> false </td>
    <td> Boolean </td>
    <td>Whether the user is active or not.(Show active circle around avatar)</td></tr>
  <tr><td>textColor</td>
    <td> #FFFF </td>
    <td> String </td>
    <td>The font color used to render the user initials</td></tr>
    <tr><td>activeCircleColor</td>
    <td> #27ae60 </td>
    <td> String </td>
    <td>Background color active circle</td></tr>
  <tr><td>size</td>
    <td> 64 </td>
    <td> Number </td>
    <td>The avatar size</td></tr>
  <tr><td>rounded</td>
    <td> true </td>
     <td> Boolean </td>
    <td>True if the avatar must be rounded.</td></tr>
     <tr><td>loaderColor</td>
    <td> #aaa69d </td>
    <td> String </td>
    <td>The color of loader</td></tr>
     <tr><td>backgroundColor</td>
    <td> - </td>
    <td> String </td>
    <td>The avatar background color to use if no image is provided</td></tr>
    <tr><td>backgroundColors</td>
    <td> ['#575fcf', '#ef5777', '#0be881'] </td>
    <td> Array </td>
    <td>Array of background colors to choose from, if no background color is specified</td></tr>
   </tbody>
</table>

### Author

[Muhsin K](https://muhzi.com/)

### License

[MIT](./LICENSE)
npm package: @mui-admin-kit/core
Description: This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
Latest version: 0.0.25

# Getting Started with Create React App

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `yarn start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

### `yarn test`

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `yarn build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `yarn eject`

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**

If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).
npm package: @mui-ext/core
Description: Material UI (mui) extend library
Author: Jiankai Zeng
Latest version: 0.0.11

# @mui-ext/core

[![version](https://img.shields.io/npm/v/@mui-ext/core?style=for-the-badge)](https://www.npmjs.com/package/@mui-ext/core) 
[![dw](https://img.shields.io/npm/dt/@mui-ext/core?style=for-the-badge)](https://www.npmjs.com/package/@mui-ext/core)

mui 扩展的核心部分（公共组件与 hooks） 。

[说明文档](https://gitee.com/janpoem/mui-ext/tree/master/docs/core)

## 组件索引

- Loading - 可在任意项目本地化细化配置的公共 Loading 组件
  - setupLoading, useLoadingConfig
- Aspect - 按照特定 ratio 来显示特定宽高比的区域，虽然 CSS3 增加了 `aspect-ratio` ，但整体增加了 CSS 操作复杂维度，不如写成 React 组件易于理解和使用
  - AspectOuter, AspectInner
  - useRatio, useRatioStyle
- Flex - FlexBox，基于 Flex 布局，解决了 CSS 传统布局（position模式和 display: block 模式）很多缺陷和不足，成为目前使用量最大的基础 CSS 属性，逐个逐个 CSS 来写 Flex 实在是既累赘又无意义。 mui 虽然提供了一个 `Stack` 实现类型的功能，然还是单独做一个 Flex 的组件，以便于针对不同平台环境的适配。
  - FlexChild
  - useJustifyContent, useFlexGrowShrink, useFlexGap
- StackDialog
  - setupStackDialog, useStackDialogConfig
  - useInitStackDialog
- NonIdealState
  - setupNonIdealState, useNonIdealStateConfig
- text
  - HighlightText
  - PriceDisplay
  - UnknownDisplay
- SimpleTable - mui table 组件的简单版

## Hooks

- useClsx
- useSnackbarNotice

## Utils 

- numeric
  - isNumeric,
  - filterNumeric, filterNumericWithMin, filterNumericWithMax, filterNumericWithMinMax
  - random
  - round10, floor10, ceil10
- react
  - mountOrClone, extractErrorMessage, stopDomEvent
  - 重要类型（因为很多组件都需要这部分类型，特别列出）
    - `ReactComponent<P>` - `React.ComponentType<P>` 别名
    - `ReactComponentProps<P>` - 仅包含一个 `children` 属性声明
    - `HtmlComponentProps<P>` - 包含 `children`, `style`, `className` 三个属性
    - `MuiComponentProps<P>` - `HtmlComponentProps<P>` 基础上增加 `sx` 属性，该输入为穿透 `mui` 和 `emotion.js` 的重要属性，通过 `sx` 声明的样式，可引用 `mui.theme`，并进入 `emotion.js` 样式优化处理序列
    - `ComponentOrElement<P>` - 对任意的 `React.ComponentType` 或 `ReactElement` 的抽象概括，既可以是一个组件声明（`FunctionComponent` or `ClassComponent`），也可以是一个 Element 实例（`ReactElement`, `ReactNode` 之列），用于描述 `mountOrClone` 之参数
npm package: @mui-ext/hookform
Description: react-hook-form @ Material UI (mui)
Author: Jiankai Zeng
Latest version: 0.0.9

# @mui-ext/hookform

[![gitee-repo](https://img.shields.io/static/v1?label=Gitee&message=https://gitee.com/janpoem/mui-ext&color=555555&logo=gitee&style=for-the-badge&labelColor=C71D23)](https://gitee.com/janpoem/mui-ext)
[![version](https://img.shields.io/npm/v/@mui-ext/hookform?style=for-the-badge)](https://www.npmjs.com/package/@mui-ext/hookform) 
[![dt](https://img.shields.io/npm/dt/@mui-ext/hookform?style=for-the-badge)](https://www.npmjs.com/package/@mui-ext/hookform)

react-hook-form@mui

该版本仅作为早期预览版本，并用于某项目中使用，所以测试代码未完善。

## 组件索引

- HookForm - 将 react-hook-form 表单声明包装成组件，支持泛型（但 hookform 的泛型其实意义不大）。
    - 生成的表单不使用 form 结构（为了和 RN 的使用保持一致的可替换性结构）。
    - setupHookForm - 全局表单配置
    - SubmitRow - 表单的提交按钮行（可选添加 reset、cancel 等，还可添加其他内容）。
    - FormField - react-hook-form Control 的实现，
    - FormFieldError - react-hook-form 的表单字段验证错误提示（目前仅支持 hook form rules 的验证）
    - Label - 针对表单的 Label 预留 I18n 扩展
    - useHookForm - 引用表单上下文，主要用于自行扩展表单组件使用
    - FormGenerator - 配置化表单生成器，上述的一切都没有绑定固定的标签结构，仅包含组件自身的基础内容，FormGenerator
      负责将所有组件整合。
- InputRegistry - 全局输入控件管理（该实例默认不对外直接访问，请通过下面的方面）
    - isRegInput, regInput, getRegInput

### 最基础的用法

```typescript jsx
import { HookForm, SubmitRow } from '@mui-ext/hookform';

<HookForm>
  {({ register }) => {
    return (
      <>
        <div>
          <input type="text" {...register('username')} />
        </div>
        <div>
          <input type="password" {...register('password')} />
        </div>
        <SubmitRow/>
      </>
    )
  }}
</HookForm>
```

### 结合 FormField 组件

```typescript jsx
import { HookForm, SubmitRow, FormField } from '@mui-ext/hookform';

<HookForm>
  <FormField name={'username'} label={'username'} input={'text'} rules={{ required: true }}/>
  <FormField name={'password'} label={'password'} input={'password'} rules={{ required: true }}/>
  <SubmitRow/>
</HookForm>
```

### useHookForm

```typescript
export type HookFormContext<T extends FieldValues = FieldValues> = {
  autoId: string,
  config: HookFormConfig,
  customErrors: HookFormCustomErrors<T>,
  setCustomError: (field: keyof T | string, err: HookFormCustomError | null) => void,
  setCustomErrors: (errs: HookFormCustomErrors<T>) => void,
  loading: boolean,
  setLoading: Dispatch<SetStateAction<boolean>>,
  gap: number | string,
  generalErrorKey: string,
  formSubmit: () => (e: BaseSyntheticEvent) => Promise<void>,
  validateReturn: typeof validateReturn
} & UseFormReturn<T>;
```

### FormGenerator

仅使用 fields

```typescript jsx
import { FormGenerator } from '@mui-ext/hookform';

// 已包含 SubmitRow
<FormGenerator
  fields={[
    { name: 'username', label: 'username', input: 'text' },
    { name: 'password', label: 'password', input: 'password' },
  ]}
/>
```

结合 layout

```typescript jsx
import { FormGenerator } from '@mui-ext/hookform';

<FormGenerator
  fields={[
    { name: 'username', label: 'username', input: 'text' },
    { name: 'password', label: 'password', input: 'password' },
  ]}
  layout={[
    ['username', 'password'],
  ]}
/>
```
npm package: @mui-extra/icons
Description: This library offers <a href="https://mui.com/api/svg-icon/#main-content">@mui SvgIcons</a> for <a href="https://mui.com">material ui v5</a>
Author: Michael Mannseicher
Latest version: 0.0.98

#@mui-extra/icons

This library offers <a href="https://mui.com/api/svg-icon/#main-content">@mui SvgIcons</a> for <a href="https://mui.com">material ui v5</a>

```shell
#with npm
npm i @mui-extra/icons --save

#with yarn
yarn add @mui-extra/icons
```
includes assets with svg files and a meta.json with additional information.

<a href="https://mansi1.github.io/mdi-react-icons/mui" style="font-size: 25px">DEMO</a>

Source icons from https://materialdesignicons.com <a href="https://github.com/Templarian/MaterialDesign/blob/master/LICENSE">license</a>.
_"Thank you for your valuable work"_


for material-ui v4 <a href="https://www.npmjs.com/package/@material-ui-extra/icons/">click here</a>



This repo is brought to you by:

<table>
  <tbody>
    <tr>
      <td align="center">
        <img width="150" height="150"
        src="https://avatars2.githubusercontent.com/u/12079044?s=150&v=4"/>
        <br/>
        <a href="https://github.com/mansi1">Michael Mannseicher</a>
        <br/>
        <a href="https://michael.mannseicher.com">Website</a>
      </td>
    </tr>
  </tbody>
</table>
npm package: @mui-magic/styles
Description: Material-UI Styles - The styling solution of Material-UI.
Author: Material-UI Team
Latest version: 4.11.3
Deprecated: false

# @mui-magic/styles

You can leverage our styling solution, even if you are not using our components.

## Installation

Install the package in your project directory with:

```sh
// with npm
npm install @mui-magic/styles

// with yarn
yarn add @mui-magic/styles
```

## Documentation

[The documentation](https://material-ui.com/styles/basics/)
npm package: @mui-magic/system
Description: Material-UI System - Design system for Material-UI.
Author: Material-UI Team
Latest version: 4.11.3
Deprecated: false

# @mui-magic/system

Style props functions for building powerful design systems.

## Installation

Install the package in your project directory with:

```sh
// with npm
npm install @mui-magic/system

// with yarn
yarn add @mui-magic/system
```

## Documentation

[The documentation](https://material-ui.com/system/basics/)
npm package: @mui-symbols-material/w100
Description: Material Design symbols distributed as SVG React components.
Author: Aleksandr Rubtsov
Latest version: 0.4.1

<!-- markdownlint-disable-next-line -->
<p align="center">
  <a href="https://mui.com/core/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="MUI Core logo"></a>
</p>

# @mui-symbols-material/w100

This package provides the Google [Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols) with weight 100 converted to [`SvgIcon`](https://mui.com/material-ui/api/svg-icon/) components.

## Installation

Install the package in your project directory with:

<!-- #default-branch-switch -->

```bash
npm install @mui-symbols-material/w100
```
<!-- #default-branch-switch -->

To install icons of a different weight, simply replace `100` with the desired weight in the installation command.

These components use the Material UI's [SvgIcon](https://mui.com/material-ui/api/svg-icon) component to render the SVG path for each icon.

If you are not already using Material UI in your project, you can add it with:

```bash
npm install @mui/material
```

## Usage

Once installed, you can use the icons in your React components:

```jsx
import React from 'react';
import { 
  FavoriteOutlined, 
  FavoriteRounded, 
  FavoriteSharp, 
  FavoriteFilledOutlined, 
  FavoriteFilledRounded, 
  FavoriteFilledSharp,
} from '@mui-symbols-material/w100'; // Replace 100 with your desired weight

/**
 * Renders all variants of the favorite icon from Material Symbols.
 */
function MyComponent() {
  return (
    <>
      <FavoriteOutlined />
      <FavoriteRounded />
      <FavoriteSharp />
      <FavoriteFilledOutlined />
      <FavoriteFilledRounded />
      <FavoriteFilledSharp />
    </>
  );
}
```

## Styles

1. **Outlined**: These icons have a distinct outline, providing a clear and crisp appearance.
2. **Rounded**: These icons have rounded edges, offering a softer and more subtle appearance.
3. **Sharp**: These icons have sharp edges, giving a bold and striking appearance.

## Filled Version

Each icon also comes in a filled version, providing a different aesthetic and allowing for greater versatility in their usage.

## Weights

Icons are available in multiple weights (100, 200, ..., 700), providing flexibility in design and emphasis.

## Design Specifications

All icons are based on a standard 24px optical size and a default 0 grade.

## Documentation

<!-- #default-branch-switch -->

- [The SvgIcon documentation](https://mui.com/material-ui/icons/#svgicon)
- [The Material Design symbols search](https://fonts.google.com/icons?icon.set=Material+Symbols)

## Contributing

This icon set is meant to be in sync with Google's Material Symbols.
Therefore, we don't accept fixes, additions, or any other contributions that would make this package diverge from the source.

To synchronize with Material Icons, do the following:

1. Inside this workspace run `pnpm src:download`
2. Inside this workspace run `pnpm src:icons && pnpm build`
npm package: @mui-symbols-material/w100-esm
Description: Material Design symbols distributed as SVG React components.
Author: Aleksandr Rubtsov
Latest version: 0.4.1

<!-- markdownlint-disable-next-line -->
<p align="center">
  <a href="https://mui.com/core/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="MUI Core logo"></a>
</p>

# @mui-symbols-material/w100

This package provides the Google [Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols) with weight 100 converted to [`SvgIcon`](https://mui.com/material-ui/api/svg-icon/) components.

## Installation

Install the package in your project directory with:

<!-- #default-branch-switch -->

```bash
npm install @mui-symbols-material/w100
```
<!-- #default-branch-switch -->

To install icons of a different weight, simply replace `100` with the desired weight in the installation command.

These components use the Material UI's [SvgIcon](https://mui.com/material-ui/api/svg-icon) component to render the SVG path for each icon.

If you are not already using Material UI in your project, you can add it with:

```bash
npm install @mui/material
```

## Usage

Once installed, you can use the icons in your React components:

```jsx
import React from 'react';
import { 
  FavoriteOutlined, 
  FavoriteRounded, 
  FavoriteSharp, 
  FavoriteFilledOutlined, 
  FavoriteFilledRounded, 
  FavoriteFilledSharp,
} from '@mui-symbols-material/w100'; // Replace 100 with your desired weight

/**
 * Renders all variants of the favorite icon from Material Symbols.
 */
function MyComponent() {
  return (
    <>
      <FavoriteOutlined />
      <FavoriteRounded />
      <FavoriteSharp />
      <FavoriteFilledOutlined />
      <FavoriteFilledRounded />
      <FavoriteFilledSharp />
    </>
  );
}
```

## Styles

1. **Outlined**: These icons have a distinct outline, providing a clear and crisp appearance.
2. **Rounded**: These icons have rounded edges, offering a softer and more subtle appearance.
3. **Sharp**: These icons have sharp edges, giving a bold and striking appearance.

## Filled Version

Each icon also comes in a filled version, providing a different aesthetic and allowing for greater versatility in their usage.

## Weights

Icons are available in multiple weights (100, 200, ..., 700), providing flexibility in design and emphasis.

## Design Specifications

All icons are based on a standard 24px optical size and a default 0 grade.

## Documentation

<!-- #default-branch-switch -->

- [The SvgIcon documentation](https://mui.com/material-ui/icons/#svgicon)
- [The Material Design symbols search](https://fonts.google.com/icons?icon.set=Material+Symbols)

## Contributing

This icon set is meant to be in sync with Google's Material Symbols.
Therefore, we don't accept fixes, additions, or any other contributions that would make this package diverge from the source.

To synchronize with Material Icons, do the following:

1. Inside this workspace run `pnpm src:download`
2. Inside this workspace run `pnpm src:icons && pnpm build`
npm package: @mui-symbols-material/w200
Description: Material Design symbols distributed as SVG React components.
Author: Aleksandr Rubtsov
Latest version: 0.4.1

<!-- markdownlint-disable-next-line -->
<p align="center">
  <a href="https://mui.com/core/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="MUI Core logo"></a>
</p>

# @mui-symbols-material/w200

This package provides the Google [Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols) with weight 200 converted to [`SvgIcon`](https://mui.com/material-ui/api/svg-icon/) components.

## Installation

Install the package in your project directory with:

<!-- #default-branch-switch -->

```bash
npm install @mui-symbols-material/w200
```
<!-- #default-branch-switch -->

To install icons of a different weight, simply replace `200` with the desired weight in the installation command.

These components use the Material UI's [SvgIcon](https://mui.com/material-ui/api/svg-icon) component to render the SVG path for each icon.

If you are not already using Material UI in your project, you can add it with:

```bash
npm install @mui/material
```

## Usage

Once installed, you can use the icons in your React components:

```jsx
import React from 'react';
import { 
  FavoriteOutlined, 
  FavoriteRounded, 
  FavoriteSharp, 
  FavoriteFilledOutlined, 
  FavoriteFilledRounded, 
  FavoriteFilledSharp,
} from '@mui-symbols-material/w200'; // Replace 200 with your desired weight

/**
 * Renders all variants of the favorite icon from Material Symbols.
 */
function MyComponent() {
  return (
    <>
      <FavoriteOutlined />
      <FavoriteRounded />
      <FavoriteSharp />
      <FavoriteFilledOutlined />
      <FavoriteFilledRounded />
      <FavoriteFilledSharp />
    </>
  );
}
```

## Styles

1. **Outlined**: These icons have a distinct outline, providing a clear and crisp appearance.
2. **Rounded**: These icons have rounded edges, offering a softer and more subtle appearance.
3. **Sharp**: These icons have sharp edges, giving a bold and striking appearance.

## Filled Version

Each icon also comes in a filled version, providing a different aesthetic and allowing for greater versatility in their usage.

## Weights

Icons are available in multiple weights (100, 200, ..., 700), providing flexibility in design and emphasis.

## Design Specifications

All icons are based on a standard 24px optical size and a default 0 grade.

## Documentation

<!-- #default-branch-switch -->

- [The SvgIcon documentation](https://mui.com/material-ui/icons/#svgicon)
- [The Material Design symbols search](https://fonts.google.com/icons?icon.set=Material+Symbols)

## Contributing

This icon set is meant to be in sync with Google's Material Symbols.
Therefore, we don't accept fixes, additions, or any other contributions that would make this package diverge from the source.

To synchronize with Material Icons, do the following:

1. Inside this workspace run `pnpm src:download`
2. Inside this workspace run `pnpm src:icons && pnpm build`
npm package: @mui-symbols-material/w200-esm
Description: Material Design symbols distributed as SVG React components.
Author: Aleksandr Rubtsov
Latest version: 0.4.1

<!-- markdownlint-disable-next-line -->
<p align="center">
  <a href="https://mui.com/core/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="MUI Core logo"></a>
</p>

# @mui-symbols-material/w200

This package provides the Google [Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols) with weight 200 converted to [`SvgIcon`](https://mui.com/material-ui/api/svg-icon/) components.

## Installation

Install the package in your project directory with:

<!-- #default-branch-switch -->

```bash
npm install @mui-symbols-material/w200
```
<!-- #default-branch-switch -->

To install icons of a different weight, simply replace `200` with the desired weight in the installation command.

These components use the Material UI's [SvgIcon](https://mui.com/material-ui/api/svg-icon) component to render the SVG path for each icon.

If you are not already using Material UI in your project, you can add it with:

```bash
npm install @mui/material
```

## Usage

Once installed, you can use the icons in your React components:

```jsx
import React from 'react';
import { 
  FavoriteOutlined, 
  FavoriteRounded, 
  FavoriteSharp, 
  FavoriteFilledOutlined, 
  FavoriteFilledRounded, 
  FavoriteFilledSharp,
} from '@mui-symbols-material/w200'; // Replace 200 with your desired weight

/**
 * Renders all variants of the favorite icon from Material Symbols.
 */
function MyComponent() {
  return (
    <>
      <FavoriteOutlined />
      <FavoriteRounded />
      <FavoriteSharp />
      <FavoriteFilledOutlined />
      <FavoriteFilledRounded />
      <FavoriteFilledSharp />
    </>
  );
}
```

## Styles

1. **Outlined**: These icons have a distinct outline, providing a clear and crisp appearance.
2. **Rounded**: These icons have rounded edges, offering a softer and more subtle appearance.
3. **Sharp**: These icons have sharp edges, giving a bold and striking appearance.

## Filled Version

Each icon also comes in a filled version, providing a different aesthetic and allowing for greater versatility in their usage.

## Weights

Icons are available in multiple weights (100, 200, ..., 700), providing flexibility in design and emphasis.

## Design Specifications

All icons are based on a standard 24px optical size and a default 0 grade.

## Documentation

<!-- #default-branch-switch -->

- [The SvgIcon documentation](https://mui.com/material-ui/icons/#svgicon)
- [The Material Design symbols search](https://fonts.google.com/icons?icon.set=Material+Symbols)

## Contributing

This icon set is meant to be in sync with Google's Material Symbols.
Therefore, we don't accept fixes, additions, or any other contributions that would make this package diverge from the source.

To synchronize with Material Icons, do the following:

1. Inside this workspace run `pnpm src:download`
2. Inside this workspace run `pnpm src:icons && pnpm build`
npm package: @mui-symbols-material/w300
Description: Material Design symbols distributed as SVG React components.
Author: Aleksandr Rubtsov
Latest version: 0.4.1

<!-- markdownlint-disable-next-line -->
<p align="center">
  <a href="https://mui.com/core/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="MUI Core logo"></a>
</p>

# @mui-symbols-material/w300

This package provides the Google [Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols) with weight 300 converted to [`SvgIcon`](https://mui.com/material-ui/api/svg-icon/) components.

## Installation

Install the package in your project directory with:

<!-- #default-branch-switch -->

```bash
npm install @mui-symbols-material/w300
```
<!-- #default-branch-switch -->

To install icons of a different weight, simply replace `300` with the desired weight in the installation command.

These components use the Material UI's [SvgIcon](https://mui.com/material-ui/api/svg-icon) component to render the SVG path for each icon.

If you are not already using Material UI in your project, you can add it with:

```bash
npm install @mui/material
```

## Usage

Once installed, you can use the icons in your React components:

```jsx
import React from 'react';
import { 
  FavoriteOutlined, 
  FavoriteRounded, 
  FavoriteSharp, 
  FavoriteFilledOutlined, 
  FavoriteFilledRounded, 
  FavoriteFilledSharp,
} from '@mui-symbols-material/w300'; // Replace 300 with your desired weight

/**
 * Renders all variants of the favorite icon from Material Symbols.
 */
function MyComponent() {
  return (
    <>
      <FavoriteOutlined />
      <FavoriteRounded />
      <FavoriteSharp />
      <FavoriteFilledOutlined />
      <FavoriteFilledRounded />
      <FavoriteFilledSharp />
    </>
  );
}
```

## Styles

1. **Outlined**: These icons have a distinct outline, providing a clear and crisp appearance.
2. **Rounded**: These icons have rounded edges, offering a softer and more subtle appearance.
3. **Sharp**: These icons have sharp edges, giving a bold and striking appearance.

## Filled Version

Each icon also comes in a filled version, providing a different aesthetic and allowing for greater versatility in their usage.

## Weights

Icons are available in multiple weights (100, 200, ..., 700), providing flexibility in design and emphasis.

## Design Specifications

All icons are based on a standard 24px optical size and a default 0 grade.

## Documentation

<!-- #default-branch-switch -->

- [The SvgIcon documentation](https://mui.com/material-ui/icons/#svgicon)
- [The Material Design symbols search](https://fonts.google.com/icons?icon.set=Material+Symbols)

## Contributing

This icon set is meant to be in sync with Google's Material Symbols.
Therefore, we don't accept fixes, additions, or any other contributions that would make this package diverge from the source.

To synchronize with Material Icons, do the following:

1. Inside this workspace run `pnpm src:download`
2. Inside this workspace run `pnpm src:icons && pnpm build`
npm package: @mui-symbols-material/w300-esm
Description: Material Design symbols distributed as SVG React components.
Author: Aleksandr Rubtsov
Latest version: 0.4.1

<!-- markdownlint-disable-next-line -->
<p align="center">
  <a href="https://mui.com/core/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="MUI Core logo"></a>
</p>

# @mui-symbols-material/w300

This package provides the Google [Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols) with weight 300 converted to [`SvgIcon`](https://mui.com/material-ui/api/svg-icon/) components.

## Installation

Install the package in your project directory with:

<!-- #default-branch-switch -->

```bash
npm install @mui-symbols-material/w300
```
<!-- #default-branch-switch -->

To install icons of a different weight, simply replace `300` with the desired weight in the installation command.

These components use the Material UI's [SvgIcon](https://mui.com/material-ui/api/svg-icon) component to render the SVG path for each icon.

If you are not already using Material UI in your project, you can add it with:

```bash
npm install @mui/material
```

## Usage

Once installed, you can use the icons in your React components:

```jsx
import React from 'react';
import { 
  FavoriteOutlined, 
  FavoriteRounded, 
  FavoriteSharp, 
  FavoriteFilledOutlined, 
  FavoriteFilledRounded, 
  FavoriteFilledSharp,
} from '@mui-symbols-material/w300'; // Replace 300 with your desired weight

/**
 * Renders all variants of the favorite icon from Material Symbols.
 */
function MyComponent() {
  return (
    <>
      <FavoriteOutlined />
      <FavoriteRounded />
      <FavoriteSharp />
      <FavoriteFilledOutlined />
      <FavoriteFilledRounded />
      <FavoriteFilledSharp />
    </>
  );
}
```

## Styles

1. **Outlined**: These icons have a distinct outline, providing a clear and crisp appearance.
2. **Rounded**: These icons have rounded edges, offering a softer and more subtle appearance.
3. **Sharp**: These icons have sharp edges, giving a bold and striking appearance.

## Filled Version

Each icon also comes in a filled version, providing a different aesthetic and allowing for greater versatility in their usage.

## Weights

Icons are available in multiple weights (100, 200, ..., 700), providing flexibility in design and emphasis.

## Design Specifications

All icons are based on a standard 24px optical size and a default 0 grade.

## Documentation

<!-- #default-branch-switch -->

- [The SvgIcon documentation](https://mui.com/material-ui/icons/#svgicon)
- [The Material Design symbols search](https://fonts.google.com/icons?icon.set=Material+Symbols)

## Contributing

This icon set is meant to be in sync with Google's Material Symbols.
Therefore, we don't accept fixes, additions, or any other contributions that would make this package diverge from the source.

To synchronize with Material Icons, do the following:

1. Inside this workspace run `pnpm src:download`
2. Inside this workspace run `pnpm src:icons && pnpm build`
npm package: @mui-symbols-material/w400
Description: Material Design symbols distributed as SVG React components.
Author: Aleksandr Rubtsov
Latest version: 0.4.1

<!-- markdownlint-disable-next-line -->
<p align="center">
  <a href="https://mui.com/core/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="MUI Core logo"></a>
</p>

# @mui-symbols-material/w400

This package provides the Google [Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols) with weight 400 converted to [`SvgIcon`](https://mui.com/material-ui/api/svg-icon/) components.

## Installation

Install the package in your project directory with:

<!-- #default-branch-switch -->

```bash
npm install @mui-symbols-material/w400
```
<!-- #default-branch-switch -->

To install icons of a different weight, simply replace `400` with the desired weight in the installation command.

These components use the Material UI's [SvgIcon](https://mui.com/material-ui/api/svg-icon) component to render the SVG path for each icon.

If you are not already using Material UI in your project, you can add it with:

```bash
npm install @mui/material
```

## Usage

Once installed, you can use the icons in your React components:

```jsx
import React from 'react';
import { 
  FavoriteOutlined, 
  FavoriteRounded, 
  FavoriteSharp, 
  FavoriteFilledOutlined, 
  FavoriteFilledRounded, 
  FavoriteFilledSharp,
} from '@mui-symbols-material/w400'; // Replace 400 with your desired weight

/**
 * Renders all variants of the favorite icon from Material Symbols.
 */
function MyComponent() {
  return (
    <>
      <FavoriteOutlined />
      <FavoriteRounded />
      <FavoriteSharp />
      <FavoriteFilledOutlined />
      <FavoriteFilledRounded />
      <FavoriteFilledSharp />
    </>
  );
}
```

## Styles

1. **Outlined**: These icons have a distinct outline, providing a clear and crisp appearance.
2. **Rounded**: These icons have rounded edges, offering a softer and more subtle appearance.
3. **Sharp**: These icons have sharp edges, giving a bold and striking appearance.

## Filled Version

Each icon also comes in a filled version, providing a different aesthetic and allowing for greater versatility in their usage.

## Weights

Icons are available in multiple weights (100, 200, ..., 700), providing flexibility in design and emphasis.

## Design Specifications

All icons are based on a standard 24px optical size and a default 0 grade.

## Documentation

<!-- #default-branch-switch -->

- [The SvgIcon documentation](https://mui.com/material-ui/icons/#svgicon)
- [The Material Design symbols search](https://fonts.google.com/icons?icon.set=Material+Symbols)

## Contributing

This icon set is meant to be in sync with Google's Material Symbols.
Therefore, we don't accept fixes, additions, or any other contributions that would make this package diverge from the source.

To synchronize with Material Icons, do the following:

1. Inside this workspace run `pnpm src:download`
2. Inside this workspace run `pnpm src:icons && pnpm build`
npm package: @mui-symbols-material/w400-esm
Description: Material Design symbols distributed as SVG React components.
Author: Aleksandr Rubtsov
Latest version: 0.4.1

<!-- markdownlint-disable-next-line -->
<p align="center">
  <a href="https://mui.com/core/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="MUI Core logo"></a>
</p>

# @mui-symbols-material/w400

This package provides the Google [Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols) with weight 400 converted to [`SvgIcon`](https://mui.com/material-ui/api/svg-icon/) components.

## Installation

Install the package in your project directory with:

<!-- #default-branch-switch -->

```bash
npm install @mui-symbols-material/w400
```
<!-- #default-branch-switch -->

To install icons of a different weight, simply replace `400` with the desired weight in the installation command.

These components use the Material UI's [SvgIcon](https://mui.com/material-ui/api/svg-icon) component to render the SVG path for each icon.

If you are not already using Material UI in your project, you can add it with:

```bash
npm install @mui/material
```

## Usage

Once installed, you can use the icons in your React components:

```jsx
import React from 'react';
import { 
  FavoriteOutlined, 
  FavoriteRounded, 
  FavoriteSharp, 
  FavoriteFilledOutlined, 
  FavoriteFilledRounded, 
  FavoriteFilledSharp,
} from '@mui-symbols-material/w400'; // Replace 400 with your desired weight

/**
 * Renders all variants of the favorite icon from Material Symbols.
 */
function MyComponent() {
  return (
    <>
      <FavoriteOutlined />
      <FavoriteRounded />
      <FavoriteSharp />
      <FavoriteFilledOutlined />
      <FavoriteFilledRounded />
      <FavoriteFilledSharp />
    </>
  );
}
```

## Styles

1. **Outlined**: These icons have a distinct outline, providing a clear and crisp appearance.
2. **Rounded**: These icons have rounded edges, offering a softer and more subtle appearance.
3. **Sharp**: These icons have sharp edges, giving a bold and striking appearance.

## Filled Version

Each icon also comes in a filled version, providing a different aesthetic and allowing for greater versatility in their usage.

## Weights

Icons are available in multiple weights (100, 200, ..., 700), providing flexibility in design and emphasis.

## Design Specifications

All icons are based on a standard 24px optical size and a default 0 grade.

## Documentation

<!-- #default-branch-switch -->

- [The SvgIcon documentation](https://mui.com/material-ui/icons/#svgicon)
- [The Material Design symbols search](https://fonts.google.com/icons?icon.set=Material+Symbols)

## Contributing

This icon set is meant to be in sync with Google's Material Symbols.
Therefore, we don't accept fixes, additions, or any other contributions that would make this package diverge from the source.

To synchronize with Material Icons, do the following:

1. Inside this workspace run `pnpm src:download`
2. Inside this workspace run `pnpm src:icons && pnpm build`
npm package: @mui-symbols-material/w500
Description: Material Design symbols distributed as SVG React components.
Author: Aleksandr Rubtsov
Latest version: 0.4.1

<!-- markdownlint-disable-next-line -->
<p align="center">
  <a href="https://mui.com/core/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="MUI Core logo"></a>
</p>

# @mui-symbols-material/w500

This package provides the Google [Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols) with weight 500 converted to [`SvgIcon`](https://mui.com/material-ui/api/svg-icon/) components.

## Installation

Install the package in your project directory with:

<!-- #default-branch-switch -->

```bash
npm install @mui-symbols-material/w500
```
<!-- #default-branch-switch -->

To install icons of a different weight, simply replace `500` with the desired weight in the installation command.

These components use the Material UI's [SvgIcon](https://mui.com/material-ui/api/svg-icon) component to render the SVG path for each icon.

If you are not already using Material UI in your project, you can add it with:

```bash
npm install @mui/material
```

## Usage

Once installed, you can use the icons in your React components:

```jsx
import React from 'react';
import { 
  FavoriteOutlined, 
  FavoriteRounded, 
  FavoriteSharp, 
  FavoriteFilledOutlined, 
  FavoriteFilledRounded, 
  FavoriteFilledSharp,
} from '@mui-symbols-material/w500'; // Replace 500 with your desired weight

/**
 * Renders all variants of the favorite icon from Material Symbols.
 */
function MyComponent() {
  return (
    <>
      <FavoriteOutlined />
      <FavoriteRounded />
      <FavoriteSharp />
      <FavoriteFilledOutlined />
      <FavoriteFilledRounded />
      <FavoriteFilledSharp />
    </>
  );
}
```

## Styles

1. **Outlined**: These icons have a distinct outline, providing a clear and crisp appearance.
2. **Rounded**: These icons have rounded edges, offering a softer and more subtle appearance.
3. **Sharp**: These icons have sharp edges, giving a bold and striking appearance.

## Filled Version

Each icon also comes in a filled version, providing a different aesthetic and allowing for greater versatility in their usage.

## Weights

Icons are available in multiple weights (100, 200, ..., 700), providing flexibility in design and emphasis.

## Design Specifications

All icons are based on a standard 24px optical size and a default 0 grade.

## Documentation

<!-- #default-branch-switch -->

- [The SvgIcon documentation](https://mui.com/material-ui/icons/#svgicon)
- [The Material Design symbols search](https://fonts.google.com/icons?icon.set=Material+Symbols)

## Contributing

This icon set is meant to be in sync with Google's Material Symbols.
Therefore, we don't accept fixes, additions, or any other contributions that would make this package diverge from the source.

To synchronize with Material Icons, do the following:

1. Inside this workspace run `pnpm src:download`
2. Inside this workspace run `pnpm src:icons && pnpm build`
npm package: @mui-symbols-material/w500-esm
Description: Material Design symbols distributed as SVG React components.
Author: Aleksandr Rubtsov
Latest version: 0.4.1

<!-- markdownlint-disable-next-line -->
<p align="center">
  <a href="https://mui.com/core/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="MUI Core logo"></a>
</p>

# @mui-symbols-material/w500

This package provides the Google [Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols) with weight 500 converted to [`SvgIcon`](https://mui.com/material-ui/api/svg-icon/) components.

## Installation

Install the package in your project directory with:

<!-- #default-branch-switch -->

```bash
npm install @mui-symbols-material/w500
```
<!-- #default-branch-switch -->

To install icons of a different weight, simply replace `500` with the desired weight in the installation command.

These components use the Material UI's [SvgIcon](https://mui.com/material-ui/api/svg-icon) component to render the SVG path for each icon.

If you are not already using Material UI in your project, you can add it with:

```bash
npm install @mui/material
```

## Usage

Once installed, you can use the icons in your React components:

```jsx
import React from 'react';
import { 
  FavoriteOutlined, 
  FavoriteRounded, 
  FavoriteSharp, 
  FavoriteFilledOutlined, 
  FavoriteFilledRounded, 
  FavoriteFilledSharp,
} from '@mui-symbols-material/w500'; // Replace 500 with your desired weight

/**
 * Renders all variants of the favorite icon from Material Symbols.
 */
function MyComponent() {
  return (
    <>
      <FavoriteOutlined />
      <FavoriteRounded />
      <FavoriteSharp />
      <FavoriteFilledOutlined />
      <FavoriteFilledRounded />
      <FavoriteFilledSharp />
    </>
  );
}
```

## Styles

1. **Outlined**: These icons have a distinct outline, providing a clear and crisp appearance.
2. **Rounded**: These icons have rounded edges, offering a softer and more subtle appearance.
3. **Sharp**: These icons have sharp edges, giving a bold and striking appearance.

## Filled Version

Each icon also comes in a filled version, providing a different aesthetic and allowing for greater versatility in their usage.

## Weights

Icons are available in multiple weights (100, 200, ..., 700), providing flexibility in design and emphasis.

## Design Specifications

All icons are based on a standard 24px optical size and a default 0 grade.

## Documentation

<!-- #default-branch-switch -->

- [The SvgIcon documentation](https://mui.com/material-ui/icons/#svgicon)
- [The Material Design symbols search](https://fonts.google.com/icons?icon.set=Material+Symbols)

## Contributing

This icon set is meant to be in sync with Google's Material Symbols.
Therefore, we don't accept fixes, additions, or any other contributions that would make this package diverge from the source.

To synchronize with Material Icons, do the following:

1. Inside this workspace run `pnpm src:download`
2. Inside this workspace run `pnpm src:icons && pnpm build`