Skip to content
This repository was archived by the owner on Jul 13, 2022. It is now read-only.

Commit a22ba51

Browse files
xidedixxidedix
committed
refactor: separate modules for component and service
1 parent 9361747 commit a22ba51

19 files changed

+129
-67
lines changed

‎package.json

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
"build": "ng build",
88
"test": "ng test",
99
"lint": "ng lint",
10+
"link-lib": "cd dist/coreui-icons-angular/ && npm link",
11+
"publish-lib": "cd dist/coreui-icons-angular/ && npm publish --tag next --dry-run",
1012
"e2e": "ng e2e"
1113
},
1214
"private": true,
@@ -46,5 +48,16 @@
4648
"tslint": "~6.1.0",
4749
"typescript": "~3.7.5",
4850
"@coreui/icons": "^2.0.0-beta.5"
49-
}
51+
},
52+
"keywords": [
53+
"coreui",
54+
"coreui-icons",
55+
"coreui-angular",
56+
"icons",
57+
"svg",
58+
"svg-icons",
59+
"layout",
60+
"component",
61+
"angular"
62+
]
5063
}

‎projects/coreui/icons-angular/README.md

Lines changed: 33 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Angular component for [CoreUI Icons SVG set](https://coreui.io/icons/).
1818
- directly passed SVG tag content,
1919
- source link to SVG file
2020
- Reduces icons bundle size when imported as single icons,
21-
- Full functionality of 'svg' html tag,
21+
- Full functionality of `<svg>` html tag,
2222
- Clean API
2323

2424
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
3535
### Usage
3636

3737
```ts
38-
// NgModule
38+
// app NgModule
3939

40-
import { IconModule } from '@coreui/icons-angular';
40+
import { IconModule, IconSetModule, IconSetService } from '@coreui/icons-angular';
4141

4242
@NgModule({
4343
imports: [
4444
IconModule,
45+
IconSetModule.forRoot(),
46+
...
47+
providers: [IconSetService],
4548
...
4649
```
4750
4851
```ts
4952
// app component
50-
import { cilEnvelopeOpen } from '@coreui/icons';
51-
import { IconService } from '@coreui/icons-angular';
53+
54+
import { cilEnvelopeOpen, flagSet } from '@coreui/icons';
55+
import { IconModule, IconSetModule, IconSetService } from '@coreui/icons-angular';
5256

5357
@Component({
5458
...
5559
providers: [IconSetService],
5660
...
5761
})
58-
...
59-
constructor(public iconSet: IconService) {
62+
export class AppComponent implements OnInit {
63+
constructor(public iconSet: IconSetService) {
6064
// iconSet singleton
61-
iconSet.icons = { cilEnvelopeOpen };
65+
iconSet.icons = { cilEnvelopeOpen, ...flagSet };
6266
}
67+
...
6368
```
6469
6570
```jsx
6671
<c-icon name="cil-envelope-open" size="lg"></c-icon>
72+
<c-icon name="cifAu"></c-icon>
6773
```
6874
69-
75+
### API
76+
> Use one of `name`, `src` or `content` prop as it defines the way of icon import
77+
78+
proprerty | type | default | description
79+
---|---|---|---
80+
`name` | string | undefined | name of SVG icon stored in IconSetService
81+
`content` | string, string[] | undefined | SVG content
82+
`src` | string | undefined | Link to the icon. If defined, component will be rendered as `<img>` tag |
83+
`size` | `custom`, `custom-size`, `sm`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl`, `8xl`, `9xl` | '' | Size of icon
84+
`title` | string | undefined |
85+
`use` | string | undefined | SVG `<use>`
86+
`customClasses` | string | undefined | Replaces default `c-icon` component classes
87+
`viewBox` | string | undefined | SVG `viewbox`
88+
`attributes` | any | `{ role: 'img' }` | Object with additional html attributes
89+
`width` | | undefined | SVG `width`
90+
`height` | | undefined | SVG `height`
91+
92+
---
7093
7194
### License
7295
73-
CoreUI Icons Free is free, open source, and GPL friendly. You can use it for
96+
CoreUI Icons Free are free, open source, and GPL friendly. You can use it for
7497
commercial projects, open source projects, or really almost whatever you want.
7598
7699
- Icons — CC BY 4.0 License

‎projects/coreui/icons-angular/package.json

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,16 @@
77
},
88
"dependencies": {
99
"tslib": "^1.10.0"
10-
}
11-
}
10+
},
11+
"keywords": [
12+
"coreui",
13+
"coreui-icons",
14+
"coreui-angular",
15+
"icons",
16+
"svg",
17+
"svg-icons",
18+
"layout",
19+
"component",
20+
"angular"
21+
]
22+
}

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {ModuleWithProviders, NgModule, Optional, SkipSelf} from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
4+
import {IconSetService} from './icon-set.service';
5+
6+
@NgModule({
7+
imports: [
8+
CommonModule,
9+
],
10+
providers: [
11+
IconSetService
12+
]
13+
})
14+
export class IconSetModule {
15+
constructor(@Optional() @SkipSelf() parentModule?: IconSetModule) {
16+
if (parentModule) {
17+
throw new Error(
18+
'CoreUI IconSetModule is already loaded. Import it in the AppModule only');
19+
}
20+
}
21+
22+
static forRoot(): ModuleWithProviders<IconSetModule> {
23+
return {
24+
ngModule: IconSetModule,
25+
providers: [
26+
{provide: IconSetService}
27+
]
28+
};
29+
}
30+
}

‎projects/coreui/icons-angular/src/lib/icon.service.spec.ts renamed to ‎projects/coreui/icons-angular/src/lib/icon-set/icon-set.service.spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { TestBed } from '@angular/core/testing';
22

3-
import { IconService } from './icon.service';
3+
import { IconSetService } from './icon-set.service';
44

55
describe('IconService', () => {
6-
let service: IconService;
6+
let service: IconSetService;
77

88
beforeEach(() => {
99
TestBed.configureTestingModule({});
10-
service = TestBed.inject(IconService);
10+
service = TestBed.inject(IconSetService);
1111
});
1212

1313
it('should be created', () => {

‎projects/coreui/icons-angular/src/lib/icon.service.ts renamed to ‎projects/coreui/icons-angular/src/lib/icon-set/icon-set.service.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export interface IIconSet {
77
@Injectable({
88
providedIn: 'root'
99
})
10-
export class IconService {
10+
export class IconSetService {
1111

1212
// tslint:disable-next-line:variable-name
1313
private _icons: IIconSet = {};

‎projects/coreui/icons-angular/src/lib/index.ts renamed to ‎projects/coreui/icons-angular/src/lib/icon-set/index.ts

File renamed without changes.

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { IconSetService, IIconSet } from './icon-set.service';
2+
export { IconSetModule } from './icon-set.module';

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

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎projects/coreui/icons-angular/src/lib/icon.component.html renamed to ‎projects/coreui/icons-angular/src/lib/icon/icon.component.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
11
<img *ngIf="src"
22
[cHtmlAttr]="attributes"
3+
[attr.alt]="title"
34
[src]="src"
45
/>
56
<svg *ngIf="(!src) && (!use)"
67
xmlns="http://www.w3.org/2000/svg"
78
[attr.width]="width"
89
[attr.height]="height || width"
910
[attr.viewBox]="viewBox"
10-
[attr.title]="titleCode"
1111
[innerHtml]="iconCode"
1212
[attr.class]="computedClasses"
13+
[cHtmlAttr]="attributes"
1314
role="img"
1415
pointer-events="none"
1516
>
17+
{{titleCode}}
1618
</svg>
1719
<svg *ngIf="use"
1820
xmlns="http://www.w3.org/2000/svg"
1921
[attr.width]="width"
2022
[attr.height]="height || width"
2123
[attr.class]="computedClasses"
24+
[cHtmlAttr]="attributes"
2225
role="img"
2326
pointer-events="none"
2427
>

0 commit comments

Comments
 (0)