feat: add fontSize props

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jabirdeveloper/material-symbols",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

readme.md

@@ -18,7 +18,7 @@ Import in CSS (example: index.css in Vite):
 
 Component Symbol props:
 
-<table><tbody><tr><td>filled</td><td>boolean</td></tr><tr><td>variants</td><td>outlined | rounded | sharp</td></tr><tr><td>opticalSize</td><td>20 | 24 | 40 | 48</td></tr><tr><td>weight</td><td>thin | extra_light | &nbsp;light | normal | medium | semi_bold | bold</td></tr><tr><td>grade</td><td>low | normal | high</td></tr><tr><td>className</td><td>string</td></tr></tbody></table>
+<table><tbody><tr><td>filled</td><td>boolean</td></tr><tr><td>variants</td><td>outlined | rounded | sharp</td></tr><tr><td>opticalSize</td><td>20 | 24 | 40 | 48</td></tr><tr><td>weight</td><td>thin | extra_light | &nbsp;light | normal | medium | semi_bold | bold</td></tr><tr><td>grade</td><td>low | normal | high</td></tr><tr><td>className</td><td>string</td></tr><tr><td>fontSize</td><td>md | sm | lg | xl | base</td></tr></tbody></table>
 
 Example code to display icon:
 

src/components/symbols/symbols.tsx

@@ -16,6 +16,7 @@ interface SymbolsProps extends PropsWithChildren {
     | "semi_bold"
     | "bold";
   grade?: "low" | "normal" | "high";
+  fontSize?: "md" | "sm" | "lg" | "xl" | "base";
   className?: string | undefined;
 }
 
@@ -25,6 +26,7 @@ const Symbols: FC<SymbolsProps> = ({
   weight,
   opticalSize,
   grade,
+  fontSize = "base",
   children,
   className
 }) => {
@@ -36,7 +38,10 @@ const Symbols: FC<SymbolsProps> = ({
   return (
     <span
       style={{ fontVariationSettings: styles }}
-      className={cn(`material-symbols-${variants} `, className)}
+      className={cn(
+        `material-symbols-${variants} text-${fontSize}  `,
+        className
+      )}
     >
       {children}
     </span>