Ionok hozzáadása az Angular 6 alkalmazásokhoz

Az utóbbi időben rengeteg Angular alkalmazáson kellett dolgoznom, és a Font Awesome szó szerint fárasztott. Ezért úgy döntöttem, hogy az ionokat a népszerű ionos keretrendszerről használom .

Ez a bejegyzés bemutatja, hogyan állítsd be az Ionicokat az Angular projektedhez. A következő lépéseket tesszük:

  • Telepítse az Angular CLI v6 szoftvert
  • Hozzon létre egy új Angular v6 alkalmazást
  • Telepítse az Ionicons alkalmazást
  • Az Ionok beállítása az Angular v6 alkalmazásban

Telepítse az Angular CLI v6 szoftvert

Ez nagyon egyszerű - csak telepítenie kell a legújabb Angular verziót az npm-en keresztül.

npm install -g @angular/[email protected]

Miután ez megtörtént, futtasson egy a-t, ng --versionhogy ellenőrizze az Angular telepített verzióját. Győződjön meg arról, hogy a 6.0.0 vagy újabb szögletes CLI verziója van, mint az alábbiakban.

Hozzon létre egy új Angular v6 alkalmazást

Ekkor globálisan telepítette az Angular CLI-t a számítógépére. Most létre kell hoznia egy új Angular alkalmazást. Használjuk a ng new name-of-my-incredible-appparancsot, ez lehetővé teszi számunkra, hogy létrehozzunk egy Angular alkalmazást.

ng new my-ionicons-angular-app --style=scss

Az SCSS bit lehetővé teszi számunkra az SCSS használatát. Ez eltart egy kicsit. Ha elkészült, akkor navigálunk az újonnan létrehozott alkalmazáshoz.

cd my-ionicons-angular-app

Amint a projekt könyvtárban vagyunk, elindíthatjuk a fejlesztõ kiszolgálót.

ng serve

Ez a következőket adja vissza:

** Angular Live Development Server is listening on localhost:4200, open your browser on //localhost:4200/ **

Az URL futtatása // localhost: 4200 / megmutatja a vadonatúj alkalmazását. Ha az alábbi képernyőt látja. Jól megy.

Telepítse az Ionicons alkalmazást

Mint korábban tettük, ismét használjuk az npm-et az Ionicons telepítéséhez.

npm install ionicons

Az Ionok beállítása az Angular v6 alkalmazásban

Amint települ, szögletesen el kell mondanunk, hogy hova és hogyan töltsük be. A legjobb módszer erre a styles.scss fájlunkon belül található, és ezt a következő sorok hozzáadásával teheti meg:

$ionicons-font-path: "~ionicons/dist/fonts";@import "~ionicons/dist/scss/ionicons.scss";

Ezen a ponton helyesen kell beállítani. Szerkesztheti a kezdőlap fájlját - app.component.html, és a betűtípus ikon segítségével hozzáadhat egy új ikont, így: t; . You can also have a look at the Ionicons page for a list of icons there. Below is what my homepage looks like along with my app.component.html file.

That’s that!!

Pretty easy. I hope you made it to the end. If you have any questions or you see something wrong or something that can be done better, please leave a comment below or you can message me on twitter @TrussDamola.

Cheers!