Skip to content

v0.2.0
Compare
Choose a tag to compare
@github-actions github-actions released this 18 Feb 04:54
· 22 commits to main since this release
v0.2.0
d85aa85

Release Notes for v0.2.0

We're thrilled to announce the release of version 0.2.0 for Material Symbols for MUI, featuring a significant enhancement tailored to improve design flexibility and integration ease within your projects. This update introduces a wide range of symbol weights and maintains consistent component naming across all variants, streamlining your design process.

What's New:

  • Full Spectrum of Weights: All weights from 100 to 700 are now available, allowing for a greater degree of design customization and precision.
  • Selective Installation: Optimize your project's efficiency by installing only the necessary weights. Each weight is available as a separate package, enabling precise control over your project's footprint.
  • Uniform Component Names: Regardless of the weight chosen, component names stay consistent, ensuring a straightforward and hassle-free integration into your projects. This consistency allows for easy swapping and comparison of different weights without the need to juggle different component names.

Available Packages:

  • @mui-symbols-material/w100
  • @mui-symbols-material/w200
  • @mui-symbols-material/w300
  • @mui-symbols-material/w400
  • @mui-symbols-material/w500
  • @mui-symbols-material/w600
  • @mui-symbols-material/w700

Installation:

To include the desired weight(s) in your project, simply install the specific package(s) you need:

npm install @mui-symbols-material/w[weight]

Replace [weight] with the desired weight number (e.g., 100, 200, ..., 700).

Example Usage:

Easily use and switch between different symbol weights by importing them under the same component name. This example demonstrates how to use two different weights for the FavoriteOutlined symbol:

import React from 'react';
import { FavoriteOutlined as FavoriteOutlinedRegular } from '@mui-symbols-material/w400'; // Regular weight
import { FavoriteOutlined as FavoriteOutlinedBold } from '@mui-symbols-material/w700'; // Bold weight

function App() {
  return (
    <div>
      <FavoriteOutlinedRegular /> {/* Regular */}
      <FavoriteOutlinedBold /> {/* Bold */}
    </div>
  );
}

This enhancement aims to provide you with a more dynamic and versatile design toolkit, ensuring that your projects can adapt to various design requirements with ease. We are excited to see the innovative ways you will utilize these new features in your projects.

Thank you for your continued support.

Assets 2
Loading