@fontsource/material-icons-outlined - npm Package Compare versions

Comparing version 4.2.4 to 4.3.0

metadata.json

		@@ -11,2 +11,3 @@ {
		"version": "v4",
		"category": "other",
		"source": "https://github.com/google/material-design-icons",
		@@ -13,0 +14,0 @@ "license": "https://github.com/google/material-design-icons/blob/master/LICENSE",

package.json

		{
		"name": "@fontsource/material-icons-outlined",
		"version": "4.2.4",
		"version": "4.3.0",
		"description": "Self-host the Material Icons Outlined font in a neatly bundled NPM package.",
		@@ -30,3 +30,3 @@ "main": "index.css",
		},
		"gitHead": "edbdfce1b9ff77f385451090871415391c3ad14e"
		"gitHead": "a6662f1f915c4779a5ef3f9b02efa8212a974788"
		}

README.md

		@@ -5,7 +5,7 @@ # Fontsource Material Icons Outlined

		The CSS and web font files to easily self-host the “Material Icons Outlined” font. Please visit the main [Fontsource monorepo](https://github.com/fontsource/fontsource) to view more details on this package.
		The CSS and web font files to easily self-host the “Material Icons Outlined” font. Please visit the main [Fontsource website](https://fontsource.org/fonts/material-icons-outlined) to view more details on this package.

		## Installation
		## Quick Installation

		Fontsource assumes you are using a bundler, such as Webpack, to load in CSS. Solutions like [CRA](https://create-react-app.dev/), [Gatsby](https://www.gatsbyjs.org/) and [Next.js](https://nextjs.org/) are prebuilt examples that are compatible.
		Fontsource has a variety of methods to import CSS, such as using a bundler like Webpack. Alternatively, it supports SASS. Full documentation can be found [here](https://fontsource.org/docs/introduction).

		@@ -16,3 +16,3 @@ ```javascript

		Then within your app entry file or site component, import it in. For example in Gatsby, you could choose to import it into a layout template (`layout.js`), page component (`index.js`), or `gatsby-browser.js`.
		Within your app entry file or site component, import it in.

		@@ -23,44 +23,2 @@ ```javascript

		Fontsource allows you to select weights and even individual styles, allowing you to cut down on payload sizes to the last byte! Utilizing the CSS unicode-range selector, all language subsets are accounted for.

		```javascript
		import "@fontsource/material-icons-outlined/500.css" // Weight 500.
		import "@fontsource/material-icons-outlined/900-italic.css" // Italic variant.
		```

		Alternatively, the same solutions could be imported via SCSS!

		```scss
		@import "~@fontsource/material-icons-outlined/index.css"; // Weight 400.
		@import "~@fontsource/material-icons-outlined/300-italic.css";
		```

		For more advanced setups, you can use our highly customisable Sass mixins that can modify many of the existing @font-face variables.

		```scss
		@use "@fontsource/material-icons-outlined/scss/mixins" as MaterialIcons Outlined;

		// Fully customisable single @font-face mixin.
		@include MaterialIcons Outlined.fontFaceCustom($weight: 600, $display: optional, $woff2Path:
		"#{$fontDir}/custom-file.woff2", $unicodeRange: false);
		```

		For those not using Dart Sass, you can still use @import although it can be highly problematic as variables are placed in the global scope which can conflict with existing Sass setups. It's highly recommended to migrate to Dart Sass as all other versions have been deprecated.

		```scss
		@import "~@fontsource/material-icons-outlined/scss/mixins";

		// Fully customisable single @font-face mixin.
		@include fontFaceCustom(
		$weight: 600,
		$display: optional,
		$woff2Path: "#{$fontDir}/custom-file.woff2",
		$unicodeRange: false
		);
		```

		You can see all of the existing inputtable mixin variables [here](https://github.com/fontsource/fontsource/tree/master/packages/material-icons-outlined/scss/mixins.scss).

		_These examples may not reflect actual compatibility. Please refer below._

		Supported variables:
		@@ -70,2 +28,3 @@
		- Styles: `[normal]`
		- Supported subsets: `[all]`

		@@ -80,14 +39,2 @@ Finally, you can reference the font name in a CSS stylesheet, CSS Module, or CSS-in-JS.

		## Additional Options

		In the rare case you need to individually select a language subset and not utilize the CSS unicode-range selector, you may specify the import as follows. This is especially not recommended for languages, such as Japanese, with a large amount of characters.

		```javascript
		import "@fontsource/material-icons-outlined/latin-ext.css" // All weights with normal style included.
		import "@fontsource/material-icons-outlined/cyrillic-ext-500.css" // Weight 500 with normal style.
		import "@fontsource/material-icons-outlined/greek-900-italic.css" // Italic variant.
		```

		- Supported subsets: `[all]`

		## Licensing
		@@ -94,0 +41,0 @@

@fontsource/material-icons-outlined - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics