refactor: separate modules for component and service

package.json

@@ -7,6 +7,8 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
+    "link-lib": "cd dist/coreui-icons-angular/ && npm link",
+    "publish-lib": "cd dist/coreui-icons-angular/ && npm publish --tag next --dry-run",
     "e2e": "ng e2e"
   },
   "private": true,
@@ -46,5 +48,16 @@
     "tslint": "~6.1.0",
     "typescript": "~3.7.5",
     "@coreui/icons": "^2.0.0-beta.5"
-  }
+  },
+  "keywords": [
+    "coreui",
+    "coreui-icons",
+    "coreui-angular",
+    "icons",
+    "svg",
+    "svg-icons",
+    "layout",
+    "component",
+    "angular"
+  ]
 }

projects/coreui/icons-angular/README.md

@@ -18,7 +18,7 @@ Angular component for [CoreUI Icons SVG set](https://coreui.io/icons/).
   - directly passed SVG tag content,
   - source link to SVG file
 - Reduces icons bundle size when imported as single icons,
-- Full functionality of 'svg' html tag,
+- Full functionality of `<svg>` html tag,
 - Clean API
 
 For component description visit [CIcon component documentation](https://icons.coreui.io/docs/using-coreui-icons-with/angular/)
@@ -35,42 +35,65 @@ npm install @coreui/icons-angular
 ### Usage
 
 ```ts
-// NgModule
+// app NgModule
 
-import { IconModule } from '@coreui/icons-angular';
+import { IconModule, IconSetModule, IconSetService } from '@coreui/icons-angular';
 
 @NgModule({
   imports: [
     IconModule,
+    IconSetModule.forRoot(),
+...
+  providers: [IconSetService],
 ...
 ```
 
 ```ts
 // app component
-import { cilEnvelopeOpen } from '@coreui/icons';
-import { IconService } from '@coreui/icons-angular';
+
+import { cilEnvelopeOpen, flagSet } from '@coreui/icons';
+import { IconModule, IconSetModule, IconSetService } from '@coreui/icons-angular';
 
 @Component({
   ...
   providers: [IconSetService],
   ...
 })
-...
-  constructor(public iconSet: IconService) {
+export class AppComponent implements OnInit {
+  constructor(public iconSet: IconSetService) {
     // iconSet singleton
-    iconSet.icons = { cilEnvelopeOpen };
+    iconSet.icons = { cilEnvelopeOpen, ...flagSet };
   }
+...
 ```
 
 ```jsx
 <c-icon name="cil-envelope-open" size="lg"></c-icon>
+<c-icon name="cifAu"></c-icon>
 ```
 
-
+### API
+> Use one of `name`, `src` or `content` prop as it defines the way of icon import
+
+proprerty | type | default | description  
+---|---|---|---
+`name` | string | undefined | name of SVG icon stored in IconSetService
+`content` | string, string[] | undefined | SVG content 
+`src` | string | undefined | Link to the icon. If defined, component will be rendered as `<img>` tag |
+`size` | `custom`, `custom-size`, `sm`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl`, `8xl`, `9xl` |  '' | Size of icon
+`title` | string | undefined |
+`use` | string | undefined | SVG `<use>` 
+`customClasses` | string | undefined | Replaces default `c-icon` component classes
+`viewBox` | string | undefined | SVG `viewbox`
+`attributes` | any | `{ role: 'img' }` |  Object with additional html attributes
+`width` | | undefined | SVG `width`
+`height` | | undefined | SVG `height`
+
+--- 
 
 ### License
 
-CoreUI Icons Free is free, open source, and GPL friendly. You can use it for
+CoreUI Icons Free are free, open source, and GPL friendly. You can use it for
 commercial projects, open source projects, or really almost whatever you want.
 
 - Icons — CC BY 4.0 License

projects/coreui/icons-angular/package.json

@@ -7,5 +7,16 @@
   },
   "dependencies": {
     "tslib": "^1.10.0"
-  }
-}
+  },
+  "keywords": [
+    "coreui",
+    "coreui-icons",
+    "coreui-angular",
+    "icons",
+    "svg",
+    "svg-icons",
+    "layout",
+    "component",
+    "angular"
+  ]
+}

projects/coreui/icons-angular/src/lib/icon-set/icon-set.module.ts

@@ -0,0 +1,30 @@
+import {ModuleWithProviders, NgModule, Optional, SkipSelf} from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import {IconSetService} from './icon-set.service';
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  providers: [
+    IconSetService
+  ]
+})
+export class IconSetModule {
+  constructor(@Optional() @SkipSelf() parentModule?: IconSetModule) {
+    if (parentModule) {
+      throw new Error(
+        'CoreUI IconSetModule is already loaded. Import it in the AppModule only');
+    }
+  }
+
+  static forRoot(): ModuleWithProviders<IconSetModule> {
+    return {
+      ngModule: IconSetModule,
+      providers: [
+        {provide: IconSetService}
+      ]
+    };
+  }
+}

projects/coreui/icons-angular/src/lib/icon.service.spec.ts → projects/coreui/icons-angular/src/lib/icon-set/icon-set.service.spec.ts

@@ -1,13 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 
-import { IconService } from './icon.service';
+import { IconSetService } from './icon-set.service';
 
 describe('IconService', () => {
-  let service: IconService;
+  let service: IconSetService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
-    service = TestBed.inject(IconService);
+    service = TestBed.inject(IconSetService);
   });
 
   it('should be created', () => {

projects/coreui/icons-angular/src/lib/icon.service.ts → projects/coreui/icons-angular/src/lib/icon-set/icon-set.service.ts

@@ -7,7 +7,7 @@ export interface IIconSet {
 @Injectable({
   providedIn: 'root'
 })
-export class IconService {
+export class IconSetService {
 
   // tslint:disable-next-line:variable-name
   private _icons: IIconSet = {};

projects/coreui/icons-angular/src/lib/icon-set/public_api.ts

@@ -0,0 +1,2 @@
+export { IconSetService, IIconSet } from './icon-set.service';
+export { IconSetModule } from './icon-set.module';

projects/coreui/icons-angular/src/lib/icon.component.html → projects/coreui/icons-angular/src/lib/icon/icon.component.html

@@ -1,24 +1,27 @@
 <img *ngIf="src"
      [cHtmlAttr]="attributes"
+     [attr.alt]="title"
      [src]="src"
 />
 <svg  *ngIf="(!src) && (!use)"
       xmlns="http://www.w3.org/2000/svg"
       [attr.width]="width"
       [attr.height]="height || width"
       [attr.viewBox]="viewBox"
-      [attr.title]="titleCode"
       [innerHtml]="iconCode"
       [attr.class]="computedClasses"
+      [cHtmlAttr]="attributes"
       role="img"
       pointer-events="none"
 >
+  {{titleCode}}
 </svg>
 <svg *ngIf="use"
      xmlns="http://www.w3.org/2000/svg"
      [attr.width]="width"
      [attr.height]="height || width"
      [attr.class]="computedClasses"
+     [cHtmlAttr]="attributes"
      role="img"
      pointer-events="none"
 >

projects/coreui/icons-angular/src/lib/icon.component.spec.ts → projects/coreui/icons-angular/src/lib/icon/icon.component.spec.ts

@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { HtmlAttributesDirective } from './html-attr.directive';
+import { HtmlAttributesDirective } from '../shared/html-attr.directive';
 
 import { IconComponent } from './icon.component';
 

projects/coreui/icons-angular/src/lib/icon.component.ts → projects/coreui/icons-angular/src/lib/icon/icon.component.ts

@@ -1,6 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {DomSanitizer} from '@angular/platform-browser';
-import {IconService} from './icon.service';
+import {IconSetService} from '../icon-set';
 import classNames from 'classnames';
 
 @Component({
@@ -82,7 +82,7 @@ export class IconComponent {
 
   constructor(
     private sanitizer: DomSanitizer,
-    private iconSet: IconService
+    private iconSet: IconSetService
   ) { }
 
   toCamelCase(str) {

projects/coreui/icons-angular/src/lib/icon/icon.module.ts

@@ -0,0 +1,20 @@
+import {NgModule} from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import {IconComponent} from './icon.component';
+import { HtmlAttributesDirective } from '../shared/html-attr.directive';
+
+@NgModule({
+  declarations: [
+    IconComponent,
+    HtmlAttributesDirective
+  ],
+  imports: [
+    CommonModule,
+  ],
+  exports: [
+    IconComponent,
+    HtmlAttributesDirective
+  ],
+})
+export class IconModule {}

projects/coreui/icons-angular/src/lib/icon/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

projects/coreui/icons-angular/src/lib/public_api.ts → projects/coreui/icons-angular/src/lib/icon/public_api.ts

@@ -1,3 +1,2 @@
 export { IconComponent } from './icon.component';
-export { IconService, IIconSet } from './icon.service';
 export { IconModule } from './icon.module';

projects/coreui/icons-angular/src/public-api.ts

@@ -1,7 +1,7 @@
 /*
- * Public API Surface of icons-angular
+ * Public API Surface of @coreui/icons-angular
  */
-
-export * from './lib/icon.service';
-export * from './lib/icon.component';
-export * from './lib/icon.module';
+export { IconComponent } from './lib/icon/icon.component';
+export { IconModule } from './lib/icon/icon.module';
+export { IconSetService, IIconSet } from './lib/icon-set/icon-set.service';
+export { IconSetModule } from './lib/icon-set/icon-set.module';