Hur du Skapar en del Bibliotek Från SVG-Illustrationer

0
112

Jag har nyligen publicerade min första någonsin öppen källkod npm paket! Det gör att SVG-bilder från unDraw i anpassningsbara Reagera komponenter.

Här är en GIF som visar vad jag menar:

Vad är unDraw?

Medan unDraw är fortfarande ganska ny, öppen källkod menas att den används av en rad av produkter som redan finns. Här är det på den nyligen lanserade design mentorskap plats som kallas MentorOla, tillsammans med ett språk som webbplatsen jag har jobbat på mig själv kallad Lilla Lingua:

Vänster: MentorOla av Marc Andrew, Höger: Lite Lingua]

När du använder Reagera på att bygga Lite Lingua hemsida, jag upptäckte att konvertera SVGs in Reagera komponenter gjort dem mycket mer hanterbar och ännu mer anpassningsbara som illustrationer.

På grund av detta själv, jag ville släppa ett bibliotek av unDraw Reagera komponenter som ett open source-npm-paket för att få skönhet unDraw till största av JavaScript målgrupper på ett enkelt sätt:

Ram
Nov. 2016
Okt. 2017
Förändring i %
Reagera 2,564,601 7,040,410 174.5%
Kantiga 1,289,953 2,168,899 68.1%
Ryggraden 663,610 837,372 31,6 procent
Angular.js 616,135 1,081,796 75.6%
Vue 6,231 874,424 13,933.%

Källa: JavaScript-Ramverk av Nummer

John Hannah, som skrivit den JavaScript-Ramverk av Siffrorna rapport:

Reagera helt dominerar. Det är den i särklass mest nedladdade enligt dessa siffror…

En hel del inspiration att sätta det här paketet tillsammans kom från Miuki Miu projekt Reagera Kawaii, där hon gjorde i stort sett samma sak, och lite mer:

Hennes artikel anger de övergripande begreppet SVGs som Reagerar Komponenter, och här kommer jag gå in mer på detaljer som arbetar i min egen process med att sätta ihop Styleguideist dokumentation. Här är allt som kommer att omfattas:

  1. Hur konverterar man SVG illustrationer till anpassningsbara Komponenter Reagerar
  2. Hur man använder Styleguideist att producera enkla, interaktiva dokumentation
  3. Hur ska släppa en npm paket (eftersom det var mitt första gången du gör detta)

1. SVG Illustrationer som Reagerar Komponenter

När du besöker unDraw, det är för närvarande möjligt att anpassa en primär färg av varje SVG-bild direkt från hemsidan:

SVG ladda ner du får när du tar tag i den bilden är ganska jobbigt att anpassa längre, eftersom det finns många färger för värden för att ändra. Om det SVG omvandlas till en Reagera komponent dock, det blir verkligen lätt! Jämför de två:

unDraw designer SVG vs. Reagera Komponent

I huvudsak, SVG hålls inom en Reagera komponent, som är mycket enkel att kommunicera med. Du bara passerar egenskaper för Komponent (t ex skinColor/hairColor/primaryColor), som sedan häller dem i SVG.

Du kan göra detta på bara tre steg:

Konvertera SVG att JSX

Det finns några väldigt fräcka verktyg för att konvertera SVGs i JSX koden som används i en Reagera komponent render () – metoden. Den första som jag använde var den första jag kom över: SVG att JSX—det var också det första Google-sökresultat 😉. Som det står på burken, någon JSX kod genereras från någon SVG du klistrar in på:

SVG att JSX converter av Marius Balaj

När du har fått din JSX, klistra in den i din Reagera komponent så här:

importera Reagerar från ‘reagerar’;
importera PropTypes från “prop-typer’;
const UndrawDesigner = rekvisita => (
<svg id=’780c6f38–12e9–4526–8343–95ef18389740′ dataName= “nivå 1” xmlns=’http://www.w3.org/2000/svg’>
// alla dina svg-kod
</svg>
);
export standard UndrawDesigner;

Det är det! Nu kan du använda detta som en komponent genom att släppa detta i din kod:

<UndrawDesigner/>

Just nu, du kommer vara fast med den standard färger på dina SVG. Låt oss göra dessa färger lätt att ändra:

Gör den Anpassningsbar Med Rekvisita

Vi kan använda fördelarna med att Reagera för att göra bilden anpassningsbar genom att lägga till *rekvisita* som platshållare som används för att fylla *färg-attribut* SVG/JSX i din komponent:

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

<sökväg fylla={rekvisita.hairColor} d=’…’ />
<sökväg fylla={rekvisita.hairColor} d=’…’ />

<ellips fylla={rekvisita.skinColor} cx=’…’ cy=’…’ rx=’…’ ry=’…’ />
<ellips fylla={rekvisita.skinColor} cx=’…’ cy=’…’ rx=’…’ ry=’…’ />

<!– etc –>

</svg>

Att se till att du ersätter den rätt fyll attribut, kan du öppna SVG i din webbläsare, och identifiera färgerna genom att använda din webbläsares inspektör verktyg:

Du kan se färgen här är rgb(226,189,149) . Konvertera det till en hex-kod. Det finns många sätt att göra detta är att söka efter “colorpicker” i Google :

Eftersom en enda färg används ofta på flera ställen i en SVG-bild (t ex vänster hand, höger hand, ansikte kommer att vara samma), kommer det att finnas många platser en färg som behöver bytas ut. För att göra det snabbt, ta tag i HEX-kod, och göra en sök-och-ersätt i din komponent, byta färg-attribut med din prop namn, t ex {rekvisita.skinColor} .

Att göra detta med så många färger/delar av din SVG som du skulle vilja göra anpassningsbara för att säkerställa att din rekvisita är namngivna så att de är lätt för andra människor att förstå och använda.

Lägg till PropType definitioner och Standard Färger

När du är klar med att lägga till din rekvisita, det är god praxis att definiera dem som propTypes. Detta kommer också att hjälpa till när vi gör fantastiska dokumentation för våra komponenter. Lägg till dem som så (se till att du har fastig-typer som finns installerade i din projektet):

UndrawDesigner.propTypes = {
/**
* Hex färg
*/
skinColor: PropTypes.sträng,
/**
* Hex färg
*/
hairColor: PropTypes.sträng,
/**
* Hex färg
*/
primaryColor: PropTypes.sträng,
};

Avsluta ditt komponent genom att definiera vissa förvalda färger, precis innan export uttalande. Detta säkerställer en återgång färg kommer att användas om ingen rekvisita skickas till komponenten:

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

Efter detta, din komponent kommer att vara redo att acceptera värden för vart och ett av de attribut som definierats. Till exempel, i UndrawDesigner, vi kan göra en liten grå människa genom att passera olika typer av grått för hud och hår. Trevligt och enkelt:

Det är så mycket enklare, verkligen. Om du vill gå längre än att ändra färger, läsa Miuki Miu: s artikel, där hon skickligt lägger mindre gemensamma komponenter som används som ansiktsuttryck över större komponenterna:

2. Att göra Style Guide

För att göra Reagera illustrationer mer användbar för alla, det är möjligt att skapa en levande style guide av komponenter med hjälp Reagera Styleguidist. Det är inte mycket extra arbete, antingen.

På grund av hur Stylguidist arbetar med att Reagera, det är verkligen enkelt att skapa dokumentation från de komponenter som vi har. Styleguidist kräver två saker för att generera dokumentation från våra komponenter:

  1. Tydliga definitioner PropType
  2. Komponent exempel

Vi har redan tagit hand om den första i föregående avsnitt. Kommentarerna ovan varje PropType definition är också viktigt, så blir det visas i slutet dokumentation:

Att lägga till komponent exempel är också enkelt—lägg till en Readme-fil.md till mappen för din komponent med ett exempel på hur det skulle användas. Innehållet kan se ut ungefär så här:

// UndrawResponsive exempel
“js
<UndrawResponsive
height=’250px’
primaryColor=’#6c68fb’
accentColor=’#43d1a0′
/>

Du kan hitta mer information i Styleguidist dokumentation.

När du har fått de två på plats, installera och köra Styleguidist kommer att skapa dokumentation som magi. Följ de här instruktionerna för att installera och köra det.

3. Att släppa npm paket

I detta skede hade jag en mapp på Reagera komponenter med unDraw illustrationer, men det är meningslöst att alla andra projekt. Här är stegen jag tog för att förvandla dem till ett npm-modulen:

  1. Skapa en helt ny Reagera-projekt med hjälp av ‘s create-reagera-app
  2. Kopiera över den reagerar komponenter du vill släppa en npm-modulen i src/node_modules/komponenter av din skap-reagera-app-projekt
  3. Följ dessa steg som beskrivs av Pavel Lokhmakov

Slutligen, för att publicera din modul, skapa ett npm-konto och följ dessa två korta videofilmer av npm dokumentation:

  1. Hur till skapa Node.js moduler
  2. Hur att publicera och uppdatera ett paket

Det är det! Det finns över 100 unDraw illustrationer av Katerina Limpitsouni på unDraw. Just nu har jag bara lagt till en handfull av dessa till unDraw npm paket, men kommer att lägga till fler varje vecka.

Kolla in GitHub repository här. Jag kommer också att släppa koden för LittleLingua snart, den webbplats som använder sig av detta unDraw npm paket. Det är byggt med unDraw produktion-redo MIT licensierad tema, som heter evie, som jag har också omvandlas till komponenter Reagerar.

För att lära dig mer om att förvandla SVG illustrationer till komponenter, kolla in Elizabet Oliveira prata om hennes sida-projektet, Reagera Kawaii som också var nominerad som “Roliga Sidan Project of the Year” vid den Reagerar Amsterdam Open Source Awards: