如何獲得 <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 。