Polymer-iron-icon
ポリマー-鉄のアイコン
<iron-icon>要素は、単一のアイコンを表示するために使用されます。 デフォルトのアイコンサイズは24ピクセルの正方形です。
以下に示すように、srcを使用してアイコンを表示できます
<iron-icon src = "icon.png"></iron-icon>次のコードは、アイコンのサイズを設定する方法を示しています。
<iron-icon class = "big" src = "big_icon.png"></iron-icon>
<style is = "custom-style">
.big {
--iron-icon-height: 20px;
--iron-icon-width: 20px;
}
</style>鉄の要素にはさまざまなアイコンがあります。 デフォルトのアイコンセットについては、次のコマンドに示すように、インデックスファイルにiron-iconslファイルをインポートし、アイコン属性を使用してアイコンを定義する必要があります。
<link rel = "import" href = "/components/iron-icons/iron-iconsl">
<iron-icon icon = "android"></iron-icon>また、iron-icons/<iconset> iconslファイルをインポートしてアイコンを<iconset>：<icon>として定義することにより、さまざまな組み込みアイコンセットを使用することもできます。
たとえば、通信アイコンを使用する場合、コードは次のようになります-
<link rel = "import" href = "/components/iron-icons/communication-iconsl">
<iron-icon icon = "communication:email"></iron-icon>以下に示すように、カスタムアイコンセットを作成してアイコンを使用することもできます-
<iron-icon icon = "fruit:berry"></iron-icon>次の表は、スタイリングに使用されるカスタムプロパティを示しています-
| Sr.No. | Property name & Description |
|---|---|
| 1 |
--iron-icon アイコンに適用されるのはミックスインです。 デフォルト値は\ {}です |
| 2 |
--iron-icon-width アイコンの幅を指定します。 デフォルト値は24pxです。 |
| 3 |
--iron-icon-height アイコンの高さを指定します。 デフォルト値は24pxです。 |
| 4 |
--iron-icon-fill-color SVGアイコンの色を塗りつぶすためのプロパティ。 デフォルト値はcurrentcolorです。 |
| 5 |
--iron-icon-stroke-color SVGアイコンのストロークの色を塗りつぶすためのプロパティ。 |
例
iron-icon要素を使用するには、コマンドプロンプトでプロジェクトフォルダーに移動し、次のコマンドを使用します-
bower install PolymerElements/iron-icon --save次の例は、鉄アイコン要素の使用を示しています-
<!DOCTYPE html>
<html>
<head>
<title>iron-icon</title>
<base href = "https://user-content-dot-custom-elements.appspot.com/PolymerElements/iron-icon/v1.0.13/iron-icon/">
<script src = "../webcomponentsjs/webcomponents-lite.js"></script>
<link rel = "import" href = "../iron-icons/iron-iconsl">
<link rel = "import" href = "iron-iconl">
</head>
<body>
<h2>Iron-Icon Example</h2>
<iron-icon icon = "android"></iron-icon>
</body>
</html>出力
アプリケーションを実行するには、プロジェクトディレクトリに移動し、次のコマンドを実行します-
polymer serveここでブラウザを開き、 http：//127.0.0.1：8081/ に移動します。 出力は次のようになります。
