├── .gitignore
├── LICENSE
├── README.md
├── app.yaml
├── bower.json
├── elements
    └── elements.html
├── gulpfile.js
├── index.html
├── package.json
└── scripts
    └── deploy.sh


/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | dist
3 | node_modules
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | // Copyright (c) 2016 The Polymer Authors. All rights reserved.
 2 | //
 3 | // Redistribution and use in source and binary forms, with or without
 4 | // modification, are permitted provided that the following conditions are
 5 | // met:
 6 | //
 7 | //    * Redistributions of source code must retain the above copyright
 8 | // notice, this list of conditions and the following disclaimer.
 9 | //    * Redistributions in binary form must reproduce the above
10 | // copyright notice, this list of conditions and the following disclaimer
11 | // in the documentation and/or other materials provided with the
12 | // distribution.
13 | //    * Neither the name of Google Inc. nor the names of its
14 | // contributors may be used to endorse or promote products derived from
15 | // this software without specific prior written permission.
16 | //
17 | // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
18 | // "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
19 | // LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
20 | // A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
21 | // OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
22 | // SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
23 | // LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
24 | // DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
25 | // THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
26 | // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
27 | // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # polyicon
 2 | 
 3 | A custom icon set generator from Polymers icon sets. Normally, you'd load an entire icon set
 4 | even if you only use one of its icons in your app. This online tool makes it easy to create
 5 | an optimized version with only the icons your ap needs.
 6 | 
 7 | ### Try it
 8 | 
 9 | 1. Visit https://poly-icon.appspot.com/
10 | 2. Select the icons you want to use in your app
11 | 3. Download the optimized `<iron-iconset-svg>` markup and create an HTML import for it
12 | 4. Load the import in your app and start using!
13 | 
14 | For example, if your icon set name is "myicons" and the icon you want to use from that set is "hamburger", usage would look like:
15 | 
16 |     <iron-icon icon="myicons:hamburger"></iron-icon>
17 | 
18 | Boom!
19 | 


--------------------------------------------------------------------------------
/app.yaml:
--------------------------------------------------------------------------------
 1 | runtime: python27
 2 | api_version: 1
 3 | threadsafe: yes
 4 | 
 5 | handlers:
 6 | 
 7 | - url: /$
 8 |   static_files: index.html
 9 |   upload: index\.html
10 |   secure: always
11 | 
12 | - url: /(.*).(html|js|json|css)
13 |   static_files: \1.\2
14 |   upload: (.*)\.(html|js|json|css)
15 |   secure: always
16 | 
17 | skip_files:
18 |   - ^(.*/)?#.*#$
19 |   - ^(.*/)?.*~$
20 |   - ^(.*/)?.*\.py[co]$
21 |   - ^(.*/)?.*/RCS/.*$
22 |   - ^(.*/)?\..*$
23 |   - gulpfile.js
24 |   - (package|bower).json
25 |   - test*
26 |   - node_modules/(.*)
27 |   - bower_components/[^/]+/bower_components/.*$
28 |   - bower_components/(.+/)+(test/|demo/|README|AUTHORS|CONTRIBUTING|PATENTS|Makefile)
29 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "iconset-generator",
 3 |   "description": "Generates a custom icon set",
 4 |   "version": "0.0.1",
 5 |   "main": "index.html",
 6 |   "author": "The Polymer Authors",
 7 |   "license": "BSD-3-Clause",
 8 |   "ignore": [
 9 |     "**/.*",
10 |     "node_modules",
11 |     "bower_components",
12 |     "test",
13 |     "tests"
14 |   ],
15 |   "dependencies": {
16 |     "iron-icon": "PolymerElements/iron-icon#^1.0.7",
17 |     "iron-icons": "PolymerElements/iron-icons#^1.1.0",
18 |     "iron-meta": "PolymerElements/iron-meta#^1.1.1",
19 |     "iron-selector": "PolymerElements/iron-selector#^1.0.8",
20 |     "paper-header-panel": "PolymerElements/paper-header-panel#^1.1.2",
21 |     "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.6",
22 |     "paper-input": "PolymerElements/paper-input#^1.1.3",
23 |     "paper-styles": "PolymerElements/paper-styles#^1.1.1",
24 |     "paper-toast": "PolymerElements/paper-toast#^1.1.1",
25 |     "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.0.12",
26 |     "paper-toolbar": "PolymerElements/paper-toolbar#^1.1.2"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/elements/elements.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../bower_components/polymer/polymer.html">
 2 | 
 3 | <link rel="import" href="../bower_components/paper-styles/color.html">
 4 | <link rel="import" href="../bower_components/paper-styles/typography.html">
 5 | 
 6 | <link rel="import" href="../bower_components/iron-icon/iron-icon.html">
 7 | <link rel="import" href="../bower_components/iron-icons/iron-icons.html">
 8 | <link rel="import" href="../bower_components/iron-icons/av-icons.html">
 9 | <link rel="import" href="../bower_components/iron-icons/communication-icons.html">
10 | <link rel="import" href="../bower_components/iron-icons/device-icons.html">
11 | <link rel="import" href="../bower_components/iron-icons/editor-icons.html">
12 | <link rel="import" href="../bower_components/iron-icons/hardware-icons.html">
13 | <link rel="import" href="../bower_components/iron-icons/image-icons.html">
14 | <link rel="import" href="../bower_components/iron-icons/maps-icons.html">
15 | <link rel="import" href="../bower_components/iron-icons/notification-icons.html">
16 | <link rel="import" href="../bower_components/iron-icons/social-icons.html">
17 | <link rel="import" href="../bower_components/iron-icons/places-icons.html">
18 | 
19 | <link rel="import" href="../bower_components/iron-selector/iron-selector.html">
20 | <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
21 | <link rel="import" href="../bower_components/paper-input/paper-input.html">
22 | <link rel="import" href="../bower_components/paper-toast/paper-toast.html">
23 | <link rel="import" href="../bower_components/paper-toggle-button/paper-toggle-button.html">
24 | <link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
25 | <link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html">
26 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
 3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 6 | Code distributed by Google as part of the polymer project is also
 7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 8 | */
 9 | 
10 | 'use strict';
11 | 
12 | let del = require('del');
13 | let gulp = require('gulp');
14 | let $ = require('gulp-load-plugins')();
15 | let polyBuild = require('polybuild');
16 | let merge = require('merge-stream');
17 | let runSequence = require('run-sequence');
18 | 
19 | // function minifyHtml() {
20 | //   return $.minifyHtml({quotes: true, empty: true, spare: true});
21 | // }
22 | 
23 | // function uglifyJS() {
24 | //   return $.uglify({preserveComments: 'some'});
25 | // }
26 | 
27 | function polybuild() {
28 |   return polyBuild({maximumCrush: true, suffix: ''});
29 | }
30 | 
31 | function license() {
32 |   return $.license('BSD-3-Clause', {
33 |     organization: 'The Polymer Project Authors. All rights reserved.',
34 |     tiny: true
35 |   });
36 | }
37 | 
38 | gulp.task('clean', function() {
39 |   return del(['dist']);
40 | });
41 | 
42 | gulp.task('copy', function() {
43 |   let docs = gulp.src(['*.html'], {base: '.'})
44 |     .pipe(gulp.dest('dist'));
45 | 
46 |   let gae = gulp.src([
47 |       //'{templates,lib,tests}/**/*'
48 |       'app.yaml'
49 |     ])
50 |     .pipe(gulp.dest('dist'));
51 | 
52 |   let bower = gulp.src([
53 |       'bower_components/webcomponentsjs/webcomponents-lite*.js'
54 |     ], {base: '.'})
55 |     .pipe(gulp.dest('dist'));
56 | 
57 |   return merge(docs, gae, bower);
58 | });
59 | 
60 | gulp.task('vulcanize', function() {
61 |   return gulp.src('elements/elements.html')
62 |     // .pipe($.vulcanize({
63 |     //   inlineScripts:true,
64 |     //   inlineCss: false,
65 |     //   stripComments: true
66 |     // }))
67 |     // .pipe($.crisper({scriptInHead: true}))
68 |     // .pipe($.if('*.html', minifyHtml())) // Minify html output
69 |     // .pipe($.if('*.js', uglifyJS())) // Minify js output
70 |     .pipe(polybuild())
71 |     .pipe($.if('*.js', license()))
72 |     .pipe(gulp.dest('dist/elements'));
73 | });
74 | 
75 | gulp.task('default', ['clean'], function(done) {
76 |   runSequence(['vulcanize', 'copy'], done);
77 | });
78 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | <head>
  4 | <meta charset="utf-8">
  5 | <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1">
  6 | <title>Polymer Custom Iconset Generator</title>
  7 | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Product+Sans">
  8 | <link rel="import" href="elements/elements.html">
  9 | <style is="custom-style">
 10 |   html, body {
 11 |     margin: 0;
 12 |     height: 100%;
 13 |   }
 14 |   body {
 15 |     @apply(--paper-font-body1);
 16 |   }
 17 | 
 18 |   iron-selector {
 19 |     display: flex;
 20 |     flex-wrap: wrap;
 21 |     justify-content: center;
 22 |     /*max-width: 95vw;*/
 23 |     margin: 0 auto;
 24 |     padding: 8px 0 40px 0; /*16px 16px 32px 16px*/
 25 |     margin-bottom: 38vh;
 26 |   }
 27 | 
 28 |   paper-toolbar {
 29 |     background-color: var(--paper-blue-grey-600);
 30 |   }
 31 | 
 32 |   paper-toolbar.top {
 33 |     --paper-toolbar-height: 50px;
 34 |   }
 35 | 
 36 |   paper-toolbar h2 {
 37 |     /*margin-right: 40px;*/
 38 |     font-weight: inherit;
 39 |     font-family: 'Product Sans', Arial, sans-serif;
 40 |   }
 41 | 
 42 |   a {
 43 |     text-decoration: none;
 44 |     color: currentcolor;
 45 |   }
 46 | 
 47 |   paper-input {
 48 |     --paper-input-container-input-color: #fff;
 49 |     --paper-input-container-color: rgba(255,255,255,0.6);
 50 |     --paper-input-container-focus-color: #fff;
 51 |   }
 52 | 
 53 |   paper-toolbar paper-input,
 54 |   paper-toolbar paper-button {
 55 |     margin: 0 16px 0 0;
 56 |   }
 57 | 
 58 |   paper-toggle-button {
 59 |     --paper-toggle-button-label-color: #fff;
 60 |     --paper-toggle-button-checked-button-color: var(--paper-blue-grey-900);
 61 |     --paper-toggle-button-checked-bar-color: var(--paper-blue-grey-900);
 62 |   }
 63 | 
 64 |   .container {
 65 |     display: flex;
 66 |     align-items: center;
 67 |     justify-content: center;
 68 |     flex-direction: column;
 69 |     padding: 0.5em;
 70 |     border-radius: 5px;
 71 |     border: 3px solid transparent;
 72 |     cursor: pointer;
 73 |     width: 90px;
 74 |      text-overflow: ellipsis;
 75 |      overflow: hidden;
 76 |     white-space: nowrap;
 77 |   }
 78 | 
 79 |   .container iron-icon {
 80 |     fill: var(--paper-blue-grey-500);
 81 |     padding: 8px;
 82 |   }
 83 | 
 84 |   .container:hover iron-icon {
 85 |     fill: var(--paper-blue-grey-800);
 86 |   }
 87 | 
 88 |   .container.iron-selected iron-icon {
 89 |     fill: var(--paper-pink-500);
 90 |   }
 91 | 
 92 |   .container:hover {
 93 |     border: 3px solid var(--paper-blue-grey-50);
 94 |   }
 95 | 
 96 |   .container .icon_name {
 97 |     color: var(--paper-blue-grey-300);
 98 |     font-size: 10px;
 99 |   }
100 | 
101 |   /*.iconsetname {
102 |     @apply(--paper-font-body1);
103 |     text-transform: uppercase;
104 |     font-size: 16px;
105 |     position: absolute;
106 |     left: 6px;
107 |   }
108 | 
109 |   .iconsetname::before {
110 |     content: attr(title);
111 |   }*/
112 | 
113 |   footer {
114 |     position: fixed;
115 |     background-color: var(--paper-blue-grey-900);
116 |     color: #fff;
117 |     height: 40vh;
118 |     left: 0;
119 |     bottom: 0;
120 |     width: 100%;
121 |     box-sizing: border-box;
122 |     display: flex;
123 |     flex-direction: column;
124 |   }
125 | 
126 |   footer .buttons {
127 |     margin-left: 32px;
128 |     display: flex;
129 |     flex: 1;
130 |   }
131 | 
132 |   footer paper-icon-button {
133 |     --paper-icon-button-ink-color: #fff;
134 |   }
135 | 
136 |   .out {
137 |     border: none;
138 |     font: inherit;
139 |     font-family: "Roboto Mono", courier;
140 |     margin: 0;
141 |     padding: 0 16px;
142 |     overflow: auto;
143 |     position: relative;
144 |     height: 100%;
145 |   }
146 | 
147 |   .out::before {
148 |     position: absolute;
149 |     display: block;
150 |     font-family: "Roboto", sans-serif;
151 |     text-transform: uppercase;
152 |     content: 'Generated markup';
153 |     right: 16px;
154 |     top: 16px;
155 |     color: rgba(255,255,255,0.3);
156 |     font-size: 16px;
157 |   }
158 | 
159 |   #markup::selection {
160 |     background-color: var(--paper-blue-grey-50);
161 |   }
162 | 
163 |   #example {
164 |     display: flex;
165 |     align-items: center;
166 |     border-bottom: 3px solid var(--paper-blue-grey-600);
167 |     height: 75px;
168 |     flex-shrink: 0;
169 |   }
170 | 
171 |   #example::before {
172 |     content: 'Example usage';
173 |   }
174 | 
175 |   paper-toast {
176 |     /*--paper-toast-background-color: #fff;*/
177 |     /*--paper-toast-color: #313131;*/
178 |     bottom: 40vh
179 |   }
180 | 
181 |   .warning {
182 |     padding: 1em;
183 |   }
184 | 
185 |   @media all and (max-width: 450px) {
186 |     #newlines {
187 |       display: none;
188 |     }
189 |   }
190 | </style>
191 | </head>
192 | <body>
193 | 
194 | <div class="warning">Not working? Try a browser with newer ES6 features.</div>
195 | 
196 | <template is="dom-bind" id="t">
197 | 
198 |   <iron-meta type="iconset" list="{{iconsets}}"></iron-meta>
199 | 
200 |   <paper-header-panel mode="waterfall">
201 |     <paper-toolbar class="top" justify="justified">
202 |       <h2><a href="/">Polymer Iconset Generator</a></h2>
203 |       <!-- <paper-icon-button icon="icons:select-all" title="Toggle all icons"
204 |           on-transitionend="toggleAllIcons"></paper-icon-button> -->
205 |       <paper-input no-label-float placeholder="Filter Icons" value="" on-value-changed="onFilterTermChanged"></paper-input>
206 |     </paper-toolbar>
207 |     <div>
208 |       <iron-selector id="selector" multi attr-for-selected="data-icon">
209 |         <template is="dom-repeat" items="[[iconsets]]" as="set">
210 |           <!-- <h3 class="iconsetname" title$="[[set.name]]"></h3> -->
211 | 
212 |           <template is="dom-repeat" items="[[getIconNames(set, filterTerm)]]">
213 |             <span class="container" on-click="generateMarkup" data-icon$="[[item]]">
214 |               <iron-icon icon="[[item]]" title="[[item]]"></iron-icon>
215 |               <div class="icon_name">{{iconName(item)}}</div>
216 |             </span>
217 |           </template>
218 |         </template>
219 |       </iron-selector>
220 |     </div>
221 |   </paper-header-panel>
222 | 
223 |   <footer>
224 |     <paper-toolbar>
225 |       <paper-input id="setname" label="Iconset name" value="{{iconsetName}}"
226 |                    on-change="generateMarkup"></paper-input>
227 |       <paper-input id="size" type="number" label="Icon size (px)"
228 |                    value="24" min="8" on-change="generateMarkup"></paper-input>
229 |       <paper-toggle-button id="newlines" on-tap="generateMarkup" checked>Format HTML?</paper-toggle-button>
230 |       <div class="buttons">
231 |         <paper-icon-button icon="icons:select-all" title="Select all"
232 |             on-tap="selectText"></paper-icon-button>
233 |         <paper-icon-button icon="icons:content-copy" title="Copy to clipboard"
234 |             on-tap="copyText"></paper-icon-button>
235 |       </div>
236 |       <div class="endbuttons">
237 |         <paper-icon-button icon="icons:bug-report" title="File a bug"
238 |             on-tap="fileBug" class="bug"></paper-icon-button>
239 |       </div>
240 |     </paper-toolbar>
241 |     <pre id="example" class="out">[[_computeExampleImport(iconsetName)]]</pre>
242 |     <pre id="markup" class="out">[[markup]]</pre>
243 |   </footer>
244 | 
245 |   <paper-toast id="toast" text="Markup copied"></paper-toast>
246 | 
247 | </template>
248 | 
249 | <template is="dom-template" id="tmpl">
250 | <link rel="import" href="../bower_components/iron-icon/iron-icon.html">
251 | <link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html">
252 | 
253 | <iron-iconset-svg name$="[[iconset.name]]" size$="[[iconset.size]]">
254 | <svg><defs inner-h-t-m-l="[[html]]"></defs></svg>
255 | </iron-iconset-svg>
256 | </template>
257 | 
258 | <script src="https://cdn.rawgit.com/WebReflection/url-search-params/0.2.0/build/url-search-params.js"></script>
259 | <script>
260 | (function() {
261 | 
262 |   function lazyLoadPolyfills() {
263 |     var webComponentsSupported = ('registerElement' in document
264 |       && 'import' in document.createElement('link')
265 |       && 'content' in document.createElement('template'));
266 | 
267 |     if (!webComponentsSupported) {
268 |       var script = document.createElement('script');
269 |       script.async = true;
270 |       script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
271 |       //script.onload = finishLazyLoading;
272 |       document.head.appendChild(script);
273 |     }
274 |   }
275 | 
276 |   // Dynamically load elements bundle.
277 |   // var l = document.createElement('link');
278 |   // l.rel = 'import';
279 |   // l.href = window.location.hostname == 'localhost' ?
280 |   //              'elements/elements.html' : 'dist/elements/elements.html';
281 |   // //l.setAttribute('async', '');
282 |   // l.onload = lazyLoadPolyfills;
283 |   // document.head.appendChild(l);
284 |   lazyLoadPolyfills();
285 | 
286 |   var t = document.querySelector('#t');
287 | 
288 |   // Filter icon names by matching contained phrase.
289 |   t.getIconNames = function(iconset, filterTerm) {
290 |     if (filterTerm.length == 0) {
291 |       return iconset.getIconNames();
292 |     }
293 | 
294 |     return iconset.getIconNames().filter(function(item) {
295 |       return item.indexOf(filterTerm) > -1;
296 |     });
297 |   };
298 | 
299 |   t.filterTerm = '';
300 | 
301 |   t.onFilterTermChanged = function(e) {
302 |     this.debounce('debounceFilter', function() {
303 |       this.filterTerm = e.detail.value;
304 |     }, 200);
305 |   };
306 | 
307 |   t.iconName = function(fullName) {
308 |     return fullName.split(':')[1];
309 |   };
310 | 
311 |   t._computeExampleImport = function(iconsetName) {
312 |     return `<link rel="import" href="/path/to/${iconsetName}.html">
313 | <iron-icon icon="${iconsetName}:ICON_NAME"></iron-icon>`;
314 |   };
315 | 
316 |   t.toggleAllIcons = function() {
317 |     this.$.selector.selectedValues = [];
318 | 
319 |     var icons = [];
320 |     this.iconsets.forEach(iconset => {
321 |       icons.push(...iconset.getIconNames());
322 |     });
323 |     this.$.selector.selectedValues = icons;
324 |   };
325 | 
326 |   t.copyText = function(e, detail) {
327 |     this.selectText();
328 | 
329 |     try {
330 |       this.$.toast.text = 'Markup copied to clipboard';
331 |       var successful = document.execCommand('copy');
332 |     } catch (e) {
333 |       this.$.toast.text = 'Your browser does not support copy-to-clipboard';
334 |       console.error('execCommand error', e);
335 |     }
336 |     this.$.toast.show();
337 |     window.getSelection().removeAllRanges();
338 |   };
339 | 
340 |   t.selectText = function(e, detail) {
341 |     if (window.getSelection && document.createRange) {
342 |       var range = document.createRange();
343 |       // range.selectNodeContents(this.$.out);
344 |       range.selectNode(this.$.markup);
345 | 
346 |       var sel = window.getSelection();
347 |       sel.removeAllRanges();
348 |       sel.addRange(range);
349 |     }
350 |   };
351 | 
352 |   t.reconstructFromURL = function() {
353 |     if (!!!window.URLSearchParams) {
354 |       return;
355 |     }
356 | 
357 |     var params = new URLSearchParams(window.location.search.slice(1));
358 |     this.iconsetName = params.get('name') || 'myicons';
359 |     this.$.size.value = params.get('size') || this.$.size.value;
360 |     this.$.selector.selectedValues = params.getAll('icon');
361 | 
362 |     if (Array.from(params).length) {
363 |       this.generateMarkup();
364 |     }
365 |   };
366 | 
367 |   t.fileBug = function() {
368 |     window.location.href = 'https://github.com/PolymerLabs/polyicon/issues/new';
369 |   };
370 | 
371 |   t.updateURL = function() {
372 |     if (!!!window.URLSearchParams) {
373 |       return;
374 |     }
375 | 
376 |     var params = new URLSearchParams(window.location.search.slice(1));
377 | 
378 |     params.delete('icon'); // delete all icon params
379 |     for (var p of this.$.selector.selectedValues) {
380 |       params.append('icon', p);
381 |     }
382 | 
383 |     params.set('name', this.iconsetName);
384 |     params.set('size', this.$.size.value);
385 | 
386 |     window.history.replaceState({}, '', '/?' + params);
387 |   };
388 | 
389 |   t.generateMarkup = function() {
390 |     this.debounce('generateMarkup', function() {
391 | 
392 |       var selectedIcons = this.$.selector.selectedValues || [];
393 |       var db = document.querySelector('iron-meta'); // Polymer.IronMeta.getIronMeta()
394 | 
395 |       // Retrieve svg markup for each icon.
396 |       var icons = selectedIcons.sort().map(function(icon) {
397 |         var parts = icon.split(':');
398 |         return db.byKey(parts[0])._icons[parts[1]].outerHTML;
399 |       }.bind(this.$.selector));
400 | 
401 |       var optionalNewline = this.$.newlines.checked ? '\n' : '';
402 | 
403 |       var html = optionalNewline + icons.reduce(function(prev, curr, idx) {
404 |         return prev + optionalNewline + curr;
405 |       }, '').trim() + optionalNewline;
406 | 
407 |       var iconset = document.createElement('iron-iconset-svg');
408 |       iconset.name = this.iconsetName;
409 |       iconset.size = this.$.size.value;
410 | 
411 |       var template = document.querySelector('#tmpl');
412 |       var instance = template.stamp({
413 |         name: iconset.name,
414 |         size: iconset.size,
415 |         iconset: iconset,
416 |         html: html
417 |       });
418 | 
419 |       var div = document.createElement('div');
420 |       div.appendChild(instance.root);
421 | 
422 |       // var out = document.querySelector('#out');
423 |       this.markup = div.innerHTML;
424 | 
425 |       this.updateURL();
426 |     }, 100);
427 |   };
428 | 
429 |   t.addEventListener('dom-change', function(e) {
430 |     t.reconstructFromURL();
431 | 
432 |     // If this event fires hide warning message.
433 |     document.querySelector('.warning').style.display = 'none';
434 |   });
435 | })();
436 | 
437 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
438 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
439 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
440 | })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
441 | 
442 | ga('create', 'UA-39334307-15', 'auto');
443 | ga('send', 'pageview');
444 | </script>
445 | </body>
446 | </html>
447 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "iconset-generator",
 3 |   "version": "0.0.1",
 4 |   "description": "Make an HTML file with inline scripts CSP compliant",
 5 |   "main": "index.js",
 6 |   "bin": {
 7 |     "polyicon": "bin/polyicon"
 8 |   },
 9 |   "scripts": {
10 |     "postinstall": "bower install; gulp",
11 |     "deploy": "scripts/deploy.sh",
12 |     "serve": "dev_appserver.py app.yaml",
13 |     "serve:dist": "dev_appserver.py dist/app.yaml"
14 |   },
15 |   "author": "The Polymer Authors",
16 |   "license": "BSD-3-Clause",
17 |   "dependencies": {
18 |     "command-line-args": "^2.1.3"
19 |   },
20 |   "devDependencies": {
21 |     "del": "^2.2.0",
22 |     "gulp": "^3.9.0",
23 |     "gulp-crisper": "^1.0.0",
24 |     "gulp-if": "^2.0.0",
25 |     "gulp-license": "^1.0.0",
26 |     "gulp-load-plugins": "^1.1.0",
27 |     "gulp-minify-html": "^1.0.4",
28 |     "gulp-uglify": "^1.5.1",
29 |     "gulp-vulcanize": "^6.1.0",
30 |     "merge-stream": "^1.0.0",
31 |     "polybuild": "^1.1.0",
32 |     "run-sequence": "^1.1.5"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/scripts/deploy.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/sh
 2 | 
 3 | # Copyright (c) 2016 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 | deployVersion=$1
11 | 
12 | if [ -z "$deployVersion" ]
13 | then
14 |   echo "App version not specified."
15 |   echo "Usage: npm run deploy 2016-01-01"
16 |   exit 0
17 | fi
18 | 
19 | readonly APPDIR=$(dirname $BASH_SOURCE)
20 | 
21 | echo "\nBuilding app version: $deployVersion\n"
22 | gulp
23 | 
24 | echo "Deploying app version: $deployVersion"
25 | #gcloud preview app deploy $APPDIR/../dist/app.yaml \
26 | #    --project poly-icon --version $deployVersion
27 | appcfg.py update dist/app.yaml -A poly-icon --version $deployVersion
28 | 


--------------------------------------------------------------------------------