Πώς να χρησιμοποιήσετε εικονίδια SVG στο React with React Icons και Font Awesome

Τα εικονίδια είναι ένας τρόπος επικοινωνίας οπτικών εννοιών και νοήματος χωρίς τη χρήση λέξεων. Αυτό θα μπορούσε να αφορά κατηγοριοποίηση, ενέργεια ή ακόμη και προειδοποίηση.

Πώς μπορούμε να προσθέσουμε εικονίδια χρησιμοποιώντας SVG στις εφαρμογές React για να βελτιώσουμε την οπτική επικοινωνία μας;

  • Τι είναι το SVG;
  • Τι κάνει το SVG εξαιρετικό για τον Ιστό;
  • Μέρος 0: Δημιουργία εφαρμογής React
  • Μέρος 1: Προσθήκη εικονιδίων SVG με εικονίδια αντίδρασης
  • Μέρος 2: Μη αυτόματη προσθήκη αρχείων SVG σε ένα στοιχείο React

Τι είναι το SVG;

Το SVG σημαίνει κλιμακούμενα διανυσματικά γραφικά. Είναι μια μορφή αρχείου που βασίζεται σε μια γλώσσα σήμανσης παρόμοια με την XML που επιτρέπει στους προγραμματιστές και τους σχεδιαστές να δημιουργούν εικόνες που βασίζονται σε διανυσματικά χρησιμοποιώντας ορισμούς διαδρομών.

Τι κάνει το SVG εξαιρετικό για τον Ιστό;

Το SVG γεννήθηκε για τον Ιστό. Είναι ένα ανοιχτό πρότυπο που δημιουργήθηκε από το W3C για να παρέχει έναν καλύτερο τρόπο προσθήκης εικόνων στον ιστό. Εάν ανοίξετε ένα αρχείο SVG στον υπολογιστή σας, ίσως εκπλαγείτε να διαπιστώσετε ότι είναι όλα κωδικός!

Αυτό παίζει ρόλο στο μικρό μέγεθος αρχείου. Συνήθως, όταν χρησιμοποιείτε SVG, μπορείτε να επωφεληθείτε από το μικρότερο μέγεθός του σε σύγκριση με μεγαλύτερα αρχεία εικόνας που μπορεί να απαιτούνται για την παροχή της ίδιας υψηλής ανάλυσης.

Επιπλέον, δεδομένου ότι ορίζουμε το SVG ως μονοπάτια, μπορούν να κλιμακώσουν όσο μεγάλο ή μικρότερο θέλουμε. Αυτό τους καθιστά εξαιρετικά ευέλικτους για χρήση στο Διαδίκτυο, ειδικά όταν κάνουν τις εμπειρίες ανταποκρίνονται.

Τι πρόκειται να δημιουργήσουμε;

Αρχικά θα περπατήσουμε χρησιμοποιώντας ένα πακέτο που ονομάζεται react-icons που θα μας επιτρέψει να εισάγουμε εύκολα εικονίδια από δημοφιλή σύνολα εικονιδίων όπως το Font Awesome απευθείας στην εφαρμογή μας.

Θα ρίξουμε επίσης μια ματιά στο πώς μπορούμε να προσθέσουμε χειροκίνητα αρχεία SVG στην εφαρμογή μας αντιγράφοντας τον κώδικα ενός αρχείου SVG απευθείας σε ένα νέο στοιχείο.

Μέρος 0: Δημιουργία εφαρμογής React

Για αυτήν την αναλυτική περιγραφή, μπορείτε να χρησιμοποιήσετε οποιοδήποτε πλαίσιο React που θέλετε είτε αυτό είναι το Δημιουργία εφαρμογής React είτε το Next.js. Μπορείτε ακόμη να χρησιμοποιήσετε ένα υπάρχον έργο.

Επειδή δεν χρειαζόμαστε κάτι ιδιαίτερο για να προσθέσουμε τα εικονίδια μας, θα χρησιμοποιήσω την εφαρμογή create-react-app.

Για να ξεκινήσετε με την εφαρμογή create-react-app, μπορείτε να δημιουργήσετε ένα νέο έργο χρησιμοποιώντας την ακόλουθη εντολή στο τερματικό σας:

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

Σημείωση: αντικαταστήστε [project-name]με το όνομα που θέλετε να χρησιμοποιήσετε για το έργο σας. Θα χρησιμοποιήσω my-svg-icons.

Μόλις αποκτήσετε τη νέα σας εφαρμογή ή την υπάρχουσα εφαρμογή σας, θα πρέπει να είμαστε έτοιμοι να ξεκινήσουμε!

Μέρος 1: Προσθήκη εικονιδίων SVG με εικονίδια αντίδρασης

Προσθήκη εικονιδίων αντίδρασης στο έργο σας

Για να ξεκινήσετε με τα εικονίδια αντίδρασης, θέλουμε να το εγκαταστήσουμε στο έργο μας.

Μέσα στο έργο σας, εκτελέστε την ακόλουθη εντολή:

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

Μόλις ολοκληρωθεί, θα πρέπει να είμαστε έτοιμοι να το χρησιμοποιήσουμε στο έργο μας.

Επιλογή εικονιδίων για ένα έργο

Ένα από τα εντυπωσιακά πράγματα σχετικά με τα αντιδραστικά εικονίδια είναι η εκτεταμένη βιβλιοθήκη που διαθέτουν στο ενιαίο πακέτο.

Όχι μόνο έχουμε άμεσα γραμματοσειρά, αλλά έχουμε Octicons, Heroicons, Material Design Icons και πολλά άλλα GitHub.

Όταν επιλέγετε εικονίδια, έχετε σχεδόν τη δυνατότητα να χρησιμοποιήσετε οποιοδήποτε εικονίδιο θέλετε ανά πάσα στιγμή. Ωστόσο, θα συνιστούσα να προσπαθείτε να διατηρήσετε μια συνεπή εμφάνιση και αίσθηση με τα εικονίδια σας.

Εάν χρησιμοποιείτε κυρίως το Font Awesome για τον ιστότοπό σας, μπορεί να φαίνεται λίγο παράξενο και ασυνεπές εάν αρχίσετε να προσθέτετε Flat Color Icons στο μείγμα. Τελικά θέλετε να δώσετε μια εμπειρία που οι άνθρωποι θα μπορούν να αναγνωρίζουν εύκολα τα μοτίβα που δημιουργείτε.

Χρήση εικονιδίων αντίδρασης στο έργο σας

Μόλις βρείτε τα εικονίδια που θέλετε να χρησιμοποιήσετε, μπορούμε τώρα να τα προσθέσουμε στο έργο μας.

Ο ιστότοπος react-icons μας διευκολύνει να αναζητήσουμε το όνομα του εικονιδίου που θέλουμε να χρησιμοποιήσουμε για εισαγωγή στο έργο μας.

Εάν θέλαμε να χρησιμοποιήσουμε το εικονίδιο πυραύλων Font Awesome, μπορούμε να περιηγηθούμε στο Font Awesome στην πλαϊνή γραμμή, να αναζητήσουμε τη σελίδα για "rocket" (CMD + F ή CTRL + F) και, στη συνέχεια, κάντε κλικ στο εικονίδιο που θα αντιγράψει το όνομά του στο δικό σας πρόχειρο.

Θα μπορούσαμε επίσης να αναζητήσουμε "πύραυλο" στη φόρμα αναζήτησης στο επάνω αριστερό μέρος της σελίδας, το οποίο μας δείχνει το αποτέλεσμα "πύραυλο" σε όλα τα σύνολα εικονιδίων.

Μέσα στο έργο μας, μπορούμε τώρα να εισαγάγουμε αυτό το εικονίδιο Παρόμοια με τις οδηγίες στο επάνω μέρος της σελίδας αντίδρασης εικονιδίων, θέλουμε να εισαγάγουμε αυτό το συγκεκριμένο εικονίδιο από το react-icons/fa, το οποίο αναφέρεται στην ενότητα Font Awesome των αντιδρώντων εικονιδίων.

Προσθέστε τα ακόλουθα στην κορυφή του αρχείου στο οποίο θέλετε να εισαγάγετε το εικονίδιο. Εάν χρησιμοποιείτε ένα νέο έργο create-react-app, μπορείτε να το προσθέσετε στην κορυφή του src/App.js.

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

Για να το δοκιμάσουμε, ας αντικαταστήσουμε το λογότυπο React με το εικονίδιο μας.

Αφαιρέστε το component and instead add:

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

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