[英]How to get <iron-icons> to work in Polymer 2.x
By troubleshooting, I think I have narrowed my "larger problem" down to the following question. 通过故障排除,我认为我已将“更大的问题”缩小为以下问题。 (But I could be wrong.):
(但我可能是错的。):
How do I properly download the latest version of <iron-icons>
to my local machine? 如何将最新版本的
<iron-icons>
正确下载到本地计算机?
By "latest version," I mean the version that is imported via the following: “最新版本”是指通过以下方式导入的版本:
<base href="//polygit.org/polymer+:master/components/">
<link rel="import" href="iron-icons/iron-icons.html">
The above version of importing <iron-icons>
works on my demo here. 上面的
<iron-icons>
导入版本适用于我的演示。
However, when I do either of the following: 但是,当我执行以下任一操作时:
bower install --save PolymerElements/iron-icons
bower update --save
And try to import on my local server like this: 并尝试像这样在我的本地服务器上导入:
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
it fails silently and I see no icons at all. 它默默地失败了,我根本看不到任何图标。 But I do see extra space where the icons are supposed to render.
但是我确实看到了应该渲染图标的额外空间。
I am trying to get my <iron-icons>
to render properly in the browser. 我正在尝试使
<iron-icons>
在浏览器中正确呈现。
I expect to see a two <iron-icon>
elements like this: 我希望看到两个像这样的
<iron-icon>
元素:
(anchored in between other test elements: Hello World
and <img>
) (锚定在其他测试元素之间:
Hello World
和<img>
)
No icons at all. 完全没有图标。 But white space where they should render.
但是它们应该渲染的空白区域。
Run 跑
bower install --save PolymerElements/iron-icons
or, if <iron-icons>
is already installed: 或者,如果已经安装了
<iron-icons>
:
bower update --save
then 然后
polyserve
or 要么
polymer serve
I believe I am using v2.0.1 of <iron-icons>
. 我相信我正在使用
<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 Sierra 10.12.6 作业系统:macOS Sierra 10.12.6
Hardware: MacBook Air 硬件:MacBook Air
Browser: Chrome Version 60.0.3112.113 (Official Build) (64-bit) 浏览器:Chrome版本60.0.3112.113(正式版本)(64位)
Here is my Plunker demo. 这是我的Plunker演示。
The following code does render <iron-icons>
as expected: 以下代码确实按预期方式呈现
<iron-icons>
:
<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>
The following code does NOT render <iron-icons>
as expected (served locally): 以下代码未按预期方式呈现
<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>
However, the above code does render <iron-icons>
as expected when I do a direct substitution of: 但是,当我直接替换以下代码时,上面的代码确实呈现了
<iron-icons>
:
<base href="//polygit.org/polymer+:master/components/"> <link rel="import" href="iron-icons/iron-icons.html">
for 对于
<base href="//polygit.org/polymer+:master/components/">
<link rel="import" href="iron-icons/iron-icons.html">
By comparing the text of the imported files using the CDN 通过使用CDN比较导入文件的文本
<base href="//polygit.org/polymer+:master/components/"> <link rel="import" href="iron-icons/iron-icons.html">
and local imports: 和本地进口:
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
I discovered there is a discrepancy in the imported version of the iron-iconset-svg.html
file. 我发现
iron-iconset-svg.html
文件的导入版本中存在差异。 My bower.json file says the dependent version is "iron-iconset-svg": "1 - 2"
or "iron-iconset-svg": "polymerelements/iron-iconset-svg#^2.0.0"
but the bower.json file here says the dependent version is "iron-iconset-svg": "polymerelements/iron-iconset-svg#^1.0.0"
我的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"
So, now the question appears to reduce to how do I get the local version of iron-icons.html
to import the same version of iron-iconset-svg.html
as the online CDN import version. 因此,现在的问题似乎减少到了如何获取本地版本的
iron-icons.html
来导入与在线CDN导入版本相同的iron-iconset-svg.html
版本。
The problem persists when I just copy the iron-iconset-svg.html
file from the CDN and paste it into my local file system. 当我仅从CDN复制
iron-iconset-svg.html
文件并将其粘贴到本地文件系统时,问题仍然存在。 So, apparently something else is going on too. 因此,显然还有其他事情在发生。
I followed the instructions here for upgrading to Polymer 2.0: 我按照此处的说明升级到Polymer 2.0:
- Remove the existing bower_components folder.
删除现有的bower_components文件夹。
bower install
- Update the Polymer version in bower.json to the latest versions.
将bower.json中的Polymer版本更新为最新版本。
"dependencies" : {
...
"polymer-elements" : "^2.0.0",
...
}
- Install the new dependencies.
安装新的依赖项。
"dependencies" : {
...
"polymerelements" : "^2.0.0",
...
}
This did not solve the problem. 这没有解决问题。 However I could not update
Polymer elements
to ^2.0.0
但是我无法将
Polymer elements
更新为^2.0.0
"dependencies" : { ... "polymer-elements" : "^2.0.0", ... }
caused an error and so did: 导致了一个错误,所以:
"dependencies" : { ... "polymerelements" : "^2.0.0", ... }
and so did: 所以:
"dependencies" : { ... "PolymerElements" : "^2.0.0", ... }
The solution proposed by @Ofisora in the comments works for me—update iron-selector
and iron-meta
: @Ofisora在评论中提出的解决方案对我有用—更新
iron-selector
和iron-meta
:
bower install --save PolymerElements/iron-meta
bower install --save PolymerElements/iron-selector
iron-icons
is a utility import that includes the definition for theiron-icon
element,iron-iconset-svg
element, as well as an import for the default icon set.iron-icons
是一种实用程序导入,其中包括iron-icon
元素,iron-iconset-svg
元素的定义以及默认图标集的导入。
This means that iron-icons
is directly dependent on both iron-icon
and iron-iconset-svg
. 这意味着
iron-icons
直接依赖于iron-icon
和iron-iconset-svg
iron-icon
iron-iconset-svg
。 And both iron-icon
and iron-iconset-svg
element depends on iron-meta
. 而这两个
iron-icon
和iron-iconset-svg
元素取决于iron-meta
。
When you update iron-icons
to the latest version, these elements iron-icon
, iron-iconset-svg
and iron-meta
might not get updated since you will get all these components by default. 当您将
iron-icons
更新到最新版本时,这些元素iron-icon
, iron-iconset-svg
和iron-meta
可能不会更新,因为默认情况下会获得所有这些组件。 So, updating iron-meta
is one of the solution. 因此,更新
iron-meta
是解决方案之一。
Unable to find a suitable version for iron-icons, please choose one by typing one of the numbers below:
找不到适合铁图标的版本,请通过键入以下数字之一选择一个:
Always choose the suitable or latest version depending on other element you have. 始终根据您拥有的其他元素选择合适的版本或最新版本。
When finished updating or installing you will see a note like: 完成更新或安装后,您将看到类似以下的注释:
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
Make sure you read this and install/update dependencies required. 确保您已阅读并安装/更新了所需的依赖项。
iron-selector
as well since I was using iron-icon
inside the iron-selector
.
iron-selector
,因为我在iron-selector
使用iron-icon
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.