En realidad no necesitas añadir iconos a la biblioteca de iconos que tenemos en @dile/icons. Si los quieres añadir puedes enviarnos un pull request en el repo de dile-components, pero si has leído bien la documentación de dile-icon habrás visto que puedes asociar cualquier icono personalizado con un poco de código.
Para ello generas un template de tu icono:
const miIcono = html`<svg class="dile-icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/></svg>`;
Fíjate que hemos colocado la clase dile-icon. Esa clase te vendrá bien para poder estilizar los iconos con las custom properties que define el componente dile-icon.
Luego usas el componente dile-icon indicando que se debe mostrar tu icono.
<dile-icon .icon="${miIcono}"></dile-icon>
Cómo colaborar con un icono en el repositorio de @dile/icons
De todos modos, si quieres colaborar publicando un icono que pueda usarse directamente con el package de @dile/icons tal cual, te paso una lista de pasos que tendrías que realizar para crear el template del icono, y hacer los demos. El proceso es un poco laborioso, no sé si en el futuro lo vamos a cambiar para resumir algunos pasos.
Todos estos pasos los tendrás que hacer en tu propio fork, de modo que puedas crear un pull request cuando actualices el fork.
1.- Conseguir el icono
Nosotros usamos los iconos de Material Design, que ya vienen preparados para las medidas predeterminadas que tienen los iconos de dile-components.
Entonces entramos en el sitio de Google Fonts para los Material Icons y buscamos el icono que queremos integrar.
Descargamos el svg. Entre todas las versiones solemos incluir el SVG con estas características:
- Densidad 1x
- Size 24px
- Color Black
2.- Crear el template del icono
Ahora creamos un template de lit-html con el svg del icono. Todos los templates están en el repositorio de dile-components dentro de la carpeta: packages/icons/src. Allí por facilitarte las cosas puedes tomar cualquier icono de muestra y crear el template apoyado en ese modelo de icono.
Solo tienes que cambiar la etiqueta <svg> por la del icono que te has descargado. Pero muy importante: debe tener la clase CSS que necesitamos para poder estilizar los iconos:
class="dile-icon"
El archivo del template del icono tiene el mismo nombre del icono que quieres subir con camelCase. Además exporta el mismo nombre del icono, también con camelCase. En resumen, el export tendrá el mismo nombre que le has puesto al fichero.
3.- Creas el export en el index.js del package
Dentro del package tenemos un index de los exports que incluye, en el archivo packages/icons/index.js del repositorio de los dile-components.
Ese export debe colocarse en orden alfabético, tal como están los otros exports de ese index.js.
Si creaste el template en el archivo formatBold.js, el export tendrá una pinta como esta:
export { formatBoldIcon } from "./src/formatBold.js";
4.- Crear el demo del icono
Ahora tienes que incluir el icono en la sección de demos, para ver si te ha funcionado bien y se puede ver con los estilos correctos.
Abres el archivo del demo de los iconos, que está en demos/icons.html y creas estas dos cosas:
a. El import en la lista de todos los imports de iconos:
import { formatBoldIcon } from "../packages/icons/index.js";
Ese import debes colocarlo en orden alfabético.
b. El marcado para mostrar el icono
Luego el marcado del icono, que también se coloca en orden alfabético, usando el HTML que usan el resto de los iconos:
<article>
${ formatBoldIcon }
<span>formatBoldIcon</span>
</article>
Luego tienes que ejecutar el sitio de los ejemplos, si no lo tienes abierto ya.
npm run start
Una vez se abra el sitio de los demos, navegas hasta la página de los demos de los iconos y verificas que el icono se ve correctamente.
5.- Actualizar la documentación del paquete en el sitio de dile-components
Otro sitio donde se ven los iconos es en la documentación de dile-components, que está en dile-components icons.
Allí también tenemos que reproducir el código necesario para que se vea el nuevo icono.
Tienes que abrir el archivo que está en: site/pages/utils/icons.rocket.md, dentro del repositorio de los dile-components.
Allí añades (siempre por orden alfabético para mantener el patrón):
a. El import del icono
import { formatBoldIcon } from "../../../packages/icons/index.js";
b. El marcado para que se vea el icono
<article>
<dile-icon id="formatBoldIcon"></dile-icon>
<span>formaBoldIcon</span>
</article>
c. Finalmente el código imperativo para que se muestre el icono en esa posición
Este último paso no debería ser necesario pero Rocket tiene un problema al interpolar en templates de lit… un poco largo de explicar y quizás lo arreglen pronto. De momento para que funcione hay que añadir una línea más.
this.shadowRoot.getElementById('formatBoldIcon').icon = formatBoldIcon;
Para verificar que la documentación se ha creado correctamente, puedes arrancar en modo desarrollo el sitio de Rocket con este comando:
npm run start:rocket
El sitio de Rocket se abrirá y tendrás que ver si el icono aparece en el listado de iconos en la documentación.
6.- Hacer el pull request
Con esto has podido hacer todos los cambios necesarios para que el icono esté disponible y para que los demos y la documentación estén listos para reflejar este cambio en el repositorio.
Luego subes los cambios a tu propio fork en github y por último haces el pull request desde la página de GitHub.