Node.js / Usando la libreria de iconos

Bienvenidos sean a este post, hoy veremos como aplicar esta libreria a nuestra aplicacion Notas.

En este post nos centraremos en mejorar la experiencia del usuario y para ello implementaremos los iconos, si bien existen muchas librerias que podemos utilizar y a su vez bootstrap tiene una buena lista de estos para implementar en la siguiente direccion:

https://getbootstrap.com/docs/4.5/extend/icons/

Pero para nuestra aplicacion utilizaremos los iconos de feather icons porque este se puede implementar mediante npm, para este post necesitaremos nuestra aplicacion Notas, sino la tienen les dejo un link donde pueden descargar un archivo con todos los archivos del proyecto:

Simplemente extraigan el directorio en el PC y ya tenemos nuestra aplicacion, dentro del directorio notas ejecutaremos el siguiente comando:

$ npm install feather-icons@4.25.x --save

Este no solo instalara los iconos sino tambien codigo para el navegador que permitira ajustar de mejor manera a los iconos cuando los utilicemos, con esto realizado nuestro primer paso y para ello iremos a app.mjs y agregaremos el siguiente segmento de codigo:

app.use('/assets/vendor/feather-icons', express.static(
        path.join(__dirname, 'node_modules', 'feather-icons', 'dist')));

Esta les recomiendo ubicarlas junto a los demas redireccionamientos, pero esto se encargara de enrutar el modulo de los iconos a la ruta que indicamos al comienzo, nuestro siguiente paso sera ir al archivo layout.hbs en el directorio views donde al final del archivo dentro de body agregaremos el siguiente segmento de codigo:

<script src="/assets/vendor/feather-icons/feather.js"><br></script><br><script>feather.replace();</script>

Nota:
Lo escribo de esta forma para que WordPress no me lo anule, en todo caso si ven solo un link en el final esta el archivo con este codigo.

En este caso primero cargaremos la libreria encargada de manejar los iconos y despues de esta llamaremos a la funcion replace, con esto ya podemos implementar nuestros iconos y para ello debemos hacerlo de la siguiente manera:

<i data-feather="nombre-icono"></i>

En este caso al icono le asignamos la propiedad data-feather y el nombre del icono que deseamos utilizar, para verlo en accion vamos a hacer una pequeña modificacion en el archivo index.hbs del directorio views donde cambiaremos el codigo de la siguiente manera:

views/index.hbs

<ul>
        {{#each listanotas}}
        <li>
        <i data-feather="pen-tool"></i>
        {{clave}}:
        <a href="/notas/ver?clave={{ clave }}">{{ titulo }}</a>
        </li>
        {{/each}}
</ul>

En este caso agregamos un elemento perteneciente al icono y le pasamos el valor por medio de la propiedad y para este caso le asignaremos el icono de pen-tool, si tienen curiosidad de como averiguar los distintos iconos disponibles simplemente vean el contenido del siguiente directorio:

notas/node_modules/feather-icons/dist/icons

Dentro tendran un monton de archivos con la extension svg, siendo estas las imagenes de nuestros iconos, y en la propiedad anterior solo pasamos el nombre sin la extension, si ejecutamos la aplicacion y agregamos una nota se vera de la siguiente forma

Como pueden ver ahora tenemos un icono delante del mensaje y este aparecera automaticamente por cada nota que vayamos agregando, esta es nuestra primera implementacion simple sobre la aplicacion en conjunto con bootstrap, a continuacion les dejo un archivo con todos los archivos de nuestro proyecto y los codigos trabajados en este post:

En resumen, hoy hemos visto como implementar iconos en nuestra aplicacion, hemos utilizaado a feather-icons, despues hemos hecho las modificaciones necesarias en nuestra aplicacion, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Donación

Es para mantenimento del sitio, gracias!

$1.50