third_party/polymer/components/core-iconset-svg/demo.html

   1 <!doctype html>
   2 <!--
   3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10
  11 <html>
  12 <head>
  13
  14   <title>core-iconset-svg</title>
  15   <script src="../webcomponentsjs/webcomponents.js"></script>
  16   <link rel="import" href="svg-sample-icons.html">
  17   <style shim-shadowdom>
  18     .embiggen core-icon {
  19       height: 128px;
  20       width: 128px;
  21     }
  22
  23     core-icon:nth-of-type(1) {
  24       fill: orange;
  25     }
  26
  27     core-icon:nth-of-type(2) {
  28       fill: green;
  29       stroke: orange;
  30     }
  31
  32     core-icon:nth-of-type(3) {
  33       fill: navy;
  34     }
  35
  36     core-icon {
  37       transition: all 0.5s;
  38       -webkit-transition: all 0.5s;
  39     }
  40
  41     core-icon:hover {
  42       -webkit-filter: drop-shadow( 2px 2px 2px #333 );
  43       filter: drop-shadow( 2px 2px 2px #333 );
  44     }
  45   </style>
  46 </head>
  47 <body unresolved>
  48
  49   <template is="auto-binding">
  50     <div class="embiggen">
  51       <template repeat="{{icon in icons}}">
  52         <core-icon icon="{{icon}}"></core-icon>
  53       </template>
  54     </div>
  55     <core-meta id="meta" type="iconset"></core-meta>
  56   </template>
  57   <script>
  58     addEventListener('template-bound', function(e) {
  59       var template = e.target;
  60       var setName = 'svg-sample-icons';
  61       var icons = template.$.meta.byId(setName).iconNames;
  62       template.icons = icons.map(function(ic){ return setName + ':' +ic });
  63     });
  64   </script>
  65 </body>
  66 </html>