OLD | NEW |
| (Empty) |
1 | |
2 <!--- | |
3 | |
4 This README is automatically generated from the comments in these files: | |
5 iron-iconset-svg.html | |
6 | |
7 Edit those files, and our readme bot will duplicate them over here! | |
8 Edit this file, and the bot will squash your changes :) | |
9 | |
10 --> | |
11 | |
12 [](https://travis-ci.org/PolymerElements/iron-iconset-svg) | |
13 | |
14 _[Demo and API Docs](https://elements.polymer-project.org/elements/iron-iconset-
svg)_ | |
15 | |
16 | |
17 ##<iron-iconset-svg> | |
18 | |
19 | |
20 The `iron-iconset-svg` element allows users to define their own icon sets | |
21 that contain svg icons. The svg icon elements should be children of the | |
22 `iron-iconset-svg` element. Multiple icons should be given distinct id's. | |
23 | |
24 Using svg elements to create icons has a few advantages over traditional | |
25 bitmap graphics like jpg or png. Icons that use svg are vector based so | |
26 they are resolution independent and should look good on any device. They | |
27 are stylable via css. Icons can be themed, colorized, and even animated. | |
28 | |
29 Example: | |
30 | |
31 <iron-iconset-svg name="my-svg-icons" size="24"> | |
32 <svg> | |
33 <defs> | |
34 <g id="shape"> | |
35 <rect x="50" y="50" width="50" height="50" /> | |
36 <circle cx="50" cy="50" r="50" /> | |
37 </g> | |
38 </defs> | |
39 </svg> | |
40 </iron-iconset-svg> | |
41 | |
42 This will automatically register the icon set "my-svg-icons" to the iconset | |
43 database. To use these icons from within another element, make a | |
44 `iron-iconset` element and call the `byId` method | |
45 to retrieve a given iconset. To apply a particular icon inside an | |
46 element use the `applyIcon` method. For example: | |
47 | |
48 iconset.applyIcon(iconNode, 'car'); | |
49 | |
50 | |
OLD | NEW |