Wie man eine Komponentensammlung aus SVG-Illustrationen erstellt

unDraw ist eine Sammlung von MIT-lizenzierten Illustrationen für jedes Projekt, das Sie sich vorstellen und erstellen können. Es ist eine ständig aktualisierte Sammlung schöner SVG-Bilder, die Sie völlig kostenlos und ohne Namensnennung verwenden können.

Obwohl unDraw noch relativ neu ist, wird es aufgrund seiner Open-Source-Natur bereits von einer Reihe von Produkten verwendet. Hier ist es auf der neu gestarteten Design-Mentoring-Website namens MentorOla, neben einer Sprachseite, an der ich selbst gearbeitet habe, namens Little Lingua

Während der Erstellung der Little Lingua-Website mit React stellte ich fest, dass die Konvertierung von SVGs in React-Komponenten sie viel besser handhabbar und als Illustrationen sogar noch anpassbarer machte.

Aufgrund dieser Nützlichkeit wollte ich eine Sammlung von unDraw-React-Komponenten als Open-Source- npm-Paket veröffentlichen, um die Schönheit von unDraw einem möglichst großen JavaScript-Publikum auf einfache Weise zugänglich zu machen

Quelle: JavaScript Frameworks by the Numbers

John Hannah, Autor des Berichts JavaScript Frameworks by the Numbers

React dominiert absolut. Es ist mit Abstand das meist heruntergeladene laut diesen Zahlen...

Viel Inspiration für die Zusammenstellung dieses Pakets kam von Miuki Mius Projekt React Kawaii, wo sie weitgehend dasselbe tat und noch ein bisschen mehr

Ihr Artikel umreißt das Gesamtkonzept von SVGs als React-Komponenten, und hier werde ich auf mehr Details meines eigenen Prozesses eingehen, einschließlich der Zusammenstellung von Styleguideist-Dokumentation. Hier ist alles, was behandelt wird

1. Wie man SVG-Illustrationen in anpassbare React-Komponenten umwandelt
2. Wie man Styleguideist verwendet, um einfache, interaktive Dokumentation zu erstellen
3. Wie man ein npm-Paket veröffentlicht (da es meine erste Erfahrung damit war)

1. SVG-Illustrationen als React-Komponenten

Wenn Sie unDraw besuchen, ist es derzeit möglich, eine primäre Farbe jeder SVG-Illustration direkt von der Website aus anzupassen

Die SVG-Datei, die Sie beim Herunterladen des Bildes erhalten, ist für weitere Anpassungen ziemlich mühsam, da viele Farbwerte geändert werden müssen. Wenn diese SVG jedoch in eine React-Komponente konvertiert wird, wird es wirklich einfach! Vergleichen Sie die beiden

Im Wesentlichen ist die SVG in einer React-Komponente enthalten, mit der sehr einfach zu interagieren ist. Sie übergeben einfach Eigenschaften an die Komponente (z. B. skinColor/hairColor/primaryColor), die diese dann in die SVG einstreuen.

Das können Sie in nur drei Schritten tun

Konvertieren Sie die SVG in JSX

Es gibt einige fantastische Werkzeuge, um SVGs in den JSX-Code umzuwandeln, der in der render()-Methode einer React-Komponente verwendet wird. Das erste, das ich benutzt habe, war das erste, auf das ich gestoßen bin: SVG to JSX – es war auch das erste Google-Suchergebnis 😉. Wie der Name schon sagt, wird jeder JSX-Code aus jeder SVG generiert, die Sie einfügen

Sobald Sie Ihr JSX haben, fügen Sie es wie folgt in Ihre React-Komponente ein

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;

Das war's! Jetzt können Sie dies als Komponente verwenden, indem Sie sie in Ihren Code einfügen

<UndrawDesigner/>

Im Moment sind Sie auf die Standardfarben Ihrer SVG beschränkt. Machen wir diese Farben leicht veränderbar

Machen Sie es mit Props anpassbar

Wir können die Vorteile von React nutzen, um die Illustration anpassbar zu machen, indem wir *Props* als Platzhalter hinzufügen, die zum Ausfüllen der *Farbattribute* der SVG/JSX in Ihrer Komponente verwendet werden

<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 die richtigen Farbattribute ersetzen, können Sie die SVG in Ihrem Browser öffnen und Farben mit den Inspektionswerkzeugen Ihres Browsers identifizieren

Sie können sehen, dass die Farbe hier rgb(226,189,149) ist. Konvertieren Sie sie in einen Hex-Code. Es gibt viele Möglichkeiten, dies zu tun, eine ist die Suche nach „Farbwähler“ bei Google

Da eine einzelne Farbe oft an vielen Stellen in einer SVG-Illustration verwendet wird (z. B. linke Hand, rechte Hand, Gesicht sind gleich), gibt es viele Stellen, an denen eine Farbe ersetzt werden muss. Um es schnell zu erledigen, nehmen Sie den HEX-Code und führen Sie eine *Suchen-und-Ersetzen-Aktion* in Ihrer Komponente durch, wobei Sie das Farb-Attribut durch Ihren Prop-Namen ersetzen, z. B. {props.skinColor}.

Tun Sie dies mit so vielen Farben/Elementen Ihrer SVG, wie Sie anpassbar machen möchten, und stellen Sie sicher, dass Ihre Props so benannt sind, dass andere Personen sie leicht verstehen und verwenden können.

PropType-Definitionen und Standardfarben hinzufügen

Sobald Sie Ihre Props hinzugefügt haben, ist es eine gute Praxis, sie als propTypes zu definieren. Dies wird auch helfen, wenn wir tolle Dokumentationen für unsere Komponenten erstellen. Fügen Sie sie wie folgt hinzu (stellen Sie sicher, dass Sie prop-types in Ihrem Projekt installiert haben)

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

Schließen Sie Ihre Komponente ab, indem Sie einige Standardfarben definieren, direkt vor der Exportanweisung. Dies stellt sicher, dass eine Fallback-Farbe verwendet wird, wenn keine Props an die Komponente übergeben werden

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

Nachdem Sie dies getan haben, ist Ihre Komponente bereit, Werte für jedes der definierten Attribute anzunehmen. Zum Beispiel können wir in UndrawDesigner einen kleinen grauen Menschen erstellen, indem wir verschiedene Grautöne für Haut und Haare übergeben. Schön und einfach

Es ist wirklich so viel einfacher. Wenn Sie über das Ändern von Farben hinausgehen möchten, lesen Sie den Artikel von Miuki Miu, wo sie geschickt kleinere common-Komponenten hinzufügt, die als Mimik über größere Komponenten hinweg verwendet werden

2. Erstellen des Style Guides

Um die React-Illustrationen für alle nützlicher zu machen, ist es möglich, mit React Styleguidist eine lebendige Style-Dokumentation der Komponenten zu erstellen. Es ist auch nicht viel zusätzliche Arbeit.

Aufgrund der Funktionsweise von Stylguidist mit React ist es sehr einfach, Dokumentationen aus den vorhandenen Komponenten zu erstellen. Styleguidist benötigt zwei Hauptkomponenten, um Dokumentationen aus unseren Komponenten zu generieren

1. Klare PropType-Definitionen
2. Komponentenbeispiele

Das erste haben wir im vorherigen Abschnitt bereits erledigt. Die Kommentare über jeder PropType-Definition sind ebenfalls wichtig, da sie in der endgültigen Dokumentation angezeigt werden

Das Hinzufügen von Komponentenbeispielen ist ebenfalls einfach: Fügen Sie eine Readme.md in den Ordner Ihrer Komponente ein, mit einem Beispiel, wie sie verwendet werden könnte. Der Inhalt könnte etwa so aussehen

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

Mehr erfahren Sie in der Styleguidist-Dokumentation.

Sobald Sie diese beiden Elemente eingerichtet haben, erstellt die Installation und Ausführung von Styleguidist die Dokumentation wie von Zauberhand. Befolgen Sie die Anweisungen hier, um es zu installieren und auszuführen.

3. Veröffentlichung des npm-Pakets

Zu diesem Zeitpunkt hatte ich einen Ordner mit React-Komponenten mit unDraw-Illustrationen, aber er ist für jedes andere Projekt nutzlos. Hier sind die Schritte, die ich unternommen habe, um sie in ein npm-Modul zu verwandeln

1. Erstellen Sie ein brandneues React-Projekt mit dem create-react-app von Facebook
2. Kopieren Sie die React-Komponenten, die Sie als npm-Modul veröffentlichen möchten, in src/node_modules/components Ihres creat-react-app-Projekts
3. Folgen Sie diesen Schritten, die von Pavel Lokhmakov umrissen wurden

Schließlich, um Ihr Modul zu veröffentlichen, erstellen Sie ein npm-Konto und folgen Sie diesen beiden kurzen Videos der npm-Dokumentation

1. Wie man Node.js-Module erstellt
2. Wie man ein Paket veröffentlicht und aktualisiert

Das ist alles! Es gibt über 100 unDraw-Illustrationen von Katerina Limpitsouni auf unDraw. Im Moment habe ich nur eine Handvoll davon zum unDraw-npm-Paket hinzugefügt, werde aber jede Woche mehr hinzufügen.

Schauen Sie sich das GitHub- Repository hier an. Ich werde auch bald den Code für LittleLingua veröffentlichen, die Website, die dieses unDraw-npm-Paket verwendet. Es wurde mit dem produktionsreifen MIT-lizenzierten Theme von unDraw erstellt, namens evie, das ich ebenfalls in React-Komponenten konvertiert habe.

Um mehr über die Umwandlung von SVG-Illustrationen in Komponenten zu erfahren, schauen Sie sich den Vortrag von Elizabet Oliveira über ihr Nebenprojekt React Kawaii an, das auch als „Fun Side Project of the Year“ bei den React Amsterdam Open Source Awards nominiert wurde