material-symbols-class 0.9.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Joel Corrales
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,97 @@
+# [material-symbols-class](https://github.com/joelcorrales/material-symbols-class)
+
+This is a package that uses [material-symbols](https://github.com/marella/material-symbols/tree/main/material-symbols) to provide a way of using the icons just with classes.
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Available Icons](#available-icons)
+
+## Installation
+
+Install the [latest version][releases] using:
+
+```sh
+npm install material-symbols-class@latest
+```
+
+## Usage
+
+Import in JS (example: `src/index.js` in Create React App, `src/main.js` in Vue CLI):
+
+```js
+import "material-symbols-class";
+```
+
+or import in CSS (example: `src/styles.css` in Angular CLI):
+
+```css
+@import "material-symbols-class";
+```
+
+or import in HTML:
+
+```html
+<link href="/path/to/material-symbols-class/index.css" rel="stylesheet" />
+```
+
+To display an icon, use one of the following:
+
+```html
+<span class="msc msc-face"></span>
+<!-- Outlined -->
+<span class="msc-rounded  msc-face"></span>
+<!-- Rounded -->
+<span class="msc-sharp  msc-face"></span>
+<!-- Sharp -->
+```
+
+Adding the `utils.css` you can edit the `fill` and `weight` variables with classes too:
+
+```html
+<span class="msc msc-face msc-fill"></span>
+<!-- 'FILL': 1 -->
+<span class="msc msc-face msc-100"></span>
+<!-- 'weight': 100 -->
+<span class="msc msc-face msc-fill msc-100"></span>
+<!-- 'FILL': 1 && 'weight': 300 -->
+```
+
+To customize the variable font axes (fill, weight, grade, and optical size), use:
+
+```css
+.msc {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+}
+```
+
+### Reducing Build Size
+
+The default `index.css` includes CSS for all fonts. This may cause build tools such as webpack to copy all fonts to the build directory even if you are not using all of them. To reduce the build size, import only the styles you need. For example, if you only need outlined icons, import `outlined.css` instead of the default `index.css`:
+
+```diff
+-import 'material-symbols-class';
++import 'material-symbols-class/outlined.css';
+```
+
+<details>
+<summary><strong>Show all</strong></summary><br>
+
+| Icons    | CSS          | Sass          |
+| :------- | :----------- | :------------ |
+| Outlined | outlined.css | outlined.scss |
+| Rounded  | rounded.css  | rounded.scss  |
+| Sharp    | sharp.css    | sharp.scss    |
+
+</details>
+
+### Using Sass
+
+Import in Sass (example: `src/styles.scss` in Angular CLI):
+
+```scss
+@import "material-symbols-class";
+```
+
+## License
+
+MIT License

package/index.css

@@ -0,0 +1,86 @@
+@font-face {
+  font-family: "Material Symbols Outlined";
+  font-style: normal;
+  font-weight: 100 700;
+  font-display: block;
+  src: url("./material-symbols-outlined.woff2") format("woff2");
+}
+.material-symbols-outlined, .msc {
+  font-family: "Material Symbols Outlined";
+  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-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "liga";
+}
+
+.msc {
+  font-size: 1.25em;
+}
+
+@font-face {
+  font-family: "Material Symbols Rounded";
+  font-style: normal;
+  font-weight: 100 700;
+  font-display: block;
+  src: url("./material-symbols-rounded.woff2") format("woff2");
+}
+.material-symbols-rounded, .msc-rounded {
+  font-family: "Material Symbols Rounded";
+  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-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "liga";
+}
+
+.msc-rounded {
+  font-size: 1.25em;
+}
+
+@font-face {
+  font-family: "Material Symbols Sharp";
+  font-style: normal;
+  font-weight: 100 700;
+  font-display: block;
+  src: url("./material-symbols-sharp.woff2") format("woff2");
+}
+.material-symbols-sharp, .msc-sharp {
+  font-family: "Material Symbols Sharp";
+  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-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "liga";
+}
+
+.msc-sharp {
+  font-size: 1.25em;
+}

package/index.min.css

@@ -0,0 +1 @@
+@font-face{font-family:"Material Symbols Outlined";font-style:normal;font-weight:100 700;font-display:block;src:url("./material-symbols-outlined.woff2") format("woff2")}.material-symbols-outlined,.msc{font-family:"Material Symbols Outlined";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-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}.msc{font-size:1.25em}@font-face{font-family:"Material Symbols Rounded";font-style:normal;font-weight:100 700;font-display:block;src:url("./material-symbols-rounded.woff2") format("woff2")}.material-symbols-rounded,.msc-rounded{font-family:"Material Symbols Rounded";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-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}.msc-rounded{font-size:1.25em}@font-face{font-family:"Material Symbols Sharp";font-style:normal;font-weight:100 700;font-display:block;src:url("./material-symbols-sharp.woff2") format("woff2")}.material-symbols-sharp,.msc-sharp{font-family:"Material Symbols Sharp";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-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}.msc-sharp{font-size:1.25em}

package/index.scss

@@ -0,0 +1,3 @@
+@import "./outlined.scss";
+@import "./rounded.scss";
+@import "./sharp.scss";