Question

core-icons包含不同的图标集，例如

图标
AV-图标
通信图标
于设备的图标
硬件图标
图像图标
地图-图标
通知-图标
PNG-图标
社交图标

如何使用它们并不明显。

Answer 1

以下是纸张元素http://polymer.github.io/core-icons/components/core-icons/demo.html

中包含的图标的概述

我创建了一个演示如何使用它们的示例。

<!DOCTYPE html>
<html>
  <head>
    <title>core-icons</title>
    <!-- <script src="packages/web_components/platform.js"></script>
         not necessary anymore with Polymer >= 0.14.0 -->
    <script src="packages/web_components/dart_support.js"></script>
    <link rel="import" href="packages/paper_elements/paper_icon_button.html">
    <!-- choose the name according to the set you want to load - "social-icons" -->
    <!-- this is now accessible with a simpler path
    <link rel="import" href="packages/core_elements/src/core-icons/iconsets/social-icons.html"> 
    <link rel="import" href="packages/core_elements/core_icons/iconsets/social_icons.html"> 
    this changed again with core-elements 0.2.0+1 -->
    <link rel="import" href="packages/core_elements/social_icons.html">
  </head>
  <body>

    <!-- use the icon by setting the `icon` attribute. The value consists of iconsset-id a colon followed by the icon name. -->
    <paper-icon-button id="bookmark-button" icon="social:plus-one" style="fill:steelblue;"></paper-icon-button>

    <script type="application/dart">export 'package:polymer/init.dart';</script>
  </body>
</html>

修改

您可以使用Dart代码设置图标样式，例如

($['bookmark-button'] as dom.Element).querySelector('* /deep/ #icon').style
    ..setProperty('fill', 'red')
    ..setProperty('stroke', 'blue')
    ..setProperty('stroke-with', '3px');

这结果有点棘手，因为paper-icon-button有多个shadowRoot（实际上是3个），当我在<g>元素上设置样式时（<core-icon>内部{1}}）它已被应用，但之后不久还原，原因不明。

我刚看到这在Firefox中不起作用。据我所知，/deep/中querySelector()的填充功能正在进行中。一旦当前的Polymer版本集成在Polymer.Dart中，它可能会更好。

这适用于Dartium和Firefox：

($['bookmark-button'] as dom.Element).shadowRoot.olderShadowRoot.querySelector('#icon').style
    ..setProperty('fill', 'red')
    ..setProperty('stroke', 'blue')
    ..setProperty('stroke-with', '3px');

当<paper-icon-button>的实施发生变化时，此解决方案可能会中断，但希望在一段时间内，第一次尝试很快就会在所有浏览器中都有效。

修改

/deep/中querySelector对{{1}}的对“填充”的支持包含在Polymer.js 0.4.0中。希望下一个Polymer.dart更新也包括它。

如何在Dart中使用不同的核心图标图标集？

1 个答案:

修改

修改