material-symbols-class 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +97 -0
  3. package/index.css +86 -0
  4. package/index.min.css +1 -0
  5. package/index.scss +3 -0
  6. package/material-symbols-outlined.woff2 +0 -0
  7. package/material-symbols-rounded.woff2 +0 -0
  8. package/material-symbols-sharp.woff2 +0 -0
  9. package/material-symbols.css +14247 -0
  10. package/material-symbols.min.css +1 -0
  11. package/material-symbols.scss +809 -0
  12. package/outlined.css +28 -0
  13. package/outlined.min.css +1 -0
  14. package/outlined.scss +6 -0
  15. package/package.json +41 -0
  16. package/rounded.css +28 -0
  17. package/rounded.min.css +1 -0
  18. package/rounded.scss +6 -0
  19. package/sharp.css +28 -0
  20. package/sharp.min.css +1 -0
  21. package/sharp.scss +6 -0
  22. package/utils.css +59 -0
  23. package/utils.min.css +1 -0
  24. package/utils.scss +32 -0
package/outlined.css ADDED
@@ -0,0 +1,28 @@
1
+ @font-face {
2
+ font-family: "Material Symbols Outlined";
3
+ font-style: normal;
4
+ font-weight: 100 700;
5
+ font-display: block;
6
+ src: url("./material-symbols-outlined.woff2") format("woff2");
7
+ }
8
+ .material-symbols-outlined, .msc {
9
+ font-family: "Material Symbols Outlined";
10
+ font-weight: normal;
11
+ font-style: normal;
12
+ font-size: 24px;
13
+ line-height: 1;
14
+ letter-spacing: normal;
15
+ text-transform: none;
16
+ display: inline-block;
17
+ white-space: nowrap;
18
+ word-wrap: normal;
19
+ direction: ltr;
20
+ -webkit-font-smoothing: antialiased;
21
+ -moz-osx-font-smoothing: grayscale;
22
+ text-rendering: optimizeLegibility;
23
+ font-feature-settings: "liga";
24
+ }
25
+
26
+ .msc {
27
+ font-size: 1.25em;
28
+ }
package/outlined.min.css ADDED
@@ -0,0 +1 @@
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}
package/outlined.scss ADDED
@@ -0,0 +1,6 @@
1
+ @use "./node_modules/material-symbols/outlined.scss";
2
+
3
+ .msc {
4
+ @extend .material-symbols-outlined;
5
+ font-size: 1.25em;
6
+ }
package/package.json ADDED
@@ -0,0 +1,41 @@
1
+ {
2
+ "name": "material-symbols-class",
3
+ "version": "0.9.0",
4
+ "description": "material-symbols implementation to use them with classes",
5
+ "author": "Joel Corrales <joel.corrales@super7ui.com>",
6
+ "bugs": {
7
+ "url": "https://github.com/joelcorrales/material-symbols-class/issues"
8
+ },
9
+ "scripts": {
10
+ "build:all": "npm run copy:fonts && npm run build:css && npm run build:css:min",
11
+ "copy:fonts": "node move_fonts",
12
+ "build:css": "sass --no-source-map --no-error-css ./:./",
13
+ "build:css:min": "sass --style compressed --no-source-map --no-error-css material-symbols.scss:material-symbols.min.css outlined.scss:outlined.min.css rounded.scss:rounded.min.css sharp.scss:sharp.min.css utils.scss:utils.min.css index.scss:index.min.css"
14
+ },
15
+ "license": "MIT License",
16
+ "devDependencies": {
17
+ "sass": "1.56.1",
18
+ "material-symbols": "0.29.2"
19
+ },
20
+ "repository": {
21
+ "type": "git",
22
+ "url": "git+https://github.com/joelcorrales/material-symbols-class.git"
23
+ },
24
+ "keywords": [
25
+ "material-symbols",
26
+ "material",
27
+ "symbols",
28
+ "icons",
29
+ "classes",
30
+ "class",
31
+ "class-only",
32
+ "font",
33
+ "css",
34
+ "sass"
35
+ ],
36
+ "files": [
37
+ "README.md",
38
+ "*.{css,scss}",
39
+ "*.woff2"
40
+ ]
41
+ }
package/rounded.css ADDED
@@ -0,0 +1,28 @@
1
+ @font-face {
2
+ font-family: "Material Symbols Rounded";
3
+ font-style: normal;
4
+ font-weight: 100 700;
5
+ font-display: block;
6
+ src: url("./material-symbols-rounded.woff2") format("woff2");
7
+ }
8
+ .material-symbols-rounded, .msc-rounded {
9
+ font-family: "Material Symbols Rounded";
10
+ font-weight: normal;
11
+ font-style: normal;
12
+ font-size: 24px;
13
+ line-height: 1;
14
+ letter-spacing: normal;
15
+ text-transform: none;
16
+ display: inline-block;
17
+ white-space: nowrap;
18
+ word-wrap: normal;
19
+ direction: ltr;
20
+ -webkit-font-smoothing: antialiased;
21
+ -moz-osx-font-smoothing: grayscale;
22
+ text-rendering: optimizeLegibility;
23
+ font-feature-settings: "liga";
24
+ }
25
+
26
+ .msc-rounded {
27
+ font-size: 1.25em;
28
+ }
package/rounded.min.css ADDED
@@ -0,0 +1 @@
1
+ @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}
package/rounded.scss ADDED
@@ -0,0 +1,6 @@
1
+ @use "./node_modules/material-symbols/rounded.scss";
2
+
3
+ .msc-rounded {
4
+ @extend .material-symbols-rounded;
5
+ font-size: 1.25em;
6
+ }
package/sharp.css ADDED
@@ -0,0 +1,28 @@
1
+ @font-face {
2
+ font-family: "Material Symbols Sharp";
3
+ font-style: normal;
4
+ font-weight: 100 700;
5
+ font-display: block;
6
+ src: url("./material-symbols-sharp.woff2") format("woff2");
7
+ }
8
+ .material-symbols-sharp, .msc-sharp {
9
+ font-family: "Material Symbols Sharp";
10
+ font-weight: normal;
11
+ font-style: normal;
12
+ font-size: 24px;
13
+ line-height: 1;
14
+ letter-spacing: normal;
15
+ text-transform: none;
16
+ display: inline-block;
17
+ white-space: nowrap;
18
+ word-wrap: normal;
19
+ direction: ltr;
20
+ -webkit-font-smoothing: antialiased;
21
+ -moz-osx-font-smoothing: grayscale;
22
+ text-rendering: optimizeLegibility;
23
+ font-feature-settings: "liga";
24
+ }
25
+
26
+ .msc-sharp {
27
+ font-size: 1.25em;
28
+ }
package/sharp.min.css ADDED
@@ -0,0 +1 @@
1
+ @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/sharp.scss ADDED
@@ -0,0 +1,6 @@
1
+ @use "./node_modules/material-symbols/sharp.scss";
2
+
3
+ .msc-sharp {
4
+ @extend .material-symbols-sharp;
5
+ font-size: 1.25em;
6
+ }
package/utils.css ADDED
@@ -0,0 +1,59 @@
1
+ .msc-fill {
2
+ font-variation-settings: "FILL" 1;
3
+ }
4
+
5
+ .msc-100 {
6
+ font-weight: 100;
7
+ }
8
+
9
+ .msc-200 {
10
+ font-weight: 200;
11
+ }
12
+
13
+ .msc-300 {
14
+ font-weight: 300;
15
+ }
16
+
17
+ .msc-400 {
18
+ font-weight: 400;
19
+ }
20
+
21
+ .msc-500 {
22
+ font-weight: 500;
23
+ }
24
+
25
+ .msc-600 {
26
+ font-weight: 600;
27
+ }
28
+
29
+ .msc-700 {
30
+ font-weight: 700;
31
+ }
32
+
33
+ .msc-800 {
34
+ font-weight: 800;
35
+ }
36
+
37
+ .msc-900 {
38
+ font-weight: 900;
39
+ }
40
+
41
+ @keyframes spin {
42
+ from {
43
+ transform: rotate(0deg);
44
+ }
45
+ to {
46
+ transform: rotate(360deg);
47
+ }
48
+ }
49
+ .msc-spin {
50
+ animation-name: spin;
51
+ animation-duration: 1.5s;
52
+ animation-iteration-count: infinite;
53
+ animation-timing-function: linear;
54
+ }
55
+
56
+ .msc-fix {
57
+ text-align: center;
58
+ width: 1.25em;
59
+ }
package/utils.min.css ADDED
@@ -0,0 +1 @@
1
+ .msc-fill{font-variation-settings:"FILL" 1}.msc-100{font-weight:100}.msc-200{font-weight:200}.msc-300{font-weight:300}.msc-400{font-weight:400}.msc-500{font-weight:500}.msc-600{font-weight:600}.msc-700{font-weight:700}.msc-800{font-weight:800}.msc-900{font-weight:900}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.msc-spin{animation-name:spin;animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear}.msc-fix{text-align:center;width:1.25em}
package/utils.scss ADDED
@@ -0,0 +1,32 @@
1
+ .msc-fill {
2
+ font-variation-settings: "FILL" 1;
3
+ }
4
+
5
+ $weights: 100, 200, 300, 400, 500, 600, 700, 800, 900;
6
+
7
+ @each $weight in $weights {
8
+ .msc-#{$weight} {
9
+ font-weight: $weight;
10
+ }
11
+ }
12
+
13
+ @keyframes spin {
14
+ from {
15
+ transform: rotate(0deg);
16
+ }
17
+ to {
18
+ transform: rotate(360deg);
19
+ }
20
+ }
21
+
22
+ .msc-spin {
23
+ animation-name: spin;
24
+ animation-duration: 1.5s;
25
+ animation-iteration-count: infinite;
26
+ animation-timing-function: linear;
27
+ }
28
+
29
+ .msc-fix {
30
+ text-align: center;
31
+ width: 1.25em;
32
+ }