{"action":"created","issue":{"url":"https://api.github.com/repos/danawoodman/react-fontawesome/issues/21","repository_url":"https://api.github.com/repos/danawoodman/react-fontawesome","labels_url":"https://api.github.com/repos/danawoodman/react-fontawesome/issues/21/labels{/name}","comments_url":"https://api.github.com/repos/danawoodman/react-fontawesome/issues/21/comments","events_url":"https://api.github.com/repos/danawoodman/react-fontawesome/issues/21/events","html_url":"https://github.com/danawoodman/react-fontawesome/pull/21","id":171575753,"number":21,"title":"Add option to pass FontAwesome as css module","user":{"login":"callumsmits","id":19516595,"avatar_url":"https://avatars.githubusercontent.com/u/19516595?v=3","gravatar_id":"","url":"https://api.github.com/users/callumsmits","html_url":"https://github.com/callumsmits","followers_url":"https://api.github.com/users/callumsmits/followers","following_url":"https://api.github.com/users/callumsmits/following{/other_user}","gists_url":"https://api.github.com/users/callumsmits/gists{/gist_id}","starred_url":"https://api.github.com/users/callumsmits/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/callumsmits/subscriptions","organizations_url":"https://api.github.com/users/callumsmits/orgs","repos_url":"https://api.github.com/users/callumsmits/repos","events_url":"https://api.github.com/users/callumsmits/events{/privacy}","received_events_url":"https://api.github.com/users/callumsmits/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-08-17T05:13:59Z","updated_at":"2016-08-18T07:27:57Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/danawoodman/react-fontawesome/pulls/21","html_url":"https://github.com/danawoodman/react-fontawesome/pull/21","diff_url":"https://github.com/danawoodman/react-fontawesome/pull/21.diff","patch_url":"https://github.com/danawoodman/react-fontawesome/pull/21.patch"},"body":"react-fontawesome requires FontAwesome CSS to be included elsewhere in the project. I am working on a project that uses CSS modules and have included FontAwesome as a module. This commit adds a prop called cssModule, which is used to look up the FontAwesome css within the object, if passed. Otherwise API and usage are identical.\r\n\r\nAlso included are two extra tests that replicate the current tests, but supplying CSS class names using the cssModule prop."},"comment":{"url":"https://api.github.com/repos/danawoodman/react-fontawesome/issues/comments/240645234","html_url":"https://github.com/danawoodman/react-fontawesome/pull/21#issuecomment-240645234","issue_url":"https://api.github.com/repos/danawoodman/react-fontawesome/issues/21","id":240645234,"user":{"login":"callumsmits","id":19516595,"avatar_url":"https://avatars.githubusercontent.com/u/19516595?v=3","gravatar_id":"","url":"https://api.github.com/users/callumsmits","html_url":"https://github.com/callumsmits","followers_url":"https://api.github.com/users/callumsmits/followers","following_url":"https://api.github.com/users/callumsmits/following{/other_user}","gists_url":"https://api.github.com/users/callumsmits/gists{/gist_id}","starred_url":"https://api.github.com/users/callumsmits/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/callumsmits/subscriptions","organizations_url":"https://api.github.com/users/callumsmits/orgs","repos_url":"https://api.github.com/users/callumsmits/repos","events_url":"https://api.github.com/users/callumsmits/events{/privacy}","received_events_url":"https://api.github.com/users/callumsmits/received_events","type":"User","site_admin":false},"created_at":"2016-08-18T07:27:57Z","updated_at":"2016-08-18T07:27:57Z","body":"@danawoodman, sure, CSS modules allows modular and reusable CSS - see [CSS Modules](https://github.com/css-modules/css-modules) or [What are CSS Modules and why do we need them?](https://css-tricks.com/css-modules-part-1-need/) for a more in-depth explanation. I think additionally the philosophy fits well with React.\r\n\r\nIn my code I import the FontAwesome CSS as you would javascript and the object then has keys for each style in the CSS file. Your build system (webpack in my case) makes the CSS scope local by ensuring unique names. As an example:\r\n\r\n```javascript\r\nimport React, { PropTypes } from 'react';\r\nimport FontAwesome from 'react-fontawesome';\r\nimport faStyles from 'font-awesome/css/font-awesome.css';\r\n\r\nconst test = () => {\r\n  const spanClass=`${faStyles.fa} ${faStyles['fa-rocket']}`;\r\n\r\n  return (\r\n    <span className={spanClass} />\r\n  );\r\n};\r\n```\r\nWhen you look at something like this in the browser you see:\r\n```html\r\n<span class=\"font-awesome__fa___2otTb font-awesome__fa-rocket___lfSov\"></span>\r\n```\r\nBecause the class names are not the static names in the css file react-fontawesome doesn't work. However, with this commit you can do this:\r\n```javascript\r\nconst test = () => {\r\n  return (\r\n    <FontAwesome name=\"rocket\" cssModule={faStyles} />\r\n  );\r\n};\r\n```\r\nand it works :). Of course if you leave out the cssModule prop, it functions exactly as before."}}
{"actor":{"display_login":"callumsmits"}}