{"action":"created","issue":{"url":"https://api.github.com/repos/FortAwesome/angular-fontawesome/issues/3","repository_url":"https://api.github.com/repos/FortAwesome/angular-fontawesome","labels_url":"https://api.github.com/repos/FortAwesome/angular-fontawesome/issues/3/labels{/name}","comments_url":"https://api.github.com/repos/FortAwesome/angular-fontawesome/issues/3/comments","events_url":"https://api.github.com/repos/FortAwesome/angular-fontawesome/issues/3/events","html_url":"https://github.com/FortAwesome/angular-fontawesome/issues/3","id":288425186,"number":3,"title":"Discussion: API to register icons","user":{"login":"devoto13","id":823594,"avatar_url":"https://avatars1.githubusercontent.com/u/823594?v=4","gravatar_id":"","url":"https://api.github.com/users/devoto13","html_url":"https://github.com/devoto13","followers_url":"https://api.github.com/users/devoto13/followers","following_url":"https://api.github.com/users/devoto13/following{/other_user}","gists_url":"https://api.github.com/users/devoto13/gists{/gist_id}","starred_url":"https://api.github.com/users/devoto13/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/devoto13/subscriptions","organizations_url":"https://api.github.com/users/devoto13/orgs","repos_url":"https://api.github.com/users/devoto13/repos","events_url":"https://api.github.com/users/devoto13/events{/privacy}","received_events_url":"https://api.github.com/users/devoto13/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2018-01-14T17:34:03Z","updated_at":"2018-02-13T03:32:08Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"I think we should discuss how API for the icon registration in the library should look like. If we should have it at all.\r\n\r\n### Option 1: reuse `fontawesome.library`\r\n\r\nThis means that users will have to do somewhere (where?) in their code:\r\n\r\n```ts\r\nimport fontawesome from '@fortawesome/fontawesome'\r\nimport { faUser } from '@fortawesome/fontawesome-free-solid'\r\n\r\nfontawesome.add(faUser);\r\n```\r\n\r\nThan they can just specify icon name in the template:\r\n\r\n    <fa-icon icon=\"fas-user\"></fa-icon>\r\n\r\n- pro: No extra implementation in the `angular-fontawesome` library\r\n- con: Component using icons does not declare its dependencies clearly\r\n- con: Requires use of low level API\r\n- con: Not clear where to put this code\r\n\r\n### Option 2: provide helper method on the `FontAwesomeModule`\r\n\r\nWe'll provide a helper method, which will register icons passed in as parameters in the library. Here is a small example how it can look like:\r\n\r\n```ts\r\nimport { faUser } from '@fortawesome/fontawesome-free-solid'\r\n\r\n@NgModule({\r\n  imports: [\r\n    FontAwesomeModule.withIcons(faUser),\r\n  ]\r\n})\r\nclass AppModule {}\r\n```\r\n\r\nThan icon can be used in the templates by just providing its name like in option 1:\r\n\r\n    <fa-icon icon=\"fas-user\"></fa-icon>\r\n\r\n- pro: Obvious place for registering icons\r\n- pro: Implementation is quite simple\r\n- con: Component using icons does not declare its dependencies clearly (better than option 1, but still)\r\n\r\n### Option 3: no registration at all\r\n\r\nRequire developer to import icon and pass it into template. In this case developer will have to import every icon they want to use in the component explicitly. Here is an example:\r\n\r\n```ts\r\nimport { faUser } from '@fortawesome/fontawesome-free-solid'\r\n\r\n@Component({\r\n  selector: 'my-app',\r\n  template: '<fa-icon [icon]=\"faUser\"></fa-icon>',\r\n})\r\nexport class AppComponent {\r\n  faUser = faUser;\r\n}\r\n```\r\n\r\n- pro: Explicit dependency declaration for a component\r\n- pro Easy to find all icon usages or unused icons with TypeScript tooling (find usages, noUnusedVariables in TsConfig)\r\n- con: Requires extra field in component for every icon, quite verbose\r\n\r\nLet me know what do you think?"},"comment":{"url":"https://api.github.com/repos/FortAwesome/angular-fontawesome/issues/comments/365140534","html_url":"https://github.com/FortAwesome/angular-fontawesome/issues/3#issuecomment-365140534","issue_url":"https://api.github.com/repos/FortAwesome/angular-fontawesome/issues/3","id":365140534,"user":{"login":"FriOne","id":5888410,"avatar_url":"https://avatars2.githubusercontent.com/u/5888410?v=4","gravatar_id":"","url":"https://api.github.com/users/FriOne","html_url":"https://github.com/FriOne","followers_url":"https://api.github.com/users/FriOne/followers","following_url":"https://api.github.com/users/FriOne/following{/other_user}","gists_url":"https://api.github.com/users/FriOne/gists{/gist_id}","starred_url":"https://api.github.com/users/FriOne/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/FriOne/subscriptions","organizations_url":"https://api.github.com/users/FriOne/orgs","repos_url":"https://api.github.com/users/FriOne/repos","events_url":"https://api.github.com/users/FriOne/events{/privacy}","received_events_url":"https://api.github.com/users/FriOne/received_events","type":"User","site_admin":false},"created_at":"2018-02-13T03:32:08Z","updated_at":"2018-02-13T03:32:08Z","author_association":"NONE","body":"@karptonite I guess the icons will be in main module only in case of lazy loading. Because modules separated by webpack."}}
{"actor":{"display_login":"FriOne"}}