		@@ -26,2 +26,32 @@ [
		"description": "Additional Icon Options. See the Icon component documentation."
		},
		"iconSize": {
		"flowType": {
		"name": "union",
		"raw": "'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge'",
		"elements": [
		{
		"name": "literal",
		"value": "'xsmall'"
		},
		{
		"name": "literal",
		"value": "'small'"
		},
		{
		"name": "literal",
		"value": "'medium'"
		},
		{
		"name": "literal",
		"value": "'large'"
		},
		{
		"name": "literal",
		"value": "'xlarge'"
		}
		]
		},
		"required": false,
		"description": ""
		}
		@@ -28,0 +58,0 @@ },

index.d.ts

		@@ -12,2 +12,3 @@ import { SimpleTagPropsT } from '@rmwc/base/simpleTag';
		iconOptions?: IconOptionsT;
		iconSize?: 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge';
		} & DeprecatedIconPropsT & SimpleTagPropsT;
		@@ -14,0 +15,0 @@ /**

index.js

		@@ -34,2 +34,4 @@ 'use strict';

		function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
		@@ -113,2 +115,3 @@
		iconOptions = _props$iconOptions === undefined ? {} : _props$iconOptions,
		iconSize = _props.iconSize,
		use = _props.use,
		@@ -120,3 +123,3 @@ children = _props.children,
		basename = _props.basename,
		rest = _objectWithoutProperties(_props, ['icon', 'iconOptions', 'use', 'children', 'render', 'strategy', 'prefix', 'basename']);
		rest = _objectWithoutProperties(_props, ['icon', 'iconOptions', 'iconSize', 'use', 'children', 'render', 'strategy', 'prefix', 'basename']);

		@@ -158,3 +161,3 @@ if (use !== undefined \|\| children !== undefined) {
		content: content,
		className: (0, _classnames2.default)(basenameToUse, rest.className, iconClassName)
		className: (0, _classnames2.default)('rmwc-icon', basenameToUse, rest.className, iconClassName, _defineProperty({}, 'rmwc-icon--size-' + (iconSize \|\| ''), !!iconSize))
		}));
		@@ -161,0 +164,0 @@ }

package.json

		{
		"name": "@rmwc/icon",
		"version": "2.1.3",
		"version": "2.2.0",
		"description": "RMWC Icon component",
		@@ -29,4 +29,4 @@ "main": "index.js",
		"dependencies": {
		"@rmwc/base": "^2.1.3",
		"@rmwc/provider": "^2.1.3",
		"@rmwc/base": "^2.2.0",
		"@rmwc/provider": "^2.2.0",
		"classnames": "^2.2.5",
		@@ -33,0 +33,0 @@ "prop-types": "^15.6.1"

README.md

		@@ -1,2 +0,2 @@
		# Icons
		# Icons `RMWC Addon`

		@@ -6,3 +6,6 @@ > Material icons use geometric shapes to visually represent core ideas, capabilities, or topics.
		- Module @rmwc/icon
		- Import styles:
		- import '@rmwc/icon/icon.css';


		Icons are not part of the official material-components-web spec, but they are referenced many times in the documentation. RMWC provides a declarative way to use icons. Note that RMWC does not ship with any icons of its own. You can include [Material Icons](https://material.io/icons/), any other font icon set, use SVGs, or your own images.
		@@ -78,2 +81,15 @@

		## Icon Sizing

		The Material spec details multiple sizes for icons. The Icon component doesn't assign a size by default, but these are available to you to force a size.

		```jsx render

		<Icon icon="favorite" iconSize="xsmall" /> {/* 18px */}
		<Icon icon="favorite" iconSize="small" /> {/* 20px */}
		<Icon icon="favorite" iconSize="medium" /> {/* 24px */}
		<Icon icon="favorite" iconSize="large" /> {/* 36px */}
		<Icon icon="favorite" iconSize="xlarge" /> {/* 48px */}
		```

		## Custom Rendering
		@@ -80,0 +96,0 @@

index.js.flow

Sorry, the diff of this file is not supported yet

@rmwc/icon - npm Package Compare versions

New alerts