如何让 <iron-icons> 在 Polymer 2.x 中工作

Question

狭义问题

通过故障排除，我想我已经将 "larger problem" 缩小到以下问题。（但我可能是错的。）：

如何正确下载最新版本的 <iron-icons> 到我的本地机器？

"latest version," 是指通过以下方式导入的版本：

<base href="//polygit.org/polymer+:master/components/">
<link rel="import" href="iron-icons/iron-icons.html">

导入以上版本<iron-icons>works on my demo here.

但是，当我执行以下任一操作时：

bower install --save PolymerElements/iron-icons

bower update --save

并尝试像这样在我的本地服务器上导入：

<link rel="import" href="/bower_components/iron-icons/iron-icons.html">

它默默地失败了，我根本看不到任何图标。但我确实看到额外的 space 图标应该呈现的地方。

更大的问题（我要解决的真正问题）

我正在尝试让我的 <iron-icons> 在浏览器中正确呈现。

我希望看到的

我希望看到像这样的两个 <iron-icon> 元素：

（锚定在其他测试元素之间：Hello World 和 <img>）

我实际看到的

根本没有图标。但是白色 space 他们应该渲染的地方。

重现步骤

运行

bower install --save PolymerElements/iron-icons

或者，如果 <iron-icons> 已经安装：

bower update --save

然后

polyserve

或

polymer serve

版本

我相信我使用的是 <iron-icons> 的 v2.0.1。 Here is the entire contents of the bower.json file.

bower.json

"iron-icons": "PolymerElements/iron-icons#^2.0.1",

配置

OS: macOS 塞拉利昂 10.12.6
硬件：MacBook Air
浏览器：Chrome版本 60.0.3112.113（正式版）（64 位）

演示

Here is my Plunker demo.

代码

以下代码确实按预期呈现 <iron-icons>：

http://plnkr.co/edit/pKnrlIbGhfQPFq10aAJS?p=preview

<base href="//polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-icon/iron-icon.html">

<dom-module id="demo-el">
  <template>

    Hello world
    <iron-icon icon="add"></iron-icon>
    <iron-icon icon="favorite"></iron-icon>
    <img src="//lorempixel.com/400/200/" />

  </template>
  <script>
    class DemoEl extends Polymer.Element {
      static get is() {
        return 'demo-el'
      }

      constructor() {
        super();
      }

    }
    customElements.define(DemoEl.is, DemoEl);
  </script>
</dom-module>

以下代码未按预期呈现 <iron-icons>（在本地提供）：

<link rel="import" href="/bower_components/polymer/polymer-element.html">
<link rel="import" href="/bower_components/webcomponentsjs/webcomponents-lite.js">
<link rel="import" href="/bower_components/iron-icon/iron-icon.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/paper-input/paper-input.html">

<dom-module id="app-main">
  <template>

    Hello world
    <iron-icon icon="add"></iron-icon>
    <iron-icon icon="favorite"></iron-icon>
    <img src="//lorempixel.com/400/200/" />

  </template>
  <script>
    class AppMain extends Polymer.Element {
      static get is() {
        return 'app-main'
      }

      constructor() {
        super();
      }

    }
    customElements.define(AppMain.is, AppMain);
  </script>
</dom-module>

但是，当我直接替换

时，上面的代码确实会按预期呈现 <iron-icons>

<base href="//polygit.org/polymer+:master/components/">
<link rel="import" href="iron-icons/iron-icons.html">

为

<link rel="import" href="/bower_components/iron-icons/iron-icons.html">

编辑

通过使用 CDN 比较导入文件的文本

<base href="//polygit.org/polymer+:master/components/">
<link rel="import" href="iron-icons/iron-icons.html">

和本地进口：

<link rel="import" href="/bower_components/iron-icons/iron-icons.html">

我发现 iron-iconset-svg.html 文件的导入版本存在差异。我的 bower.json 文件说依赖版本是 "iron-iconset-svg": "1 - 2" 或 "iron-iconset-svg": "polymerelements/iron-iconset-svg#^2.0.0" 但这里的 bower.json 文件说依赖版本是 "iron-iconset-svg": "polymerelements/iron-iconset-svg#^1.0.0"

所以，现在的问题似乎减少到如何让 iron-icons.html 的本地版本导入与在线 CDN 导入版本相同的 iron-iconset-svg.html 版本。

编辑 2

当我只是从 CDN 复制 iron-iconset-svg.html 文件并将其粘贴到我的本地文件系统时，问题仍然存在。所以，显然还有其他事情正在发生。

编辑 3

I followed the instructions here for upgrading to Polymer 2.0:

https://www.polymer-project.org/2.0/docs/upgrade#update-bower-dependencies

Remove the existing bower_components folder.

rm -rf bower_components

Update the Polymer version in bower.json to the latest versions.

Component            | Version
---------------------|--------
Polymer              | ^2.0.0
webcomponentsjs      | ^1.0.0
web-component-tester | ^6.0.0
Polymer elements     | ^2.0.0

Install the new dependencies.

bower install

这并没有解决问题。但是我无法将 Polymer elements 更新为 ^2.0.0

bower.json

"dependencies" : {
  ...
  "polymer-elements" : "^2.0.0",
  ...
}

导致错误，所以：

bower.json

"dependencies" : {
  ...
  "polymerelements" : "^2.0.0",
  ...
}

也是如此：

bower.json

"dependencies" : {
  ...
  "PolymerElements" : "^2.0.0",
  ...
}

Answer 1

@Ofisora 在评论中提出的解决方案对我有用——更新 iron-selector 和 iron-meta:

bower install --save PolymerElements/iron-meta
bower install --save PolymerElements/iron-selector

Answer 2

iron-icons is a utility import that includes the definition for the iron-icon element, iron-iconset-svg element, as well as an import for the default icon set.

这意味着 iron-icons 直接依赖于 iron-icon 和 iron-iconset-svg。 iron-icon 和 iron-iconset-svg 元素都依赖于 iron-meta.

当您将 iron-icons 更新到最新版本时，这些元素 iron-icon、iron-iconset-svg 和 iron-meta 可能不会更新，因为您将默认获得所有这些组件.因此，更新 iron-meta 是解决方案之一。

此外，当您在 Polymer 中安装或更新元素时，您会看到如下消息：

Unable to find a suitable version for iron-icons, please choose one by typing one of the numbers below:

始终根据您拥有的其他元素选择合适的或最新版本。

完成更新或安装后，您会看到如下注释：

Please note that,
    iron-iconset-svg#a47e824859 depends on iron-meta#2.0-preview which resolved to iron-meta#7404b31da3
    iron-icon#1.0.13, iron-icon#1.0.13, iron-icon#1.0.13, iron-iconset-svg#1.1.2, iron-iconset-svg#1.1.2 depends on iron-meta#^1.0.0 which resolved to iron-meta#1.1.3
    iron-icon#2.0.0, iron-iconset-svg#2.0.0 depends on iron-meta#1 - 2 which resolved to iron-meta#2.0.2

确保您阅读了这篇文章并且 install/update 需要依赖项。

注意：在我的例子中，我还必须更新 iron-selector，因为我在 iron-selector.

中使用了 iron-icon

如何让 <iron-icons> 在 Polymer 2.x 中工作

How to get <iron-icons> to work in Polymer 2.x

polymer

iron-elements

polymer-2.x

狭义问题

更大的问题（我要解决的真正问题）

我希望看到的

我实际看到的

重现步骤

版本

配置

演示

代码

编辑

编辑 2

编辑 3