SES-116 Create icons provider and show them on gm screen #45

Merged
s426128 merged 9 commits from SES-116 into dev 2020-12-30 12:19:56 +01:00
3 changed files with 2 additions and 41 deletions
Showing only changes of commit a7aaacb2e5 - Show all commits

View File

@ -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": {

View File

@ -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