So Erstellen Sie eine Bibliothek mit Komponenten Aus SVG-Illustrationen

0
31

Ich habe mir vor kurzem veröffentlichte meine erste open-source-npm-Paket! Es macht SVG-Illustrationen von unDraw in anpassbaren Komponenten Reagieren.

Hier ist ein GIF, das zeigt, was ich meine:

Was unDraw?

Während unDraw ist noch ziemlich neu, die open-source-Natur bedeutet, dass es verwendet wird, die durch eine Reihe von Produkten, die bereits. Hier ist er auf die neu ins Leben gerufene mentoring-design-Website namens MentorOla, neben einer Sprache, die Website, von der ich gearbeitet habe, mich namens Little Lingua:

Links: MentorOla von Marc Andrew, Rechts: Wenig Lingua]

Während der Verwendung Reagiert zu bauen, die Wenig Lingua-website, entdeckte ich, dass die Umwandlung von SVGs zu Reagieren Komponenten viel mehr überschaubar und noch mehr anpassbare als Illustrationen.

Wegen dieser Nützlichkeit, wollte ich um die Freigabe der Bibliothek von unDraw Reagieren-Komponenten als open-source-npm-Paket bringen die Schönheit der unDraw auf die größte JavaScript-Publikum auf einfache Art und Weise:

Rahmen
Nov. 2016
Okt. 2017
Veränderung in %
Reagieren 2,564,601 7,040,410 174.5%
Eckige 1,289,953 2,168,899 68.1%
Rückgrat 663,610 837,372 31.6%
Angular.js 616,135 1,081,796 75.6%
Vue 6,231 874,424 13,933.%

Quelle: JavaScript-Frameworks, indem Sie die Zahlen

John Hannah, wer verfasste die die JavaScript-Frameworks durch die Zahlen Bericht:

Reagieren absolut dominiert. Es ist bei weitem die am meisten heruntergeladene nach diesen zahlen…

Eine Menge inspiration, um dieses Paket zusammen kam von Miuki Miu Projekt Reagieren Kawaii, wo Sie weitgehend die gleiche Sache, und ein bisschen mehr:

Ihr Artikel beschreibt das Gesamtkonzept der SVGs wie Reagieren die Komponenten, und hier werde ich mehr details in meinem eigenen Prozess, einschließlich der Zusammenstellung Styleguideist Dokumentation. Hier ist alles, die abgedeckt werden:

  1. Wie konvertieren von SVG-Grafiken in anpassbaren Komponenten Reagieren
  2. Wie zu verwenden Styleguideist produzieren einfache, interaktive Dokumentation
  3. So lösen Sie ein npm-Paket (da es mein erstes mal war, dies zu tun)

1. SVG-Illustrationen wie Reagieren Komponenten

Beim Besuch unDraw, ist es derzeit möglich, passen Sie eine primäre Farbe der einzelnen SVG-Darstellung direkt von der Webseite:

Das SVG-download die Sie bekommen, wenn Sie greifen das Bild ist ziemlich mühsam anpassen, weiter, als es viele Farbwerte zu ändern. Wenn das SVG konvertiert Reagieren Komponente wird es aber wirklich leicht! Vergleichen Sie die beiden:

unDraw designer SVG vs. Reagieren Komponente

Im wesentlichen, das SVG in ein Reagieren Komponente, die sehr einfach zu Schnittstelle mit. Sie geben Sie nur die Eigenschaften der Komponenten (z.B. skinColor/Haarfarbe/primaryColor), die versprengt in das SVG.

Sie können dies tun, in nur drei Schritten:

Konvertieren Sie SVG zu JSX

Es gibt einige tolle tools zum konvertieren von SVGs in der JSX-code, verwendet in einem React-Komponente die render () – Methode. Die erste, die ich verwendet wurde, war die erste, die ich stieß: “SVG”, um JSX—es war auch das erste Google-suchergebnis 😉. Als es auf dem zinn sagt, jeder JSX-code erzeugt aus beliebigen SVG-Sie in einfügen:

SVG zu JSX-Konverter von Balaj Marius

Sobald Sie haben Ihre JSX, fügen Sie es in Ihr Reagieren Komponente etwa so:

importieren Reagieren von ‘reagieren’;
import PropTypes von prop-Typen’;
const UndrawDesigner = props => (
<svg id=’780c6f38–12e9–4526–8343–95ef18389740′ Daten-name=’Layer 1′ xmlns=’http://www.w3.org/2000/svg’>
// alle Ihre svg-code
</svg>
);
export Standard-UndrawDesigner;

Das ist es! Jetzt können Sie verwenden Sie diese Komponente, indem Sie diese in Ihren code:

<UndrawDesigner/>

Recht jetzt, Sie stecken mit den Standard-Farben von Ihrer SVG. Lass die Farben einfach zu ändern:

Machen Sie es individuell Mit Requisiten

Wir können die Vorteile, die Reagieren, um die Darstellung anpassbar durch hinzufügen von *Requisiten* als Platzhalter, verwendet werden, um füllen Sie die *Farb-Attribute* der SVG/JSX in der Komponente:

<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>

Um sicherzustellen, dass Sie ersetzen die richtigen fill-Attribute, können Sie öffnen Sie die SVG in Ihre browser, und identifizieren Sie die Farben mithilfe der browser-inspector-tools:

Sie können sehen, die Farbe hier ist rgb(226,189,149) . Konvertieren, auf ein hex-code. Es gibt viele Möglichkeiten, dies zu tun, ist man auf der Suche “colorpicker” in Google :

Da eine einzelne Farbe ist oft in vielen Orten in eine SVG-Grafik (z.B. linke hand, Rechte hand, das Gesicht ist das gleiche), gibt es viele Orte, eine Farbe ausgetauscht werden muss. Tun Sie es schnell, schnappen Sie sich den HEX-code, und führen Sie eine suchen-und-ersetzen in der Komponente, ersetzt das Attribut “color” mit Ihrem requisite einen Namen, z.B. {props.skinColor} .

Tun Sie dies mit so viele Farben/Elemente der SVG, wie Sie möchten, um anpassbare, sicherzustellen, dass Ihre Requisiten werden so bezeichnet, dass Sie einfach für andere Menschen zu verstehen und zu verwenden.

Hinzufügen PropType-Definitionen und Standard-Farben

Sobald Sie fertig hinzufügen Ihre Requisiten, es ist gute Praxis, definieren Sie als propTypes. Dies wird auch helfen, wenn wir geil Dokumentation für unsere Komponenten. Fügen Sie Sie so (stellen Sie sicher, Sie haben prop-Typen installiert in Ihrem Projekt):

UndrawDesigner.propTypes = {
/**
* Hex-Farbe
*/
skinColor: PropTypes.string,
/**
* Hex-Farbe
*/
Haarfarbe: PropTypes.string,
/**
* Hex-Farbe
*/
primaryColor: PropTypes.string,
};

Beenden Sie Ihre Komponenten durch die Definition einige Standard-Farben, direkt vor der Anweisung export. Dies gewährleistet eine fallback-Farbe wird verwendet, wenn keine Requisiten übergeben werden, um die Komponente:

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

Nachdem Sie dies getan haben, dass Ihre Komponente wird bereit sein, zu akzeptieren-Werte für die einzelnen Attribute definiert. Zum Beispiel, in UndrawDesigner, wir machen eine kleine graue Menschen, indem Sie verschiedene Arten von Grau für Haut und Haar. Schön und einfach:

Es ist viel einfacher, wirklich. Wenn Sie möchten, gehen Sie über Farben ändern, Lesen Miuki Miu die Artikel, wo Sie geschickt fügt kleinere gemeinsame Komponenten, die verwendet werden, wie Gesichts-Ausdrücken in größeren Komponenten:

2. Was den Stil-Guide

Zu machen, die Reagieren Abbildungen mehr nützlich für alle, es ist möglich, erstellen Sie ein Leben-Stil-guide der Komponenten mit Reagieren Styleguidist. Es ist nicht viel zusätzliche Arbeit, entweder.

Weil, wie Stylguidist arbeitet mit Reagieren, es ist wirklich einfach zu erstellen-Dokumentation aus den Komponenten, die wir haben. Styleguidist erfordert zwei wichtigsten Dinge, die Generierung von Dokumentation aus unserer Komponenten:

  1. Klare Definitionen PropType
  2. Komponenten-Beispiele

Wir haben schon aufgepasst, das erste im vorherigen Abschnitt. Die Kommentare über jedes PropType definition ist auch wichtig, denn es wird am Ende angezeigt-Dokumentation:

Hinzufügen Komponente Beispiele ist auch einfach—fügen Sie eine Readme-Datei.md zu dem Ordner, der die Komponente mit einem Beispiel, wie es verwendet werden würde. Der Inhalt kann wie folgt Aussehen:

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

Sie können herausfinden, mehr in die Styleguidist Dokumentation.

Sobald Sie haben diese place, installieren und ausführen Styleguidist erstellen der Dokumentation wie magic. Folgen Sie den Anweisungen hier, um zu installieren und führen Sie es.

3. Die Freigabe der npm-Paket

In dieser Phase hatte ich einen Ordner mit Komponenten Reagieren mit unDraw Illustrationen, aber es ist nutzlos, die jedes andere Projekt. Hier sind die Schritte, die ich nahm, um Sie in eine npm-Modul:

  1. Erstellen Sie eine Marke neues Reagieren-Projekt mit ‘s erstellen-reagieren-app
  2. Kopieren über das react-Komponenten, die Sie möchten, lassen Sie das npm-Modul in src/node_modules/Komponenten Ihrer creat-reagieren-app-Projekt
  3. Befolgen Sie diese Schritte durch Pavel Lokhmakov

Schließlich, veröffentlichen Sie Ihr Modul, erstellen Sie eine npm-Konto und befolgen Sie diese zwei kurzen videos des npm-Dokumentation:

  1. Wie zu erstellen Node.js Module
  2. Wie zu veröffentlichen und zu aktualisieren ein Paket

Das ist es! Es gibt über 100 unDraw Illustrationen von Katerina Limpitsouni auf unDraw. Im moment, ich habe nur eine Handvoll von denen, die unDraw npm-Paket, aber fügen mehr jede Woche.

Überprüfen Sie auf der GitHub-repository hier. Ich werde auch die Freigabe der code für die LittleLingua bald, die Webseite, dass macht sich diese unDraw npm-Paket. Es ist gebaut mit unDraw Produktion-bereit, MIT lizenzierten Thema, genannt evie, die habe ich auch umgebaut Reagieren-Komponenten.

Erfahren Sie mehr über die Umwandlung von SVG-Grafiken in Komponenten, check-out Elizabet Oliveira ‘ s talk about Ihrer Seite, Projekt, Reagieren, Kawaii, das war auch nominiert als “Fun Side Project of the Year” auf das Reagieren, Amsterdam Open Source Awards: