@igniteui/material-icons-extended - npm Package Compare versions

Comparing version 3.0.0-alpha.1 to 3.0.0-alpha.2

package.json

 {
   "name": "@igniteui/material-icons-extended",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.2",
   "description": "A subset of Material Icons that extend the official Material Design Icons by Google.",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -1,2 +0,3 @@
-## Material Icons Extended by Infragistics  
+## Material Icons Extended by Infragistics
+
 [![npm version](https://badge.fury.io/js/%40igniteui%2Fmaterial-icons-extended.svg)](https://badge.fury.io/js/%40igniteui%2Fmaterial-icons-extended)
@@ -39,5 +40,5 @@
 ```typescript
-import { Component, OnInit } from "@angular/core";
-import { IgxIconService } from "igniteui-angular";
-import { github } from "@igniteui/material-icons-extended";
+import { Component, OnInit } from '@angular/core';
+import { IgxIconService } from 'igniteui-angular';
+import { github } from '@igniteui/material-icons-extended';
 // ...
@@ -49,3 +50,3 @@ export class SampleComponent implements OnInit {
     // Register a single icon
-    this.iconService.addSvgIconFromText(github.name, github.value, "imx-icons");
+    this.iconService.addSvgIconFromText(github.name, github.value, 'imx-icons');
   }
@@ -59,3 +60,3 @@ }
 //...
-import { github, health, programming } from "@igniteui/material-icons-extended";
+import { github, health, programming } from '@igniteui/material-icons-extended';
 
@@ -66,3 +67,3 @@ export class SampleComponent implements OnInit {
     for (let icon of [...health, ...programming, github]) {
-      this.iconService.addSvgIconFromText(icon.name, icon.value, "imx-icons");
+      this.iconService.addSvgIconFromText(icon.name, icon.value, 'imx-icons');
     }
@@ -77,3 +78,3 @@ }
 
-In yout component template:
+In your component template:
 
@@ -93,7 +94,7 @@ ```html
 ```javascript
-import InlineSVG from "svg-inline-react";
-import { github } from "@igniteui/material-icons-extended";
+import InlineSVG from 'svg-inline-react';
+import { github } from '@igniteui/material-icons-extended';
 
 const App = () => (
-  <InlineSVG src={github.value} style={{ width: "24px", height: "24px" }} />
+  <InlineSVG src={github.value} style={{ width: '24px', height: '24px' }} />
 );
@@ -104,29 +105,63 @@ ```
 
-##### CSS Sprite Map
+##### CSS Sprite Maps
 
-The package includes an SVG sprite that bundles all icons into a single file. Alongside this sprite, we include CSS, Sass, and Less files that associate each icon in the sprite with a CSS class. To consume the icons in this way, you must include one of the aforementioned style files in your project.
+We include CSS that associate each icon with a CSS class. This file can be quite large and you may not use all icons included in it. If you want to cherry-pick only the icons that will ever be used in your project, we include Sass, Less, and Stylus mixins that allow you to only add one icon at a time to the compiled CSS.
 
-For instance, with Sass, in your main Sass file import:
+To use the CSS classes, import the main the CSS sprite file in your app (verify the path to the stylesheet based on your project structure):
 
+```html
+<link
+  href="../node_modules/@igniteui/material-icons-extended/dist/styles/sprite.css"
+  rel="stylesheet"
+/>
+```
+
+Then you can simply use any of the icons in the following manner:
+
+Include the GitHub icon.
+
+```html
+<i class="imx-icon imx-github"></i>
+```
+
+To take advantage of the included mixins, import the corresponding sprite.(scss|less|styl) file.
+
+With Sass, in your main Sass file import:
+
 ```scss
-@import "~@igniteui/material-icons-extended/sprites/styles/sprite";
+@use '@igniteui/material-icons-extended/dist/styles/sprite.scss' as *;
 
-.imx-icon {
-  width: 24px;
-  height: 24px;
-  background-size: auto 100%;
+.github-icon {
+  @include imx-icon('github');
 }
 ```
 
-Then in your HTML file:
+With Less:
 
+```less
+@import '@igniteui/material-icons-extended/dist/styles/sprite.less';
+
+.github-icon {
+  .imx-icon('github');
+}
+```
+
+With Stylus:
+
+```stylus
+@import '@igniteui/material-icons-extended/dist/styles/sprite.styl'
+
+.github-icon
+    imx-icon('github')
+```
+
+Then in an HTML file:
+
 ```html
-<i class="imx-icon imx-github"></i>
+<i class="github-icon"></i>
 ```
 
-We also include a Less and Sass mixin called `igx-icon`. This mixins includes the `background-image` and `background-position`.
+#### Symbols
 
-##### Symbols
-
-The package also includes an SVG sprite with all icons listed as `<symbol>` elements. This sprite can be imported from `@igniteui/material-icons-extended/sprites/symbol/svg/sprite.symbol.svg`;
+The package also includes an SVG sprite with all icons listed as `<symbol>` elements. This sprite can be imported from `@igniteui/material-icons-extended/dist/assets/sprite.symbol.svg`;
 Once you add the image to your application, you can use the encapsulated symbols like this:
@@ -138,3 +173,3 @@
 <svg class="imx-github">
-  <use xlink:href="svg/sprite.symbol.svg#github"></use>
+  <use xlink:href="sprite.symbol.svg#imx-github"></use>
 </svg>
@@ -147,4 +182,2 @@ ```
 .imx-github {
-  width: 24px;
-  height: 24px;
   fill: royalblue;
@@ -156,3 +189,3 @@ }
 
-All SVG icons can be found in `@igniteui/material-icons-extended/src/svgs`;
+All SVG icons can be found in `@igniteui/material-icons-extended/dist/assets/svgs`;
 
@@ -159,0 +192,0 @@ ### Requests

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

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

1855138

increased by15.78%

Number of package files

406

increased by0.25%

Number of lines in readme file

190

increased by21.02%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes