npm package: @myunisoft/mui-symbols-material-w400-esm
Description: Material Design symbols distributed as SVG React components.
Author: Aleksandr Rubtsov
Latest version: 1.0.0

<!-- 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>

# @myunisoft/mui-symbols-material

[Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols) is the successor of Material Icons. The collection brings 3200+ symbols and it fulfills better the needs of our UX/UI design team. The search tool provides lots of synonyms to find symbols more easily.

Material Symbols is not supported yet by MUI. So the present project forks mui-symbols-material to make it compatible with React 19 and MUI 7.x, and to export only rounded symbols.

In our projects only filled or not filled rounded style symbols with weight 300 and 400 will be used. UX team will specify the use cases.

Because JS (and so React) names cannot start with a number, Symbols whose name starts with a number are prefixed with `S` (like Symbol): `24mpRounded` -> `S4mpRounded`. This will simplify the maintenance of the library instead of replacing numbers with text as the original package does.

## How to build the packages

From the root of the project (for weight 300 and 400):

1. Run `pnpm release:version [x.x.x]` from root to bump versions in all packages
2. Run `pnpm release:build-esm` to update icons and generate JS files and build package with only ESM files
3. Run `pnpm release:publish` to publish packages

Or from the root of a specific package:

1. Run `pnpm src:download` to update the Svg icons collection with Google's @material-design-icons/scripts
2. Run `pnpm src:icons` to generate JS file from Svg
3. Run from root `pnpm release:version [x.x.x]` to bump versions in all packages
4. Run `pnpm build:pure-esm` to build a lighter package with only ESM files
5. Run `pnpm publish --no-git-checks` to publish on npm

## How to use

```yarn @myunisoft/mui-symbols-material-w300-esm @myunisoft/mui-symbols-material-w400-esm```

To optimize bundle size and avoid importing the whole collection, do not use named imports

```
❌
import { SearchRounded, HelpFilledRounded } from '@myunisoft/mui-symbols-material-w300-esm';
```

but rather use default import for each symbol

```
✅
import SearchRounded from '@myunisoft/mui-symbols-material-w300-esm/SearchRounded';
import HelpFilledRounded from '@myunisoft/mui-symbols-material-w300-esm/HelpFilledRounded';
```

# Original @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`