Како додати Ионицонс у своје апликације Ангулар 6

Недавно сам морао да радим на многим апликацијама Ангулар и Фонт Авесоме ме је дословно уморио. Зато сам одлучио да користим Ионицонс изван популарног Јонског оквира.

Овај пост показује како поставити Ионицонс на вашем Ангулар пројекту. Предузећемо следеће кораке:

  • Инсталирајте Ангулар ЦЛИ в6
  • Направите нову апликацију Ангулар в6
  • Инсталирајте Ионицонс
  • Подесите Ионицонс за употребу у апликацији Ангулар в6

Инсталирајте Ангулар ЦЛИ в6

Ово је прилично једноставно - само инсталирате најновију верзију Ангулар-а путем нпм-а.

npm install -g @angular/[email protected]

По завршетку тога, покрените а ng --versionда бисте проверили верзију програма Ангулар коју сте инсталирали. Уверите се да је то Ангулар ЦЛИ верзија 6.0.0 и новија, као у наставку.

Направите нову апликацију Ангулар в6

У овом тренутку инсталирали сте Ангулар ЦЛИ глобално на свој рачунар. Сада морате да креирате нову апликацију Ангулар. Користимо ng new name-of-my-incredible-appкоманду, она нам омогућава да креирамо Ангулар апликацију.

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

СЦСС бит је ту да нам дозволи да користимо СЦСС. Ово траје мало. По завршетку прелазимо до новостворене апликације.

cd my-ionicons-angular-app

Чим се нађемо у директоријуму пројеката, тада можемо покренути развојни сервер.

ng serve

Ово враћа следеће:

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

Покретање УРЛ-а // лоцалхост: 4200 / приказује вам потпуно нову апликацију. Ако видите доњи екран. Спреман си.

Инсталирајте Ионицонс

Као и раније, поново користимо нпм за инсталирање Ионицонс-а.

npm install ionicons

Подесите Ионицонс за употребу у апликацији Ангулар в6

Чим се инсталира, морамо да кажемо угаоно где и како да га учитамо. Најбољи начин да то урадите је у нашој датотеци стилес.сцсс и то чините додавањем следећих редова:

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

У овом тренутку би требало правилно поставити. Можете уредити датотеку своје почетне странице - апп.цомпонент.хтмл и помоћу иконе фонта додати тамо нову икону попут ове: 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!