Het Maken van een Component Bibliotheek Van SVG-Afbeeldingen

0
33

Ik heb onlangs verscheen mijn eerste open source npm-pakket! Het maakt SVG-afbeeldingen van unDraw in klantgericht Reageren onderdelen.

Hier is een GIF dat laat zien wat ik bedoel:

Wat is unDraw?

Terwijl unDraw is nog vrij nieuw, de open source natuur betekent dat het wordt gebruikt door een reeks van producten al. Hier is het op de pas gelanceerde ontwerp mentoring site genaamd MentorOla, naast een taal die site heb ik gewerkt aan mezelf genaamd Little Lingua:

Links: MentorOla door Marc Andries, Rechts: Kleine Lingua]

Terwijl u Reageren op het bouwen van de Kleine Lingua website, ontdekte ik dat het omzetten van SVGs in Reageren onderdelen maakte hen veel meer beheersbaar en nog meer passen illustraties.

Omdat van dit nut, ik wilde om een bibliotheek van unDraw Reageren onderdelen als een open bron npm-pakket om de schoonheid van unDraw tot de grootste van JavaScript publiek op een eenvoudige manier:

Kader
Nov. 2016
Okt. 2017
% Verandering
Reageren 2,564,601 7,040,410 174.5%
Hoekig 1,289,953 2,168,899 Met 68,1%
Backbone 663,610 837,372 31.6%
Angular.js 616,135 1,081,796 75.6%
Vue 6,231 874,424 13,933.%

Bron: JavaScript-Frameworks door de Getallen

John Hannah, die auteur van de JavaScript-Frameworks door de Getallen rapport:

Reageren absoluut domineert. Het is veruit de meest gedownloade volgens deze cijfers…

Veel inspiratie om dit pakket samen kwam van Miuki Miu ‘ s project Reageren Kawaii, waar ze heeft grotendeels hetzelfde, en een beetje meer:

Haar artikel beschrijft het totale concept van de SVGs zo Reageren Componenten, en hier ga ik meer van de details in mijn eigen proces, inclusief het samenstellen van Styleguideist documentatie. Hier is alles die worden behandeld:

  1. Hoe om te zetten naar SVG illustraties in aanpasbare Reageren Onderdelen
  2. Hoe te gebruiken Styleguideist te produceren eenvoudige, interactieve documentatie
  3. Hoe laat een npm-pakket (want het was mijn eerste keer dit te doen)

1. SVG-Afbeeldingen Reageren Onderdelen

Wanneer u een bezoek unDraw, het is momenteel mogelijk om te passen een primaire kleur van elk SVG-afbeelding rechts van de website:

De SVG-download die je krijgt als je pak het beeld is vrij vervelend om te passen verder, want er is veel kleur waarden te wijzigen. Als dat SVG is omgezet naar een Reageren onderdeel al, het wordt pas echt makkelijk! Vergelijk de twee:

unDraw designer SVG vs. Reageren Component

In wezen, de SVG is gehouden binnen een Reageren component, die is zeer eenvoudig te gebruiken interface. Je hoeft alleen voorbij eigenschappen van het Onderdeel (bijvoorbeeld huidskleur/hairColor/primaryColor), die vervolgens besprenkelt ze in de SVG.

U kunt dit doen in slechts drie stappen:

Zetten de SVG te JSX

Er zijn een aantal geweldige programma ‘ s op te zetten SVGs in de JSX code die wordt gebruikt in een Reageren onderdeel van de render () – methode. De eerste die ik gebruikte was de eerste die ik tegenkwam: SVG te JSX—het was ook het eerste zoekresultaat van Google 😉. Als het zegt over het tin, een JSX code wordt gegenereerd op basis van een SVG-plakken:

SVG te JSX converter door Balaj Marius

Als u eenmaal uw JSX, plak het in je Reageren onderdeel:

importeren Reageren van ‘reageren’;
importeren PropTypes van ‘prop-types’;
const UndrawDesigner = props => (
<svg-id=’780c6f38–12e9–4526–8343–95ef18389740′ dataName=’Laag 1′ xmlns=’http://www.w3.org/2000/svg’>
// alle svg-code
</svg>
);
export standaard UndrawDesigner;

Dat is het! Nu kunt u dit als een onderdeel van het vallen in je code:

<UndrawDesigner/>

Nu, zult u worden geplakt met de standaard kleuren van de SVG. Laten we de kleuren eenvoudig te wijzigen:

Maakt het passen Met Rekwisieten

We kunnen gebruik maken van de voordelen van Reageren op de afbeelding instelbaar door het toevoegen *rekwisieten* als tijdelijke aanduidingen die worden gebruikt voor het vullen van de *kleur* attributen van de SVG/JSX in uw component:

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

<pad fill={rekwisieten.hairColor} d=’…’ />
<pad fill={rekwisieten.hairColor} d=’…’ />

<ellips fill={rekwisieten.huidskleur} cx=’…’ cy=’…’; rx=’…’ ry=’…’ />
<ellips fill={rekwisieten.huidskleur} cx=’…’ cy=’…’; rx=’…’ ry=’…’ />

<!– etc –>

</svg>

Om ervoor te zorgen u het vervangen van de rechts vullen eigenschappen, opent u de SVG in uw browser, en herkent de kleuren met behulp van uw browser inspecteur tools:

U kunt de kleur hier is rgb(226,189,149) . Zetten dat het om een hex-code. Er zijn vele manieren om dit te doen, is zoeken ‘colorpicker’ in Google :

Sinds een enkele kleur wordt vaak gebruikt in tal van plaatsen in een SVG-afbeelding (bijv. linker hand, rechter hand, gezicht hetzelfde zal zijn), zal er op veel plaatsen een kleur moet worden vervangen. Om snel te doen, grijpen de HEX-code in en voer een zoek-en-vervang in uw component, het vervangen van de kleur attribuut met uw prop naam, bijvoorbeeld {rekwisieten.huidskleur} .

Doe dit met zo veel kleuren en elementen van uw SVG-zoals je zou willen maken aan te passen, ervoor te zorgen dat uw rekwisieten worden genoemd, zodat ze makkelijk voor andere mensen te begrijpen en te gebruiken.

Toevoegen PropType definities en Standaard Kleuren

Zodra u klaar bent met het toevoegen van uw rekwisieten, het is een goede gewoonte om ze te definiëren als propTypes. Dit zal ook helpen bij het maken van awesome documentatie voor onze onderdelen. Voeg ze toe zoals (zorg ervoor dat u hebt prop-types geïnstalleerd in uw project):

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

Uw component door het definiëren van een aantal standaard kleuren, vlak voordat de instructie exporteren. Dit zorgt voor een fallback kleur zal worden gebruikt als er geen rekwisieten worden doorgegeven aan het onderdeel:

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

Na het doen van dit, uw component zal klaar zijn om te accepteren waarden voor elk van de attributen gedefinieerd. Bijvoorbeeld, in UndrawDesigner, kunnen we een kleine, grijze mens door het passeren van verschillende soorten grijs voor huid en haar. Leuk en eenvoudig is:

Het is veel eenvoudiger, echt. Als u wilt om verder te gaan dan het veranderen van kleuren, lezen Miuki Miu ‘ s artikel, waar ze slim voegt kleinere componenten die worden gebruikt als gezichtsuitdrukkingen over grotere onderdelen:

2. Het maken van de Style Guide

Om het Reageren illustraties meer nuttig voor iedereen, het is mogelijk om het maken van een levende style guide van de componenten met behulp van Reageren Styleguidist. Het is niet veel extra werk.

Want hoe Stylguidist werkt met Reageren, het is echt eenvoudig om het maken van documentatie van de onderdelen die we hebben. Styleguidist vereist twee belangrijke dingen voor het genereren van documentatie van onze componenten:

  1. Duidelijk PropType definities
  2. Component voorbeelden

We hebben al gezorgd van het eerste in de vorige paragraaf. De opmerkingen hierboven elk PropType definitie is ook belangrijk, als het wordt weergegeven in het einde documentatie:

Het toevoegen van onderdeel voorbeelden is ook eenvoudig: voeg een Leesmij-bestand.md naar de map van uw componenten met een voorbeeld van hoe het zou worden gebruikt. De inhoud kan er als volgt uitzien:

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

U kunt meer informatie vinden in de Styleguidist documentatie.

Zodra je die hebt twee in de plaats, installeren en uitvoeren van Styleguidist zal maken van de documentatie als magie. Volg hier de instructies voor het installeren en voer het uit.

3. Het loslaten van de npm-pakket

Op dit moment, ik had een map van Reageren componenten met unDraw illustraties, maar het is nutteloos om bij elk ander project. Hier zijn de stappen die ik nam om ze om te zetten in een npm-module:

  1. Het maken van een gloednieuwe Reageren project met ‘s maken-reageren-app
  2. Kopieer het reageren onderdelen u wilt vrijgeven een npm-module in src/node_modules/onderdelen van uw creat-reageren-app project
  3. Volg deze stappen door Pavel Lokhmakov

Ten slotte, voor het publiceren van de module, het maken van een npm-account en volg deze twee korte video ‘ s van de npm-documentatie:

  1. Hoe te maken Node.js modules
  2. Hoe om te publiceren en bijwerken van een pakket

Dat is het! Er zijn meer dan 100 unDraw illustraties door Katerina Limpitsouni op unDraw. Op het moment heb ik toegevoegd een handvol van die aan de unDraw npm-pakket, maar zal het toevoegen van meer elke week.

Check out de GitHub repository hier. Ik zal ook het loslaten van de code voor de LittleLingua snel, de website die gebruik maakt van deze unDraw npm-pakket. Het is gebouwd met unDraw de productie-klaar MIT licentie-thema, genaamd evie, die heb ik ook omgezet in Reageren onderdelen.

Om meer te leren over de transformatie van SVG-afbeeldingen in onderdelen, check out Elizabet Oliveira praten over haar kant project, Reageren Kawaii die was ook genomineerd als “Leuke Side-Project van het Jaar” aan het Reageren Amsterdam Open Source Awards: