{"action":"created","issue":{"url":"https://api.github.com/repos/Polymer/docs/issues/971","labels_url":"https://api.github.com/repos/Polymer/docs/issues/971/labels{/name}","comments_url":"https://api.github.com/repos/Polymer/docs/issues/971/comments","events_url":"https://api.github.com/repos/Polymer/docs/issues/971/events","html_url":"https://github.com/Polymer/docs/issues/971","id":63468113,"number":971,"title":"https://www.polymer-project.org/0.5/docs/elements/core-iconset-svg.html","user":{"login":"gertcuykens","id":863731,"avatar_url":"https://avatars.githubusercontent.com/u/863731?v=3","gravatar_id":"","url":"https://api.github.com/users/gertcuykens","html_url":"https://github.com/gertcuykens","followers_url":"https://api.github.com/users/gertcuykens/followers","following_url":"https://api.github.com/users/gertcuykens/following{/other_user}","gists_url":"https://api.github.com/users/gertcuykens/gists{/gist_id}","starred_url":"https://api.github.com/users/gertcuykens/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gertcuykens/subscriptions","organizations_url":"https://api.github.com/users/gertcuykens/orgs","repos_url":"https://api.github.com/users/gertcuykens/repos","events_url":"https://api.github.com/users/gertcuykens/events{/privacy}","received_events_url":"https://api.github.com/users/gertcuykens/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2015-03-21T23:57:58Z","updated_at":"2015-03-22T01:31:26Z","closed_at":null,"body":"https://www.polymer-project.org/0.5/docs/elements/core-iconset-svg.html\r\n\r\nThe fat lady is supposed to sing the song not reverse engineer it :P\r\n\r\nHere is what your average Polymer user will think.\r\n\r\n```text\r\nSummary\r\nThe core-iconset-svg element allows users to define their own icon sets that contain svg icons. The svg icon elements should be children of the core-iconset-svg element. Multiple icons should be given distinct id's.\r\n```\r\nSo far so good, I understand this :)\r\n\r\n```text\r\nUsing svg elements to create icons has a few advantages over traditional bitmap graphics like jpg or png. Icons that use svg are vector based so they are resolution independent and should look good on any device. They are stylable via css. Icons can be themed, colorized, and even animated.\r\n```\r\nBlablabla but i am not complaining just saying you do not need to explain svg\r\n\r\n```text\r\nExample\r\n...\r\n```\r\n\r\nNice clean straight forward, and now the bad stuff\r\n\r\n```text\r\nThis will automatically register the icon set \"my-svg-icons\" to the iconset database. To use these icons from within another element, make a core-iconset element and call the byId method to retrieve a given iconset. To apply a particular icon inside an element use the applyIcon method. For example:\r\n\r\niconset.applyIcon(iconNode, 'car');\r\n```\r\n\r\nWooooooaw hold on ...database??? ...iconNode??? ...`iconset.applyIcon(iconNode, 'car');`??? What thats it? Where is the rest? \r\n\r\nPushing demo button\r\n\r\n```html\r\n<template is=\"auto-binding\">\r\n    <div class=\"embiggen\">\r\n      <template repeat=\"{{icon in icons}}\">\r\n        <core-icon icon=\"{{icon}}\"></core-icon>\r\n      </template>\r\n    </div>\r\n    <core-meta id=\"meta\" type=\"iconset\"></core-meta>\r\n  </template>\r\n  <script>\r\n    addEventListener('template-bound', function(e) {\r\n      var template = e.target;\r\n      var setName = 'svg-sample-icons';\r\n      var icons = template.$.meta.byId(setName).iconNames;\r\n      template.icons = icons.map(function(ic){ return setName + ':' +ic });\r\n    });\r\n  </script>\r\n```\r\n\r\nAaaa crap I give up, clearly somebody had to deliver a baby or something while writing this part of the documentation :P "},"comment":{"url":"https://api.github.com/repos/Polymer/docs/issues/comments/84490903","html_url":"https://github.com/Polymer/docs/issues/971#issuecomment-84490903","issue_url":"https://api.github.com/repos/Polymer/docs/issues/971","id":84490903,"user":{"login":"gertcuykens","id":863731,"avatar_url":"https://avatars.githubusercontent.com/u/863731?v=3","gravatar_id":"","url":"https://api.github.com/users/gertcuykens","html_url":"https://github.com/gertcuykens","followers_url":"https://api.github.com/users/gertcuykens/followers","following_url":"https://api.github.com/users/gertcuykens/following{/other_user}","gists_url":"https://api.github.com/users/gertcuykens/gists{/gist_id}","starred_url":"https://api.github.com/users/gertcuykens/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gertcuykens/subscriptions","organizations_url":"https://api.github.com/users/gertcuykens/orgs","repos_url":"https://api.github.com/users/gertcuykens/repos","events_url":"https://api.github.com/users/gertcuykens/events{/privacy}","received_events_url":"https://api.github.com/users/gertcuykens/received_events","type":"User","site_admin":false},"created_at":"2015-03-22T01:31:26Z","updated_at":"2015-03-22T01:31:26Z","body":"The only way i can make it fit 24x24 is if i do it like this\r\n```xml\r\n<g id=\"shape\">\r\n                  <rect x=\"0\" y=\"0\" width=\"24\" height=\"24\" />\r\n                  <circle cx=\"24\" cy=\"24\" r=\"24\" />\r\n </g>\r\n```"}}