Sådan tilføjes Ionicons til dine Angular 6-apps

Jeg har været nødt til at arbejde på mange Angular- apps for nylig, og Font Awesome har bogstaveligt talt træt mig ud. Så jeg besluttede at bruge Ionicons fra de populære Ionic-rammer.

Dette indlæg viser, hvordan du konfigurerer ionikoner til dit Angular-projekt. Vi tager følgende trin:

  • Installer Angular CLI v6
  • Opret en ny Angular v6-app
  • Installer ionikoner
  • Opsæt ionikoner til brug i din Angular v6-app

Installer Angular CLI v6

Dette er ret simpelt - du installerer bare den nyeste Angular-version via npm.

npm install -g @angular/[email protected]

Når dette er gjort, kører du derefter en for ng --versionat kontrollere den version af Angular, du har installeret. Sørg for, at det er Angular CLI-version af 6.0.0 og derover, som nedenfor.

Opret en ny Angular v6-app

På dette tidspunkt har du installeret Angular CLI globalt på din pc. Nu skal du oprette en ny Angular-app. Vi bruger ng new name-of-my-incredible-appkommandoen, det giver os mulighed for at oprette en kantet applikation.

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

SCSS-biten er der for at tillade os at bruge SCSS. Dette tager lidt. Når det er gjort, navigerer vi derefter til den nyoprettede app.

cd my-ionicons-angular-app

Så snart vi er i projektmappen, kan vi derefter starte udviklingsserveren.

ng serve

Dette returnerer følgende:

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

Kørsel af URL // localhost: 4200 / viser dig din helt nye app. Hvis du ser skærmen nedenfor. Du er god at gå.

Installer ionikoner

Som vi gjorde tidligere, bruger vi npm igen til at installere Ionicons.

npm install ionicons

Opsæt ionikoner til brug i din Angular v6-app

Så snart den er installeret, skal vi fortælle vinklen, hvor og hvordan den skal indlæses. Den bedste måde at gøre det på er i vores styles.scss-fil, og du gør dette ved at tilføje følgende linjer:

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

Det skal være konfigureret korrekt på dette tidspunkt. Du kan redigere din startside - app.component.html og bruge fontikonet til at tilføje et nyt ikon der som dette: 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!