Hvordan å Lage en Komponent Bibliotek Fra SVG Illustrasjoner

0
33

Jeg har nylig publisert min første open source npm-pakke! Det gjør SVG-illustrasjoner fra unDraw i passelig Reagere komponenter.

Her er en GIF-fil som viser hva jeg mener:

Hva er unDraw?

Mens unDraw er fortsatt ganske ny, åpen kildekode naturen betyr at det blir brukt av en rekke produkter som allerede er. Her er det på den nylig lanserte design mentoring nettsted kalt MentorOla, sammen med et språk siden jeg har jobbet med meg selv kalt Lille Lingua:

Venstre: MentorOla av Marc Andrew, Høyre: Lite Lingua]

Mens du bruker Reagere på å bygge den Lille Lingua nettstedet, oppdaget jeg at konvertering SVGs inn Reagere komponenter laget dem mye mer håndterlig, og enda mer passelig som illustrasjoner.

På grunn av denne nytten, jeg ønsket å slippe et bibliotek av unDraw Reagere komponenter som en åpen kildekode-npm-pakke for å bringe skjønnheten av unDraw til den største av JavaScript publikum på en enkel måte:

Rammeverk
Nov. 2016
Lys over norge, jan. 2017
% Endring
Reagerer 2,564,601 7,040,410 174.5%
Kantete 1,289,953 2,168,899 68.1%
Ryggraden 663,610 837,372 31.6%
Angular.js 616,135 1,081,796 75.6%
Vue 6,231 874,424 13,933.%

Kilde: JavaScript-Rammeverk av Tall

John Hannah, som forfattet den JavaScript-Rammeverk av Tall-rapporten:

Reagerer absolutt dominerer. Det er langt den mest nedlastede i henhold til disse tallene…

Mye inspirasjon å sette denne pakken sammen kom fra Miuki Miu prosjekt Reagere Kawaii, hvor hun gjorde stort sett det samme, og litt mer:

Hennes artikkelen skisserer de generelle begrepet SVGs som Reagerer Komponenter, og her vil jeg gå i mer detaljer involvert i min egen prosess, inkludert å sette sammen Styleguideist dokumentasjon. Her er alt som vil bli dekket:

  1. Hvordan å konvertere SVG illustrasjoner i tilpasses, Reagerer Komponenter
  2. Hvordan bruke Styleguideist til å produsere enkle, interaktive dokumentasjon
  3. Hvordan til å slippe en npm-pakke (siden det var min første gang du gjør dette)

1. SVG Illustrasjoner som Reagerer Komponenter

Når du besøker unDraw, det er for tiden mulig å tilpasse en primær farge av hver SVG illustrasjon rett fra nettsiden:

SVG laste ned som du får når du tar bildet er ganske kjedelig å tilpasse lenger, ettersom det er mange color verdier for å endre. Hvis det SVG er konvertert til en Reagerer komponent skjønt, det blir veldig lett! Du sammenligne de to:

unDraw designer SVG vs. Reagere Komponent

I hovedsak, SVG er holdt innenfor en Reagerer komponent, som er svært enkle å kommunisere med. Du bare passere egenskaper til Komponent (f.eks. skinColor/hairColor/primaryColor), som deretter sprinkles dem inn i SVG.

Du kan gjøre dette i bare tre trinn:

Konverter SVG til JSX

Det er noen fantastisk verktøy der ute for å konvertere SVGs i JSX koden som brukes i en Reagerer komponent render () – metoden. Det første jeg brukte var den første jeg kom over: SVG til JSX—det var også den første Google-søkeresultat 😉. Som det står på boksen, noen JSX-koden er generert fra en SVG-du kan lime inn i:

SVG til JSX converter Balaj Marius

Når du har fått din JSX, lim det inn i din Reagerer komponent som så:

import Reagere fra “reagerer’;
import PropTypes fra ‘prop-typer’;
const UndrawDesigner = rekvisitter => (
<svg-id=’780c6f38–12e9–4526–8343–95ef18389740′ dataName=’Lag 1′ xmlns=’http://www.w3.org/2000/svg’>
// alle svg-kode
</svg>
);
eksport standard UndrawDesigner;

Det er det! Nå kan du bruke dette som en komponent ved å slippe dette inn koden:

<UndrawDesigner/>

Akkurat nå, vil du bli sittende fast med standard farger og SVG. La oss gjøre disse fargene lett å endre:

Gjør det Passelig Med Rekvisitter

Vi kan benytte fordelene av Reagere for å gjøre figuren kan tilpasses ved å legge til *rekvisitter* som plassholdere som brukes til å fylle *farge attributter* av SVG/JSX i din komponent:

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

<bane fylle={rekvisitter.hairColor} d=’…’ />
<bane fylle={rekvisitter.hairColor} d=’…’ />

<ellipse fylle={rekvisitter.skinColor} cx=’…’ cy=’…’ rx=’…’ ry=’…’ />
<ellipse fylle={rekvisitter.skinColor} cx=’…’ cy=’…’ rx=’…’ ry=’…’ />

<!– etc –>

</svg>

Å sørge for at du bytte høyre fylle attributter, kan du åpne SVG i nettleseren din, og identifisere fargene ved å bruke nettleserens inspektør verktøy:

Du kan se fargen her er rgb(226,189,149) . Konvertere den til en hex-koden. Det er mange måter å gjøre dette på, er å søke “colorpicker” i Google :

Siden en enkelt farge er ofte brukt i en rekke steder i en SVG-illustrasjon (f.eks. venstre hånd, høyre hånd, ansikt vil være den samme), vil det være mange steder en farge som må skiftes. For å gjøre det raskt, grip den HEKSADESIMALE koden, og gjør et søk-og-erstatt i din komponent, skifte farge attributt med din prop navn, for eksempel {rekvisitter.skinColor} .

Gjør dette med så mange farger/elementer i SVG som du ønsker å gjøre passelig, noe som sikrer din rekvisitter navngis, slik at det er lett for andre å forstå og bruke.

Legg til PropType definisjoner og Standard Farger

Når du er ferdig med å legge til dine rekvisitter, det er god praksis å definere dem som propTypes. Dette vil også bidra når vi lage fantastiske dokumentasjon for våre komponenter. Legg til dem som så (sørg for at du har prop-typer som er installert i prosjektet):

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

Fullfør din komponent ved å definere noen standard farger, rett før eksport uttalelse. Dette sikrer et tilbakefall fargen vil bli brukt hvis ingen rekvisitter er gått over på komponent:

UndrawDesigner.defaultProps = {
skinColor: ‘#e2bd95′,
primaryColor:’#6c68fb’,
hairColor:’#222′
};
eksport standard UndrawDesigner;

Etter å ha gjort dette, komponent vil være klar til å akseptere verdier for hver av de attributtene som er definert. For eksempel, i UndrawDesigner, kan vi gjøre en liten, grå menneskelige ved å sende ulike typer av grått for hud og hår. Fin og enkel:

Det er så mye enklere, egentlig. Hvis du ønsker å gå utover endre farger, lese Miuki Miu ‘ s artikkel, der hun smart legger mindre vanlige komponenter som er brukt som ansiktsuttrykk på tvers av større komponenter:

2. Gjør Style Guide

For å gjøre Reagere illustrasjoner mer nyttig for alle, det er mulig å lage en levende stil guide av komponenter ved hjelp av Reagere Styleguidist. Det er ikke mye ekstra arbeid, enten.

På grunn av hvordan Stylguidist arbeider med å Reagere, det er veldig enkelt å lage dokumentasjon fra komponentene vi har. Styleguidist krever to viktigste tingene å generere dokumentasjon fra våre komponenter:

  1. Klart PropType definisjoner
  2. Komponent eksempler

Vi har allerede tatt vare på de første i forrige avsnitt. Kommentarene ovenfor hver PropType definisjonen er også viktig, som det blir vist i slutten dokumentasjon:

Legge til komponenten eksempler er også grei—legg til en Readme fil.md til mappen din komponent med et eksempel på hvordan det ville bli brukt. Innholdet kan se ut noe som dette:

// Eksempel UndrawResponsive
“js
<UndrawResponsive
høyde=’250px’
primaryColor=’#6c68fb’
accentColor=’#43d1a0′
/>

Du kan finne ut mer i Styleguidist dokumentasjon.

Når du har fått de to på plass, installere og kjøre Styleguidist vil skape den dokumentasjon som magi. Følg instruksjonene her for å installere og kjøre det.

3. Å slippe npm-pakke

På dette stadiet hadde jeg en mappe som Reagerer komponenter med unDraw illustrasjoner, men det er ubrukelig til andre prosjekt. Her er de skritt jeg tok for å slå dem i en npm-modulen:

  1. Opprette en helt ny Reagere prosjektet ved å bruke ‘s lag-reagere-app
  2. Kopiere over reagere komponenter du ønsker å slippe en npm-modulen inn i src/node_modules/deler av deres opprette-reagere-app prosjektet
  3. Følg disse trinnene Pavel Lokhmakov

Til slutt, for å publisere din modul, kan du opprette et npm-konto og følge disse to korte videoer av npm-dokumentasjon:

  1. Hvordan å lage Node.js moduler
  2. Hvordan til å publisere og oppdatere en pakke

Det er det! Det er over 100 unDraw illustrasjoner av Katerina Limpitsouni på unDraw. I øyeblikket har jeg bare lagt til en håndfull av dem til unDraw npm-pakke, men vil være å legge mer og mer for hver uke.

Sjekk ut GitHub depotet her. Jeg vil også være å slippe koden for LittleLingua snart, nettstedet som gjør bruk av denne unDraw npm-pakken. Det er bygget med unDraw produksjon-klar MIT lisensiert tema, kalt evie, som jeg har også konvertert til Reagere komponenter.

For å lære mer om å transformere SVG illustrasjoner i komponenter, sjekk ut Elizabet Oliveira er snakk om hennes side prosjekt, Reagerer Kawaii som også ble nominert som “Morsom Side Project of the Year” på den Reagerer Amsterdam Open Source Awards: