Material Symbols for React Project

This is just a simple library to use Material Symbols in your React project. You can learn more about Material Symbols from this link: https://fonts.google.com/icons. This library also includes other libraries namely: material-symbols, clsx, and tailwind-merge.

Installation

npm i @jabirdev/material-symbols

Usage

Import in CSS (example: index.css in Vite):

@import "material-symbols";

Component Symbol props:

filled	boolean
variants	outlined | rounded | sharp
opticalSize	20 | 24 | 40 | 48
weight	thin | extra_light |  light | normal | medium | semi_bold | bold
grade	low | normal | high
className	string
fontSize	md | sm | lg | xl | base

Example code to display icon:

...
import { Symbols } from "@jabirdev/material-symbols";

function App() {

  return (
    <>
      ...
        <Symbols filled variants="rounded" grade="high" opticalSize={48}>
          home
        </Symbols>
      ...
    </>
  );
}

export default App;

Thank you