{"action":"created","issue":{"url":"https://api.github.com/repos/LotusTM/Kotsu/issues/74","repository_url":"https://api.github.com/repos/LotusTM/Kotsu","labels_url":"https://api.github.com/repos/LotusTM/Kotsu/issues/74/labels{/name}","comments_url":"https://api.github.com/repos/LotusTM/Kotsu/issues/74/comments","events_url":"https://api.github.com/repos/LotusTM/Kotsu/issues/74/events","html_url":"https://github.com/LotusTM/Kotsu/issues/74","id":173475565,"number":74,"title":"svg icons","user":{"login":"ArmorDarks","id":4460311,"avatar_url":"https://avatars.githubusercontent.com/u/4460311?v=3","gravatar_id":"","url":"https://api.github.com/users/ArmorDarks","html_url":"https://github.com/ArmorDarks","followers_url":"https://api.github.com/users/ArmorDarks/followers","following_url":"https://api.github.com/users/ArmorDarks/following{/other_user}","gists_url":"https://api.github.com/users/ArmorDarks/gists{/gist_id}","starred_url":"https://api.github.com/users/ArmorDarks/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ArmorDarks/subscriptions","organizations_url":"https://api.github.com/users/ArmorDarks/orgs","repos_url":"https://api.github.com/users/ArmorDarks/repos","events_url":"https://api.github.com/users/ArmorDarks/events{/privacy}","received_events_url":"https://api.github.com/users/ArmorDarks/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/LotusTM/Kotsu/labels/enhancement","name":"enhancement","color":"84b6eb"}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2016-08-26T15:07:33Z","updated_at":"2016-08-28T19:32:25Z","closed_at":null,"body":"Add support of svg icons instead of iconic font"},"comment":{"url":"https://api.github.com/repos/LotusTM/Kotsu/issues/comments/242994370","html_url":"https://github.com/LotusTM/Kotsu/issues/74#issuecomment-242994370","issue_url":"https://api.github.com/repos/LotusTM/Kotsu/issues/74","id":242994370,"user":{"login":"ArmorDarks","id":4460311,"avatar_url":"https://avatars.githubusercontent.com/u/4460311?v=3","gravatar_id":"","url":"https://api.github.com/users/ArmorDarks","html_url":"https://github.com/ArmorDarks","followers_url":"https://api.github.com/users/ArmorDarks/followers","following_url":"https://api.github.com/users/ArmorDarks/following{/other_user}","gists_url":"https://api.github.com/users/ArmorDarks/gists{/gist_id}","starred_url":"https://api.github.com/users/ArmorDarks/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ArmorDarks/subscriptions","organizations_url":"https://api.github.com/users/ArmorDarks/orgs","repos_url":"https://api.github.com/users/ArmorDarks/repos","events_url":"https://api.github.com/users/ArmorDarks/events{/privacy}","received_events_url":"https://api.github.com/users/ArmorDarks/received_events","type":"User","site_admin":false},"created_at":"2016-08-28T19:32:25Z","updated_at":"2016-08-28T19:32:25Z","body":"Some attempts to inline SVG icons has been made in https://github.com/LotusTM/Kotsu/compare/feature/svg-icons.\r\n\r\nTo do so, we using Nunjucks filter.\r\n\r\n``` jinja\r\n{{ { name: 'agent', width: 14, height: 14, class: 'h-fill--current', title: '`' + icon + '` title', desc: '`' + icon + '` description' }|Icon }}\r\n```\r\n\r\nwill result in\r\n\r\n``` html\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewbox=\"0.3 0 23.3 29.9\" class=\"Icon--agent h-fill--current\" width=\"24\" height=\"24\" role=\"img\">\r\n  <title>`agent` title</title>\r\n  <desc>`agent` description</desc>\r\n  <path fill=\"#374052\" d=\"M12 14.2c-.9 1-2 1.8-2.9 2.8 1 3.2 1.9 6.6 3 9.8.9-3.3 1.9-6.6 2.9-9.9-1.1-.9-2-1.8-3-2.7zm7.2 10.3c-.8 0-2.4.2-2.6-.3-.2-.4.1-.6.3-.7.4-.2 1.6-.1 2.5-.1.7 0 2-.1 2.1.4.2 1-1.3.7-2.3.7zm4.2-8.8c-.7-2.3-2.9-2.6-5.6-2.4-1.7 5.6-3.3 11.1-4.9 16.7 2.8-.4 5.6.4 8.1-.1 3-.5 2.7-4.3 2.7-8.3-.1-1.9.1-4.4-.3-5.9zM.7 15.3c-.6 1.5-.3 4.1-.3 6.4 0 3.8-.5 6.9 1.9 8 1.1.6 3.4.3 4.8.3 1.2 0 2.4.1 4-.1-1.7-5.5-3.3-11.1-4.9-16.6-2.6-.2-4.7.1-5.5 2zm11.5-2.2c2.8-.1 5-2.2 5.6-4.8.6-2.5-.2-4.9-1.4-6.3-1-1.2-2.9-2.2-4.9-2-1.7.2-3.1 1-4 2C6.7 3.1 6 4.8 6 6.6c0 3.7 2.6 6.7 6.2 6.5z\"/>      \r\n</svg>\r\n```\r\n\r\nIssues with that approach:\r\n\r\n* I don't like additional arbitrary dependency in form of Cheerio. The only solution I see so far is regex.\r\n* I slightly dislike that it's very Nunjucks-specific implementation, and it won't be easy to transfer it to any other environment.\r\n* This should be asyc global, not filter (in other words, `Icon({name: 'agent'})`, not `'agent'|icon`. Reason: Nunjucks globals don't support async mode https://github.com/mozilla/nunjucks/issues/819\r\n* All arguments packed into single `options` due to https://github.com/mozilla/nunjucks/issues/820. Not big deal, though.\r\n* In fact, we're forced to use async filter only due to async-only nature of `svgo`: https://github.com/svg/svgo/issues/584\r\n* `svgo` probably shouldn't be part of filter anyway. That will solve 3 issues above.\r\n\r\n  Seems like we should move it to [grunt-svgmin](https://github.com/sindresorhus/grunt-svgmin) task (Grunt wrapper for `svgo`). Maybe we even should put such icons into build assets, since they potentially could be used by CSS for backgrounds.\r\n\r\n  Just for the note, `grunt-webfont` uses `svgo` under the hood too.\r\n\r\n* Current way to defined `viewBox` might not always works, and I didn't find ready solution for getting SVG boundary box in Node environment. So far, it's better to normilize size and viewbox manually, in original file\r\n* `grunt.file.read` for _each_ included file _will_ slow down generation of page wtth lots of icons.\r\n* All IE browsers are asses, as usually, and do not respect `height: auto` and sets it to `height: 150px` literally, which makes impossible proportional scaling based on width only:\r\n\r\n  * http://tympanus.net/Tutorials/ResponsiveSVGs/index4.html\r\n  * https://jsfiddle.net/4p73n364/\r\n  \r\n  ![chrome_2016-08-28_22-26-53](https://cloud.githubusercontent.com/assets/4460311/18036268/a58ddccc-6d6e-11e6-83d3-c16c06f2862b.png)\r\n\r\n  Very ugly CSS-only fix: http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/ (see section SVG embedded inline using the <svg> tag).  Quite unusable in dynamic environment, because final % should always be calculated based on SVG size.\r\n\r\n  So far there are to solutions:\r\n    * Live without proportional scaling, which means that width and height should always be set explicitly in px. Unfortunately, not always possible, since icon can be not square, and you can't know those proportions in forehead. Also it will break, if you will swap icon with new once, which will have different proportions.\r\n\r\n   * Set proportional height in px by JavaScript. Strangely enough, didn't find working solutions for this."}}
{"actor":{"display_login":"ArmorDarks"}}