{"action":"created","issue":{"url":"https://api.github.com/repos/styled-components/styled-components/issues/338","repository_url":"https://api.github.com/repos/styled-components/styled-components","labels_url":"https://api.github.com/repos/styled-components/styled-components/issues/338/labels{/name}","comments_url":"https://api.github.com/repos/styled-components/styled-components/issues/338/comments","events_url":"https://api.github.com/repos/styled-components/styled-components/issues/338/events","html_url":"https://github.com/styled-components/styled-components/issues/338","id":198015476,"number":338,"title":"Support SVG symbols?","user":{"login":"wmertens","id":54934,"avatar_url":"https://avatars.githubusercontent.com/u/54934?v=3","gravatar_id":"","url":"https://api.github.com/users/wmertens","html_url":"https://github.com/wmertens","followers_url":"https://api.github.com/users/wmertens/followers","following_url":"https://api.github.com/users/wmertens/following{/other_user}","gists_url":"https://api.github.com/users/wmertens/gists{/gist_id}","starred_url":"https://api.github.com/users/wmertens/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wmertens/subscriptions","organizations_url":"https://api.github.com/users/wmertens/orgs","repos_url":"https://api.github.com/users/wmertens/repos","events_url":"https://api.github.com/users/wmertens/events{/privacy}","received_events_url":"https://api.github.com/users/wmertens/received_events","type":"User","site_admin":false},"labels":[{"id":461725494,"url":"https://api.github.com/repos/styled-components/styled-components/labels/discussion","name":"discussion","color":"4a558a","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2016-12-29T14:28:04Z","updated_at":"2017-01-12T12:44:27Z","closed_at":null,"body":"I just realized that SVG symbols and inlined CSS are two very similar problems with very similar solutions. I wonder if styled-components can be made to handle SVG symbol management as well.\r\n\r\n[SVG symbols are very useful](https://css-tricks.com/svg-symbol-good-choice-icons/), they give you scalable icons that can be styled/colored with CSS, with low bandwidth use. To use them, there needs to be a symbol definition somewhere in the page, and then where you want to use it you put a `<svg><use xlinkHref={iconId}/></svg>`. The `svg` can be styled with CSS to change colors etc.\r\n\r\nSo how about something like\r\n\r\n```js\r\nimport ArrowSvg from '../icons/arrow.svg'\r\n\r\nexport const Arrow = styled.svgSymbol(ArrowSvg)`\r\n  ${p => p.left && \"transform: rotate(180deg);\"}\r\n  &:hover { fill: \"yellow\"; }\r\n`\r\n```\r\nand later\r\n```js\r\n<p><Arrow/> Styled-components is awesome! <Arrow left/></p>\r\n```\r\nwhich becomes this DOM:\r\n```html\r\n<head><style>.a {...}.b{...}</style></head>\r\n<body>\r\n  <svg><symbol id=\"s\">...</symbol></svg>\r\n  <p>\r\n    <svg class=\"a\"><use xlink:href=\"#s\"/></svg>\r\n     Styled-components is awesome! \r\n    <svg class=\"b\"><use xlink:href=\"#s\"/></svg>\r\n  </p>\r\n</body>\r\n```\r\n\r\nSo behind the scenes, styled-components would maintain the `<svg/>` block with the symbol definitions and come up with a global `iconId` for the `<use/>`.\r\nThe `ArrowSvg` content could be from loading with https://github.com/jhamlet/svg-react-loader or something similar."},"comment":{"url":"https://api.github.com/repos/styled-components/styled-components/issues/comments/272154214","html_url":"https://github.com/styled-components/styled-components/issues/338#issuecomment-272154214","issue_url":"https://api.github.com/repos/styled-components/styled-components/issues/338","id":272154214,"user":{"login":"wmertens","id":54934,"avatar_url":"https://avatars.githubusercontent.com/u/54934?v=3","gravatar_id":"","url":"https://api.github.com/users/wmertens","html_url":"https://github.com/wmertens","followers_url":"https://api.github.com/users/wmertens/followers","following_url":"https://api.github.com/users/wmertens/following{/other_user}","gists_url":"https://api.github.com/users/wmertens/gists{/gist_id}","starred_url":"https://api.github.com/users/wmertens/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wmertens/subscriptions","organizations_url":"https://api.github.com/users/wmertens/orgs","repos_url":"https://api.github.com/users/wmertens/repos","events_url":"https://api.github.com/users/wmertens/events{/privacy}","received_events_url":"https://api.github.com/users/wmertens/received_events","type":"User","site_admin":false},"created_at":"2017-01-12T12:44:27Z","updated_at":"2017-01-12T12:44:27Z","body":"@vdanchenkov if you have a bunch of the same icons in the page, I suppose that the browser will take less memory if they all refer to a few symbols vs when they are all copies of the same svg."}}
{"actor":{"display_login":"wmertens"}}