material-icons - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

package.json

 {
   "name": "material-icons",
-  "version": "0.2.0",
-  "description": "Material design icon font",
+  "version": "0.2.1",
+  "description": "Material design icon font and CSS framework for self hosting the icons.",
   "scripts": {
-    "build": "node-sass --output-style=expanded iconfont/material-icons.scss iconfont/material-icons.css"
+    "build": "npm run build:init && npm run build:iconfont && npm run build:css && npm run build:css:min",
+    "build:init": "node scripts/codepoints.js",
+    "build:iconfont": "node-sass --output-style=expanded iconfont/material-icons.scss iconfont/material-icons.css",
+    "build:css": "node-sass --output-style=expanded css/material-icons.scss css/material-icons.css",
+    "build:css:min": "node-sass --output-style=compressed css/material-icons.scss css/material-icons.min.css"
   },
@@ -26,4 +30,6 @@ "devDependencies": {
     "icons",
-    "font"
+    "font",
+    "css",
+    "sass"
   ]
 }

README.md

 # Material Icons
 
-Material design icon font
+Material design icon font and CSS framework for self hosting the icons.
 
+> **Note:** This package contains only the icon font and required CSS. So it is considerably small compared to the official [material-design-icons] package and easy to install.
+
 ## Installation
@@ -13,6 +15,8 @@
 
-## Setup
+## Usage
 
-### CSS
+Font files are present in the `iconfont` directory and can be imported using CSS.
 
+Import the required CSS:
+
 ```html
@@ -22,3 +26,3 @@ <link rel="stylesheet" href="/path/to/material-icons/iconfont/material-icons.css">
 
-### Sass & Webpack
+or import the SCSS:
 
@@ -31,3 +35,3 @@ ```scss
 
-## Usage
+To display an icon use:
 
@@ -38,2 +42,62 @@ ```html
 
+Available Sass variables:
+
+```scss
+$material-icons-codepoints: () !default; /* Sass map of icon names and codepoints */
+$material-icons-font-path: '' !default;
+$material-icons-font-name: 'MaterialIcons-Regular' !default;
+$material-icons-font-size: 24px !default;
+$material-icons-font-family: 'Material Icons' !default;
+```
+
+Available Sass mixins:
+
+```scss
+.material-icons {
+  @include material-icons();
+}
+```
+
+## CSS Classes (Optional)
+
+Alternatively you can use CSS classes to display an icon.
+
+> **Note:** This method is not recommended as it requires a large CSS file to be imported in addition to above files.
+
+Import the required CSS:
+
+```html
+<link rel="stylesheet" href="/path/to/material-icons/css/material-icons.min.css">
+```
+
+or import the SCSS:
+
+```scss
+$material-icons-css-prefix: 'mi';
+
+@import 'material-icons/css/material-icons.scss';
+```
+
+To display an icon use:
+
+```html
+<span class="mi mi-face"></span>
+```
+
+Available Sass variables:
+
+```scss
+$material-icons-css-prefix: 'mi' !default;
+$material-icons-css-search: '_' !default;
+$material-icons-css-replace: '-' !default; /* To replace '_' with '-' in CSS class names */
+```
+
+Available Sass mixins:
+
+```scss
+.mi-face {
+  @include material-icon('face');
+}
+```
+
 ## Available Icons
@@ -45,1 +109,2 @@
 [material design icons]: https://material.io/icons/
+[material-design-icons]: https://github.com/google/material-design-icons

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

847858

increased by18.56%

Number of package files

23

increased by53.33%

Lines of code

3957

increased by13544.83%

Number of lines in readme file

106

increased by158.54%

Worsened metrics

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes