SES-116 Create icons provider and show them on gm screen #45
@ -6,23 +6,10 @@
|
|||||||
"start": "ng serve",
|
"start": "ng serve",
|
||||||
"build": "ng build",
|
"build": "ng build",
|
||||||
"build:ssr": "ng run SessionCompanion:server:dev",
|
"build:ssr": "ng run SessionCompanion:server:dev",
|
||||||
"generate-icons": "svg-to-ts",
|
|
||||||
"test": "ng test",
|
"test": "ng test",
|
||||||
"lint": "ng lint",
|
"lint": "ng lint",
|
||||||
"e2e": "ng e2e"
|
"e2e": "ng e2e"
|
||||||
},
|
},
|
||||||
"svg-to-ts": {
|
|
||||||
"conversionType": "constants",
|
|
||||||
"srcFiles": [
|
|
||||||
"./src/app/shared/sc-icons/icons/**/*.svg"
|
|
||||||
],
|
|
||||||
"outputDirectory": "./src/app/shared/sc-icons/icons",
|
|
||||||
"interfaceName": "SessionCompanionIcon",
|
|
||||||
"typeName": "scIcon",
|
|
||||||
"prefix": "scIcon",
|
|
||||||
"fileName": "sc-icon.model",
|
|
||||||
"compileSources": true
|
|
||||||
},
|
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@angular/animations": "8.2.12",
|
"@angular/animations": "8.2.12",
|
||||||
@ -66,7 +53,6 @@
|
|||||||
"karma-coverage-istanbul-reporter": "~2.1.0",
|
"karma-coverage-istanbul-reporter": "~2.1.0",
|
||||||
"karma-jasmine": "~2.0.1",
|
"karma-jasmine": "~2.0.1",
|
||||||
"karma-jasmine-html-reporter": "^1.4.2",
|
"karma-jasmine-html-reporter": "^1.4.2",
|
||||||
"svg-to-ts": "^6.0.0",
|
|
||||||
"typescript": "3.5.3"
|
"typescript": "3.5.3"
|
||||||
},
|
},
|
||||||
"optionalDependencies": {
|
"optionalDependencies": {
|
||||||
|
@ -1,29 +1,4 @@
|
|||||||
Moduł został już dodany i wstrzyknięty do roota apki.
|
Moduł został już dodany i wstrzyknięty do roota apki.
|
||||||
|
|
||||||
Aby dodać nową ikonkę, plik svg wstawiamy do folderu icons/svg-icons.
|
Aby dodać nową ikonkę, plik svg wstawiamy do folderu assets/icons/svg-icons.
|
||||||
Następnie wpisujemy w konsoli polecenie:
|
Oraz dodajym kolejnego enuma w pliku sc-icon.model.ts
|
||||||
npm run generate-icons
|
|
||||||
|
|
||||||
Zostaną wtedy utworzone nowe klasy z dodaną ikonką.
|
|
||||||
|
|
||||||
Jeśli po tym będziemy chcieli użyć gdzieś naszej ikonki, nie pojawi się ona...
|
|
||||||
Jest to spowodowane tym, że nie chcemy, aby aplikacja wczytywała w jednym momencie wszystkie nasze ikonki a jedynie te potrzebne
|
|
||||||
Musi więc ją dodać w odpowiednim momencie do rejestru, w innym wypadku w konsoli dostaniemy komunikat:
|
|
||||||
![img.png](warning.png)
|
|
||||||
|
|
||||||
Teraz zarejestrujmy naszą ikonkę:
|
|
||||||
|
|
||||||
Dodajemy w konstruktorze danego komponentu:
|
|
||||||
```typescript
|
|
||||||
iconRegister: SessionCompanionIconsRegistry
|
|
||||||
```
|
|
||||||
|
|
||||||
Następnie dodajemy interesującą nas ikonkę:
|
|
||||||
```typescript
|
|
||||||
this.iconRegister.registerIcon(scIconBarbarian);
|
|
||||||
```
|
|
||||||
|
|
||||||
Samą ikonkę ładujemy w tagu
|
|
||||||
```html
|
|
||||||
<app-sc-icons name="barbarian"></app-sc-icons>
|
|
||||||
```
|
|
||||||
|
Binary file not shown.
Before Width: | Height: | Size: 3.3 KiB |
Loading…
Reference in New Issue
Block a user