Cómo crear una biblioteca de componentes a partir de ilustraciones SVG | Programar Plus

0

¡Recientemente publiqué mi primer paquete npm de código abierto! Convierte ilustraciones SVG desde unDraw en componentes React personalizables.

Aquí hay un GIF que muestra lo que quiero decir:

Un GIF animado de una ilustración de un hombre sentado detrás de una computadora portátil con los colores de la ilustración cambiando.

¿Qué es unDraw?

unDraw es una colección de ilustraciones con licencia del MIT para cada proyecto que puedas imaginar y crear. Es una colección constantemente actualizada de hermosas imágenes SVG que puedes usar completamente gratis y sin atribución.

“>

Si bien unDraw aún es bastante nuevo, su naturaleza de código abierto significa que ya está siendo utilizado por una variedad de productos. Aquí está en el sitio de tutoría de diseño recientemente lanzado llamado MentorOla, junto con un sitio de idiomas en el que he estado trabajando llamado Little Lingua:

Una imagen de lado a lado que muestra dos sitios web usando ilustraciones SVG unDraw.Izquierda: MentorOla de Marc Andrew, Derecha: Little Lingua]

Mientras usaba React para construir el sitio web de Little Lingua, descubrí que convertir SVG en componentes de React los hacía mucho más manejables e incluso más personalizables como ilustraciones.

Debido a esta utilidad, quería lanzar una biblioteca de componentes unDraw React como un paquete npm de código abierto para llevar la belleza de unDraw a la mayor audiencia de JavaScript de una manera simple:

Marco de referencia noviembre de 2016 octubre de 2017 % Cambio
Reaccionar 2,564,601 7,040,410 174,5%
Angular 1,289,953 2,168,899 68,1%
Columna vertebral 663,610 837,372 31,6%
Angular.js 616,135 1,081,796 75,6%
vista 6,231 874,424 13,933.%

Fuente: Marcos de JavaScript por los números

John Hannah, autor del informe JavaScript Frameworks by the Numbers:

React domina absolutamente. Es, con mucho, el más descargado según estos números…

Mucha inspiración para armar este paquete provino del proyecto React Kawaii de Miuki Miu, donde hizo básicamente lo mismo y un poco más:


Capturas de pantalla del sitio web de React Kawaii, incluidas las ilustraciones que inspiraron el proyecto unDraw.

Su artículo describe el concepto general de los SVG como componentes de React, y aquí entraré en más detalles relacionados con mi propio proceso, incluida la recopilación de la documentación de Styleguideist. Esto es todo lo que se cubrirá:

  1. Cómo convertir ilustraciones SVG en componentes React personalizables
  2. Cómo utilizar Styleguideist para producir documentación sencilla e interactiva
  3. Cómo liberar un paquete npm (ya que era la primera vez que hacía esto)

1. Ilustraciones SVG como componentes React

Cuando visitas unDraw, actualmente es posible personalizar un color primario de cada ilustración SVG directamente desde el sitio web:

La descarga de SVG que obtienes cuando tomas la imagen es bastante tediosa para personalizar más, ya que hay muchos valores de color para cambiar. Sin embargo, si ese SVG se convierte en un componente React, ¡se vuelve realmente fácil! Compara los dos:

UnDraw Designer SVG vs React Component

Esencialmente, el SVG se mantiene dentro de un componente React, con el cual es muy simple interactuar. Simplemente pasa las propiedades al Componente (por ejemplo, skinColor/hairColor/primaryColor), que luego las rocía en el SVG.

Puedes hacerlo en solo tres pasos:

Convierte el SVG a JSX

Existen algunas herramientas increíbles para convertir SVG en el código JSX que se usa en un componente React. render() método. El primero que usé fue el primero que encontré: SVG a JSX; también fue el primer resultado de búsqueda de Google 😉. Como dice en la lata, cualquier código JSX se genera a partir de cualquier SVG que pegue:

Convertidor de SVG a JSX de Balaj Marius

Una vez que tenga su JSX, péguelo en su componente React así:

import React from 'react';
import PropTypes from 'prop-types';
const UndrawDesigner = props => (
<svg id='780c6f38–12e9–4526–8343–95ef18389740' dataName="Layer 1" xmlns="http://www.w3.org/2000/svg">
  // all your svg code
</svg>
);
export default UndrawDesigner;

¡Eso es! Ahora puede usar esto como un componente colocando esto en su código:

<UndrawDesigner/>

En este momento, estará atascado con los colores predeterminados de su SVG. Hagamos que esos colores sean fáciles de cambiar:

Hazlo personalizable con accesorios

Podemos usar los beneficios de React para hacer que la ilustración sea personalizable agregando *accesorios* como marcadores de posición que se usan para llenar los *atributos de color* del SVG/JSX en su componente: 

<svg xmlns="http://www.w3.org/2000/svg">

  <path fill={props.hairColor} d='...' />
  <path fill={props.hairColor} d='...' />
  
  <ellipse fill={props.skinColor} cx='...' cy='...' rx='...' ry='...' />
  <ellipse fill={props.skinColor} cx='...' cy='...' rx='...' ry='...' />
  
  <!-- etc -->

</svg>

Para asegurarse de que está reemplazando los atributos de relleno correctos, puede abrir el SVG en su navegador e identificar los colores usando las herramientas de inspección de su navegador:

Puedes ver el color aquí es rgb(226,189,149) . Convierte eso a un código hexadecimal. Hay muchas maneras de hacer esto, una es buscar “colorpicker” en Google:

Dado que un solo color se usa a menudo en numerosos lugares en una ilustración SVG (por ejemplo, la mano izquierda, la mano derecha, la cara será la misma), habrá muchos lugares en los que será necesario reemplazar un color. Para hacerlo rápidamente, tome el código HEX y busque y reemplace en su componente, reemplazando el atributo de color con el nombre de su accesorio, por ejemplo {props.skinColor} .

Haga esto con tantos colores/elementos de su SVG como desee personalizar, asegurándose de que sus accesorios tengan un nombre que sea fácil de entender y usar para otras personas.

Agregue definiciones PropType y colores predeterminados

Una vez que haya terminado de agregar sus accesorios, es una buena práctica definirlos como propTypes. Esto también ayudará cuando hagamos una documentación impresionante para nuestros componentes. Agréguelos así (asegúrese de tener prop-types instalado en su proyecto):

UndrawDesigner.propTypes = {
/**
* Hex color
*/
skinColor: PropTypes.string,
/**
* Hex color
*/
hairColor: PropTypes.string,
/**
* Hex color
*/
primaryColor: PropTypes.string,
};

Termine su componente definiendo algunos colores predeterminados, justo antes de la declaración de exportación. Esto asegura que se usará un color alternativo si no se pasan accesorios al componente:

UndrawDesigner.defaultProps = {
  skinColor: '#e2bd95',
  primaryColor:'#6c68fb',
  hairColor:'#222'
};
export default UndrawDesigner;

Después de hacer esto, su componente estará listo para aceptar valores para cada uno de los atributos definidos. por ejemplo, en UndrawDesigner, podemos hacer un poco de gris humano pasando varios tipos de gris para la piel y el cabello. Bonito y sencillo:

Es mucho más simple, de verdad. Si quiere ir más allá del cambio de colores, lea el artículo de Miuki Miu, donde hábilmente agrega colores más pequeños. common componentes que se utilizan como expresiones faciales en componentes más grandes:

2. Hacer la guía de estilo

Para que las ilustraciones de React sean más útiles para todos, es posible crear una guía de estilo viva de los componentes usando React Styleguidist. Tampoco es mucho trabajo extra.


Debido a cómo funciona Stylguidist con React, es muy sencillo crear documentación a partir de los componentes que tenemos. Styleguidist requiere dos cosas principales para generar documentación a partir de nuestros componentes:

  1. Borrar definiciones de PropType
  2. Ejemplos de componentes

Ya nos hemos ocupado del primero en la sección anterior. Los comentarios sobre cada definición de PropType también son importantes, ya que se muestran en la documentación final:

Agregar ejemplos de componentes también es sencillo: agregue un Readme.md a la carpeta de su componente con un ejemplo de cómo se usaría. El contenido puede ser algo como esto:

// UndrawResponsive example
```js
<UndrawResponsive
height="250px"
primaryColor="#6c68fb"
accentColor="#43d1a0"
/>
```

Puede obtener más información en la documentación de Styleguidist.

Una vez que tenga esos dos en su lugar, instalar y ejecutar Styleguidist creará la documentación como magia. Siga las instrucciones aquí para instalarlo y ejecutarlo.

3. Liberar el paquete npm

En esta etapa, tenía una carpeta de componentes React con ilustraciones unDraw, pero no sirve para ningún otro proyecto. Estos son los pasos que tomé para convertirlos en un módulo npm:

  1. Cree un nuevo proyecto React usando la aplicación create-react-app de Facebook
  2. Copie los componentes de reacción en los que le gustaría lanzar un módulo npm src/node_modules/components de su proyecto creat-react-app
  3. Siga estos pasos descritos por Pavel Lokhmakov

Finalmente, para publicar su módulo, cree una cuenta npm y siga estos dos videos cortos de la documentación npm:

  1. Cómo crear módulos de Node.js
  2. Cómo publicar y actualizar un paquete

¡Eso es! Hay más de 100 ilustraciones unDraw de Katerina Limpitsouni en unDraw. Por el momento, solo he agregado un puñado de ellos al paquete unDraw npm, pero agregaré más cada semana.

Consulte el repositorio de GitHub aquí. También publicaré pronto el código para LittleLingua, el sitio web que utiliza este paquete unDraw npm. Está construido con el tema con licencia MIT listo para producción de unDraw, llamado evie, que también he convertido en componentes React.

Para obtener más información sobre la transformación de ilustraciones SVG en componentes, consulte la charla de Elizabet Oliveira sobre su proyecto paralelo, React Kawaii, que también fue nominado como “Proyecto paralelo divertido del año” en los React Amsterdam Open Source Awards: