如何获得 <iron-icons> 在Polymer 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> v2.0.1。 这是bower.json文件的全部内容。

bower.json

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

组态

作业系统：macOS Sierra 10.12.6
硬件：MacBook Air
浏览器：Chrome版本60.0.3112.113（正式版本）（64位）

演示版

这是我的Plunker演示。

码

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

对于

<base href="//polygit.org/polymer+:master/components/">
<link rel="import" href="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

我按照此处的说明升级到Polymer 2.0：

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

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

bower install

2. 将bower.json中的Polymer版本更新为最新版本。

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

3. 安装新的依赖项。

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

这没有解决问题。 但是我无法将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-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 。