Verwendung von SVG-Symbolen bei der Reaktion mit Reaktionssymbolen und Font Awesome

Symbole sind eine Möglichkeit, Konzepte und Bedeutungen ohne Verwendung von Wörtern visuell zu kommunizieren. Dies kann eine Kategorisierung, eine Aktion oder sogar eine Warnung sein.

Wie können wir unseren React-Apps mithilfe von SVG Symbole hinzufügen, um unsere visuelle Kommunikation zu verbessern?

  • Was ist SVG?
  • Was macht SVG großartig für das Web?
  • Teil 0: Erstellen einer React-App
  • Teil 1: Hinzufügen von SVG-Symbolen mit Reaktionssymbolen
  • Teil 2: Manuelles Hinzufügen von SVG-Dateien zu einer React-Komponente

Was ist SVG?

SVG steht für Scalable Vector Graphics. Es handelt sich um ein Dateiformat, das auf einer XML-ähnlichen Markup-Sprache basiert und es Entwicklern und Designern ermöglicht, vektorbasierte Bilder mithilfe von Pfaddefinitionen zu erstellen.

Was macht SVG großartig für das Web?

SVG wurde für das Web geboren. Es ist ein offener Standard, der von W3C erstellt wurde, um eine bessere Möglichkeit zum Hinzufügen von Bildern zum Web zu bieten. Wenn Sie eine SVG-Datei auf Ihrem Computer öffnen, werden Sie überrascht sein, dass alles Code ist!

Dies spielt eine Rolle bei der kleinen Dateigröße. Wenn Sie SVG verwenden, können Sie normalerweise die geringere Größe im Vergleich zu größeren Bilddateien nutzen, die möglicherweise erforderlich sind, um dieselbe hohe Auflösung zu erzielen.

Da wir SVG als Pfade definieren, können diese außerdem so groß oder so klein skaliert werden, wie wir möchten. Dies macht sie besonders flexibel für die Webnutzung, insbesondere wenn Erfahrungen reaktionsschnell sind.

Was werden wir schaffen?

Wir werden zunächst ein Paket namens "React-Icons" verwenden, mit dem wir Icons aus beliebten Icon-Sets wie "Font Awesome" direkt in unsere App importieren können.

Wir werden uns auch ansehen, wie wir SVG-Dateien direkt in unsere App manuell hinzufügen können, indem wir den Code einer SVG-Datei direkt in eine neue Komponente kopieren.

Teil 0: Erstellen einer React-App

Für diese exemplarische Vorgehensweise können Sie jedes gewünschte React-Framework verwenden, unabhängig davon, ob es sich um die Create React App oder Next.js handelt. Sie können sogar ein vorhandenes Projekt verwenden.

Da wir zum Hinzufügen unserer Symbole nichts Besonderes benötigen, verwende ich die Create-React-App.

Um mit der Create-React-App zu beginnen, können Sie mit dem folgenden Befehl in Ihrem Terminal ein neues Projekt erstellen:

yarn create react-app [project-name] # or npx create-react-app [project-name] 

Hinweis: Ersetzen Sie ihn [project-name]durch den Namen, den Sie für Ihr Projekt verwenden möchten. Ich werde verwenden my-svg-icons.

Sobald Sie Ihre neue App oder Ihre vorhandene App haben, sollten wir bereit sein!

Teil 1: Hinzufügen von SVG-Symbolen mit Reaktionssymbolen

Hinzufügen von Reaktionssymbolen zu Ihrem Projekt

Um mit Reaktionssymbolen zu beginnen, möchten wir sie in unserem Projekt installieren.

Führen Sie in Ihrem Projekt den folgenden Befehl aus:

yarn add react-icons # or npm install react-icons --save 

Sobald es fertig ist, sollten wir bereit sein, es in unserem Projekt zu verwenden.

Symbole für ein Projekt auswählen

Eines der coolen Dinge an Reaktionssymbolen ist die umfangreiche Bibliothek, die sie in einem einzigen Paket zur Verfügung stellen.

Wir haben nicht nur Font Awesome sofort verfügbar, sondern auch GitHubs Octicons, Heroicons, Material Design Icons und vieles mehr.

Bei der Auswahl von Symbolen haben Sie so gut wie die Möglichkeit, jederzeit jedes gewünschte Symbol zu verwenden. Trotzdem würde ich empfehlen, mit Ihren Symbolen ein einheitliches Erscheinungsbild zu erzielen.

Wenn Sie Font Awesome hauptsächlich für Ihre Website verwenden, sieht es möglicherweise etwas seltsam und inkonsistent aus, wenn Sie dem Mix flache Farbsymbole hinzufügen. Sie möchten letztendlich eine Erfahrung bieten, mit der die Benutzer die von Ihnen erstellten Muster leicht identifizieren können.

Verwenden von Reaktionssymbolen in Ihrem Projekt

Sobald Sie die Symbole gefunden haben, die Sie verwenden möchten, können wir sie jetzt zu unserem Projekt hinzufügen.

Die Website von react-icons erleichtert es uns, den Namen des Symbols nachzuschlagen, das wir zum Importieren in unser Projekt verwenden möchten.

Wenn wir das Raketensymbol "Font Awesome" verwenden möchten, können wir in der Seitenleiste zu "Font Awesome" navigieren, die Seite nach "Rakete" (CMD + F oder STRG + F) durchsuchen und dann auf das Symbol klicken, das den Namen auf Ihr Symbol kopiert Zwischenablage.

Wir könnten auch im Suchformular oben links auf der Seite nach "Rakete" suchen, das uns das Ergebnis "Rakete" in allen Symbolsätzen anzeigt.

Innerhalb unseres Projekts können wir dieses Symbol jetzt importieren. Ähnlich wie in den Anweisungen oben auf der Seite "Reaktionssymbole" möchten wir dieses bestimmte Symbol aus dem importieren react-icons/fa, das sich auf das Modul "Font Awesome" mit Reaktionssymbolen bezieht.

Fügen Sie Folgendes oben in die Datei ein, in die Sie das Symbol importieren möchten. Wenn Sie ein neues Projekt zum Erstellen und Reagieren von Apps verwenden, können Sie es oben in hinzufügen src/App.js.

import { FaRocket } from 'react-icons/fa'; 

Um dies zu testen, ersetzen wir das React-Logo durch unser Symbol.

Entferne das component and instead add:

And if we reload the page, we can see our rocket!

Original text


Our rocket isn’t spinning like the React logo though, so let’s fix that.

Add the class .App-logo to the FaRocket component:

And the rocket should now be spinning!

But it’s also a little small. If we look inside of src/App.css, we’re setting the height of .App-logo to 40vmin. While that’s working, for our icon to fill the space, we need to also provide a width for it to fill.

Add the following to the .App-logo class to add a width:

width: 40vmin; 

And while it’s probably a little too big now, we’re at a more appropriate size and we have our icon!

Follow along with the commit.

Part 2: Manually adding SVG files to a React component

Sometimes you don’t want to add a new library just to get an icon. Sometimes it’s a custom icon that’s not available in a public library.

Luckily with React, we can create a new SVG component pretty easily that allows us to add our custom SVG icons anywhere we want.

First, let’s find an icon.

While all Heroicons are available inside react-icons, let’s use it as an example since it’s easy to find and copy some SVG code.

Go to heroicons.com and search for an icon that you’d like to use for this example. I’m going to use “globe”.

After finding the icon you want, hover over that icon, where you’ll see options to copy that icon as SVG or JSX, and copy it as JSX.

With that icon copied, create a new file under src called Globe.js.

Inside of that file, we’re going to create a new component called Globe and paste in our SVG within that component.

import React from 'react'; const Globe = () => { return (    ) } export default Globe; 

Note: when copying normal SVG to a React component, it might not work "as is". Sometimes SVG files include CSS classes or element attributes that aren't valid with JSX.

If you run into errors, try fixing the attributes and looking at the web console to see the warnings and errors React throws. Because we copied as JSX, we were able to make it work right away.

Now, go back to src/App.js and import our new component:

import Globe from './Globe'; 

Then we can replace our rocket icon with our new component:

And if we open up our browser, we can see our globe!

Though, it’s a little big.

We want to apply our .App-logo class to our Globe component, so we need to update that component to take a className prop.

Back at src/Globe.js, add a className prop argument:

const Globe = ({ className }) => { 

Then, add a new prop with that className to the component:

Now, we can update our Globe component in src/App.js to include that class:

And if we reload the page, we can see our logo is back at the right size and it’s spinning again!

Follow along with the commit.

Why don’t we include it as an img file?

While we can include it as an image file just like React does in the default create-react-app code, we get a few benefits from adding our SVG files “inline”.

For one, when adding SVG inline, we can access the different paths with CSS properties. This gives us more flexibility for customizing it dynamically.

It’s also going to provide fewer HTTP requests. The browser will know how to load that SVG, so we don’t need to bother the browser to request that file to include in the page.

That said, it’s still a valid option for adding an SVG file to the page.

Follow me for more Javascript, UX, and other interesting things!

  • ? Follow Me On Twitter
  • ? Subscribe To My Youtube
  • ✉️ Sign Up For My Newsletter
  • ? Sponsor Me