如何使<铁图标>在聚合物2.x中工作

Question

狭义问题

通过故障排除，我认为我已经将“更大的问题”缩小到以下问题。(但我可能错了。)

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

所谓“最新版本”，我指的是通过以下方式导入的版本：

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

导入<iron-icons> 在这里做我的演示。的上述版本

然而，当我做以下任何一件事情时：

bower install --save PolymerElements/iron-icons

bower update --save

并尝试在本地服务器上导入以下内容：

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

它无声地失败了，我根本没有看到任何图标。但我确实看到了额外的空间图标应该渲染。

更大的问题(我正试图解决的真正问题)

我正在努力使我的<iron-icons>在浏览器中正确呈现。

我希望看到的

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

​

​

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

我真正看到的

根本没有图标。而是应该渲染的空白处。

复制步骤

跑

bower install --save PolymerElements/iron-icons

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

bower update --save

然后

polyserve

或

polymer serve

版本

我相信我使用的是<iron-icons>的2.0.1版本。以下是bower.json文件的全部内容。

bower.json

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

配置

操作系统: macOS塞拉利昂10.12.6

硬件: MacBook Air

浏览器: Chrome版本60.0.3112.113 (官方版本)(64位)

演示

这是我的柱塞演示。

代码

以下代码确实按照预期呈现<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

我按照这里关于升级到Polymer2.0的说明：

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

1. 删除现有的bower_components文件夹。

rm -rf bower_components

1. 将bower.json中的聚合物版本更新为最新版本。

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

1. 安装新的依赖项。

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是一个实用程序导入，它包括iron-icon元素、iron-iconset-svg元素的定义，以及默认图标集的导入。

这意味着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是解决方案之一。

此外，当您在聚合物中安装或更新元素时，您将看到如下消息：

​

无法为熨斗图标找到合适的版本，请键入以下数字之一选择一个：

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

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

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

请确保阅读了这些内容，并安装/更新了所需的依赖项。

注意:在我的例子中，我还必须更新iron-selector，因为我在iron-selector中使用了iron-icon。

​