Ionicien lisääminen Angular 6 -sovelluksiin

Olen joutunut viime aikoina työskentelemään monien Angular- sovellusten parissa, ja Font Awesome on kirjaimellisesti väsyttänyt minut. Joten päätin käyttää Ioniconeja pois suositusta Ionic-kehyksestä.

Tämä viesti osoittaa, kuinka asetat Ionicons-kuvakkeet projektiisi. Suoritamme seuraavat vaiheet:

  • Asenna Angular CLI v6
  • Luo uusi Angular v6 -sovellus
  • Asenna Ionicons
  • Asenna Ionicons käytettäväksi Angular v6 -sovelluksessa

Asenna Angular CLI v6

Tämä on melko yksinkertaista - asennat vain uusimman Angular-version npm: n kautta.

npm install -g @angular/[email protected]

Kun se on tehty, suoritat sitten ng --versiontarkistamaan asentamasi Angular-version. Varmista, että se on kulmainen CLI-versio versiosta 6.0.0 tai uudempi, kuten alla.

Luo uusi Angular v6 -sovellus

Tässä vaiheessa olet asentanut Angular CLI: n globaalisti tietokoneellesi. Nyt sinun on luotava uusi Angular-sovellus. Käytämme ng new name-of-my-incredible-appkomentoa, sen avulla voimme luoda kulmasovelluksen.

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

SCSS-bitti on olemassa, jotta voimme käyttää SCSS: ää. Tämä vie vähän. Kun se on valmis, siirrymme äskettäin luotuun sovellukseen.

cd my-ionicons-angular-app

Heti kun olemme projektihakemistossa, voimme sitten käynnistää kehityspalvelimen.

ng serve

Tämä palauttaa seuraavan:

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

URL-osoitteen suorittaminen // localhost: 4200 / näyttää uuden sovelluksesi. Jos näet alla olevan näytön. Sinulla on hyvä mennä.

Asenna Ionicons

Kuten aikaisemmin, käytämme npm: ää uudelleen Ioniconien asentamiseen.

npm install ionicons

Asenna Ionicons käytettäväksi Angular v6 -sovelluksessa

Heti kun se asennetaan, meidän on kerrottava kulmikkaasti, mihin ja miten se ladataan. Paras tapa tehdä se on styles.scss-tiedostossamme ja teet tämän lisäämällä seuraavat rivit:

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

Se tulisi asettaa oikein tässä vaiheessa. Voit muokata kotisivutiedostoa - app.component.html ja lisätä uuden kuvakkeen kirjasinkuvakkeen avulla tällä tavalla: 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!