Cómo agregar Ionicons a sus aplicaciones de Angular 6

Recientemente tuve que trabajar en muchas aplicaciones de Angular y Font Awesome literalmente me ha cansado. Así que decidí usar Ionicons fuera del popular framework Ionic.

Esta publicación muestra cómo configurar Ionicons en su proyecto Angular. Daremos los siguientes pasos:

  • Instalar Angular CLI v6
  • Crea una nueva aplicación Angular v6
  • Instalar Ionicons
  • Configure Ionicons para usar en su aplicación Angular v6

Instalar Angular CLI v6

Esto es bastante simple: simplemente instale la última versión de Angular a través de npm.

npm install -g @angular/[email protected]

Una vez hecho esto, ejecute un ng --versionpara verificar la versión de Angular que ha instalado. Asegúrese de que sea la versión de CLI angular de 6.0.0 y superior, como a continuación.

Crea una nueva aplicación Angular v6

En este punto, ha instalado la CLI de Angular globalmente en su PC. Ahora puedes crear una nueva aplicación Angular. Usamos el ng new name-of-my-incredible-appcomando, nos permite crear una aplicación Angular.

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

El bit SCSS está ahí para permitirnos usar SCSS. Esto lleva un poco. Cuando haya terminado, navegamos a la aplicación recién creada.

cd my-ionicons-angular-app

Tan pronto como estemos en el directorio del proyecto, podemos iniciar el servidor de desarrollo.

ng serve

Esto devuelve lo siguiente:

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

Ejecutando la URL // localhost: 4200 / le muestra su nueva aplicación. Si ve la pantalla a continuación. Tú eres bueno para irte.

Instalar Ionicons

Como hicimos antes, usamos npm nuevamente para instalar Ionicons.

npm install ionicons

Configure Ionicons para usar en su aplicación Angular v6

Tan pronto como se instale, necesitamos decirle a angular dónde y cómo cargarlo. La mejor manera de hacerlo es dentro de nuestro archivo styles.scss y lo hace agregando las siguientes líneas:

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

Debería estar configurado correctamente en este punto. Puede editar el archivo de su página de inicio - app.component.html y usar el ícono de fuente para agregar un nuevo ícono como este: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.

Original text


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!