@polymer/iron-icon - npm Package Compare versions

Comparing version 3.0.0-pre.21 to 3.0.0-pre.22

iron-icon.js

 /**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
 */
+import '@polymer/iron-flex-layout/iron-flex-layout.js';
+
+import {IronMeta} from '@polymer/iron-meta/iron-meta.js';
+import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+import {Base} from '@polymer/polymer/polymer-legacy.js';
+
 /**
 
-The `iron-icon` element displays an icon. By default an icon renders as a 24px square.
+The `iron-icon` element displays an icon. By default an icon renders as a 24px
+square.
 
@@ -29,14 +39,18 @@ Example using src:
 
-The iron elements include several sets of icons.
-To use the default set of icons, import `iron-icons.html` and use the `icon` attribute to specify an icon:
+The iron elements include several sets of icons. To use the default set of
+icons, import `iron-icons.js` and use the `icon` attribute to specify an icon:
 
-    <link rel="import" href="/components/iron-icons/iron-icons.html">
+    <script type="module">
+      import "@polymer/iron-icons/iron-icons.js";
+    </script>
 
     <iron-icon icon="menu"></iron-icon>
 
-To use a different built-in set of icons, import the specific `iron-icons/<iconset>-icons.html`, and
-specify the icon as `<iconset>:<icon>`. For example, to use a communication icon, you would
-use:
+To use a different built-in set of icons, import the specific
+`iron-icons/<iconset>-icons.js`, and specify the icon as `<iconset>:<icon>`.
+For example, to use a communication icon, you would use:
 
-    <link rel="import" href="/components/iron-icons/communication-icons.html">
+    <script type="module">
+      import "@polymer/iron-icons/communication-icons.js";
+    </script>
 
@@ -47,17 +61,12 @@ <iron-icon icon="communication:email"></iron-icon>
 
-Example of using an icon named `cherry` from a custom iconset with the ID `fruit`:
+Example of using an icon named `cherry` from a custom iconset with the ID
+`fruit`:
 
     <iron-icon icon="fruit:cherry"></iron-icon>
 
-See [iron-iconset](iron-iconset) and [iron-iconset-svg](iron-iconset-svg) for more information about
-how to create a custom iconset.
+See `<iron-iconset>` and `<iron-iconset-svg>` for more information about how to
+create a custom iconset.
 
-See the [iron-icons demo](iron-icons?view=demo:demo/index.html) to see the icons available
-in the various iconsets.
+See the `iron-icons` demo to see the icons available in the various iconsets.
 
-To load a subset of icons from one of the default `iron-icons` sets, you can
-use the [poly-icon](https://poly-icon.appspot.com/) tool. It allows you
-to select individual icons, and creates an iconset from them that you can
-use directly in your elements.
-
 ### Styling
@@ -81,14 +90,2 @@
 */
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-import { Base } from '@polymer/polymer/polymer-legacy.js';
-
-import '@polymer/iron-meta/iron-meta.js';
-import '@polymer/iron-flex-layout/iron-flex-layout.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
 Polymer({
@@ -142,3 +139,3 @@ _template: html`
     /**
-     * @type {!Polymer.IronMeta}
+     * @type {!IronMeta}
      */
@@ -145,0 +142,0 @@ _meta: {value: Base.create('iron-meta', {type: 'iconset'})}

manifest.json

@@ -7,6 +7,3 @@ {
     },
-    "index.html": {
-      "convertedUrl": "index.html",
-      "exports": {}
-    },
+    "index.html": null,
     "demo/async.html": {
@@ -13,0 +10,0 @@ "convertedUrl": "demo/async.html",

package.json

@@ -15,32 +15,23 @@ {
   "devDependencies": {
-    "@polymer/gen-typescript-declarations": "^1.2.2",
-    "bower": "^1.8.0",
-    "webmat": "^0.2.0",
-    "@polymer/promise-polyfill": "^3.0.0-pre.21",
-    "@polymer/iron-iconset": "^3.0.0-pre.21",
-    "@polymer/iron-icons": "^3.0.0-pre.21",
-    "@polymer/iron-component-page": "^3.0.0-pre.21",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.20",
+    "@polymer/iron-iconset": "^3.0.0-pre.20",
+    "@polymer/promise-polyfill": "^3.0.0-pre.20",
+    "@webcomponents/webcomponentsjs": "^2.0.0",
     "wct-browser-legacy": "^1.0.1",
-    "@webcomponents/webcomponentsjs": "^2.0.0",
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.21"
+    "webmat": "^0.2.2",
+    "@polymer/gen-typescript-declarations": "^1.5.0"
   },
   "scripts": {
-    "update-types": "bower install && gen-typescript-declarations --deleteExisting --outDir .",
-    "format": "webmat && npm run update-types"
+    "format": "webmat",
+    "generate-types": "gen-typescript-declarations --deleteExisting --outDir .",
+    "prepack": "npm run generate-types"
   },
-  "version": "3.0.0-pre.21",
-  "resolutions": {
-    "inherits": "2.0.3",
-    "samsam": "1.1.3",
-    "supports-color": "3.1.2",
-    "type-detect": "1.0.0",
-    "@webcomponents/webcomponentsjs": "2.0.0-beta.2"
-  },
+  "version": "3.0.0-pre.22",
   "main": "iron-icon.js",
   "author": "The Polymer Authors",
   "dependencies": {
-    "@polymer/iron-flex-layout": "^3.0.0-pre.21",
-    "@polymer/iron-meta": "^3.0.0-pre.21",
+    "@polymer/iron-flex-layout": "^3.0.0-pre.20",
+    "@polymer/iron-meta": "^3.0.0-pre.20",
     "@polymer/polymer": "^3.0.0"
   }
 }

README.md

@@ -0,23 +1,86 @@
+[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-icon.svg)](https://www.npmjs.com/package/@polymer/iron-icon)
 [![Build status](https://travis-ci.org/PolymerElements/iron-icon.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-icon)
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/PolymerElements/iron-icon)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-icon)
 
 ## <iron-icon>
 
-The `iron-icon` element displays an icon. By default an icon renders as a 24px square.
+The `iron-icon` element displays an icon. By default an icon renders as a 24px
+square.
 
-<!---
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-icon),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-icon/demo/demo/index.html).
+
+## Usage
+
+### Installation
+
 ```
-<custom-element-demo>
-  <template>
-    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
-    <link rel="import" href="../iron-icons/iron-icons.html">
-    <link rel="import" href="iron-icon.html">
-    <next-code-block></next-code-block>
-  </template>
-</custom-element-demo>
+npm install --save @polymer/iron-icon
 ```
--->
+
+### In an HTML file
+
 ```html
-<iron-icon icon="menu"></iron-icon>
-<iron-icon src="demo/location.png"></iron-icon>
+<html>
+  <head>
+    <script type="module">
+      import '@polymer/iron-icon/iron-icon.js';
+    </script>
+  </head>
+  <body>
+    <iron-icon src="demo/location.png"></iron-icon>
+
+    <!-- You can use an icon from an imported iconset. -->
+    <script type="module">
+      import '@polymer/iron-icons/iron-icons.js';
+    </script>
+    <iron-icon icon="search"></iron-icon>
+  </body>
+</html>
 ```
+
+### In a Polymer 3 element
+
+```js
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import '@polymer/iron-icon/iron-icon.js';
+
+class ExampleElement extends PolymerElement {
+  static get template() {
+    return html`
+      <iron-icon src="demo/location.png"></iron-icon>
+    `;
+  }
+}
+
+customElements.define('example-element', ExampleElement);
+```
+
+## Contributing
+
+If you want to send a PR to this element, here are the instructions for running
+the tests and demo locally:
+
+### Installation
+
+```sh
+git clone https://github.com/PolymerElements/iron-icon
+cd iron-icon
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+
+```sh
+polymer serve --npm
+open http://127.0.0.1:<port>/demo/
+```
+
+### Running the tests
+
+```sh
+polymer test --npm
+```

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

7

decreased by-30%

Lines of code

290

increased by40.78%

Number of lines in readme file

87

increased by262.5%

Worsened metrics

Total package byte prevSize

21894

decreased by-25.47%

Number of package files

10

decreased by-37.5%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@polymer/iron-flex-layout@^3.0.0-pre.20

• Updated@polymer/iron-meta@^3.0.0-pre.20