{"action":"created","issue":{"url":"https://api.github.com/repos/facebookincubator/create-react-app/issues/1388","repository_url":"https://api.github.com/repos/facebookincubator/create-react-app","labels_url":"https://api.github.com/repos/facebookincubator/create-react-app/issues/1388/labels{/name}","comments_url":"https://api.github.com/repos/facebookincubator/create-react-app/issues/1388/comments","events_url":"https://api.github.com/repos/facebookincubator/create-react-app/issues/1388/events","html_url":"https://github.com/facebookincubator/create-react-app/issues/1388","id":200474959,"number":1388,"title":"Consider importing SVGs as React components","user":{"login":"ericdfields","id":22476,"avatar_url":"https://avatars1.githubusercontent.com/u/22476?v=3","gravatar_id":"","url":"https://api.github.com/users/ericdfields","html_url":"https://github.com/ericdfields","followers_url":"https://api.github.com/users/ericdfields/followers","following_url":"https://api.github.com/users/ericdfields/following{/other_user}","gists_url":"https://api.github.com/users/ericdfields/gists{/gist_id}","starred_url":"https://api.github.com/users/ericdfields/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ericdfields/subscriptions","organizations_url":"https://api.github.com/users/ericdfields/orgs","repos_url":"https://api.github.com/users/ericdfields/repos","events_url":"https://api.github.com/users/ericdfields/events{/privacy}","received_events_url":"https://api.github.com/users/ericdfields/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2017-01-12T20:45:56Z","updated_at":"2017-05-06T22:50:12Z","closed_at":"2017-02-11T21:18:53Z","body":"My own path of using SVGs with webpack has settled me comfortably with loading .svg files as react components via https://github.com/jhamlet/svg-react-loader (svg-react-loader@next as of time of writing). This allows you to treat an SVG just like any other React component, and renders out inline SVGs. For example:\r\n\r\n```\r\nconst MySvg = require('./mySvg.svg')\r\n\r\nconst MyApp = () =>\r\n  <div>\r\n      // some components!\r\n     <MySvg /> // could also pass fill='#ccc' or style={styleObj}\r\n  </div>\r\n\r\n// renders\r\n/*\r\n<div>\r\n  <svg ...> ...etc </svg>\r\n</div>\r\n*/\r\n```\r\n\r\nInline SVGs offer the most amount of flexibility in terms of styling, animation, and manipulating props. SVGs in the browser are now more supported than ever. They are quickly replacing icon fonts as the preferred way to do icons in your app.\r\n\r\nI'd enjoy hearing the community's thoughts on this.\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/facebookincubator/create-react-app/issues/comments/299670673","html_url":"https://github.com/facebookincubator/create-react-app/issues/1388#issuecomment-299670673","issue_url":"https://api.github.com/repos/facebookincubator/create-react-app/issues/1388","id":299670673,"user":{"login":"stereobooster","id":179534,"avatar_url":"https://avatars1.githubusercontent.com/u/179534?v=3","gravatar_id":"","url":"https://api.github.com/users/stereobooster","html_url":"https://github.com/stereobooster","followers_url":"https://api.github.com/users/stereobooster/followers","following_url":"https://api.github.com/users/stereobooster/following{/other_user}","gists_url":"https://api.github.com/users/stereobooster/gists{/gist_id}","starred_url":"https://api.github.com/users/stereobooster/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stereobooster/subscriptions","organizations_url":"https://api.github.com/users/stereobooster/orgs","repos_url":"https://api.github.com/users/stereobooster/repos","events_url":"https://api.github.com/users/stereobooster/events{/privacy}","received_events_url":"https://api.github.com/users/stereobooster/received_events","type":"User","site_admin":false},"created_at":"2017-05-06T22:50:12Z","updated_at":"2017-05-06T22:50:12Z","body":"We have some options:\r\n\r\n#### 1 \r\nAssume we have `components/Pin.svg` it can be transformed (by webpack) to\r\n\r\n```js\r\nexport default \"components/Pin.hash.svg\"\r\n\r\nexport function Pin(props) {\r\n  return (\r\n    <svg ...>...</svg>\r\n  )\r\n}\r\n```\r\n\r\nThis way it will backward compatible with current CRA convention about SVGs. \r\n\r\nAdvantage of using SVGs directly (instead of copy-pasting it to React component) is that you can edit it in visual editor, like Inkscape. \r\n\r\n#### 2\r\nCreate CLI tool which will generate (and save to the disk) React Components from SVG files. It additionally can use svgmin. Developer can edit generated files afterwords or regenerate components whenever SVG changes.\r\n\r\n**PS** [Github uses inline SVGs for icons](https://github.com/blog/2112-delivering-octicons-with-svg)"}}
{"actor":{"display_login":"stereobooster"}}