Add styles for Material Symbols and update package configuration

Author: zZHorizonZz

package.json

@@ -22,10 +22,19 @@
     "react-components",
     "material-react"
   ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    "./styles": "./dist/styles.css",
+    ".": "./dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "@fontsource/roboto": "^5.1.0",
     "@lit/react": "^1.0.6",
-    "@material/web": "^2.2.0",
+    "@material/web": "^2.4.0",
     "material-symbols": "^0.34.1"
   },
   "devDependencies": {
@@ -37,7 +46,7 @@
     "typescript": "^5.4.3"
   },
   "scripts": {
-    "build": "tsc && copyfiles -u 1 src/**/*.tsx dist/",
+    "build": "tsc && copyfiles -u 1 src/**/*.tsx src/**/*.css dist/",
     "build:clean": "rimraf dist && npm run build",
     "typecheck": "tsc --noEmit",
     "generate": "node generate.js && npm run format",

src/styles.css

@@ -0,0 +1,46 @@
+@import 'material-symbols';
+@import '@fontsource/roboto';
+
+.material-symbols-rounded {
+  font-family: 'Material Symbols Rounded', serif;
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+.material-symbols-sharp {
+  font-family: 'Material Symbols Sharp', serif;
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+md-icon[filled] {
+  font-variation-settings: 'FILL' 1;
+}
+
+md-icon.rounded {
+  --md-icon-font: 'Material Symbols Rounded';
+}
+
+md-icon.sharp {
+  --md-icon-font: 'Material Symbols Sharp';
+}

tsconfig.json

@@ -30,4 +30,4 @@
     "dist",
     "temp-material-web"
   ]
-}
+}