כיצד להשתמש בסמלי SVG בתגובה עם סמלי תגובה וגופן מדהים

סמלים הם דרך לתקשר חזותית עם מושגים ומשמעות ללא שימוש במילים. זה יכול להיות עבור סיווג, פעולה או אפילו אזהרה.

כיצד נוכל להוסיף אייקונים באמצעות SVG לאפליקציות React שלנו כדי לשפר את התקשורת החזותית שלנו?

• מה זה SVG?
• מה הופך את SVG למעולה באינטרנט?
• חלק 0: יצירת אפליקציית תגובה
• חלק 1: הוספת סמלי SVG עם סמלי תגובה
• חלק 2: הוספה ידנית של קבצי SVG לרכיב React

מה זה SVG?

SVG מייצג Scalable Vector Graphics. זהו פורמט קובץ המבוסס על שפת סימון הדומה ל- XML ​​המאפשרת למפתחים ומעצבים ליצור תמונות מבוססות וקטור באמצעות הגדרות נתיב.

מה הופך את SVG למעולה באינטרנט?

SVG נולד באינטרנט. זהו תקן פתוח שנוצר על ידי W3C כדי לספק דרך טובה יותר להוסיף תמונות לרשת. אם אתה פותח קובץ SVG במחשב שלך, אתה עלול להיות מופתע לגלות שהכל קוד!

זה משחק חלק בגודל הקובץ הקטן. בדרך כלל בעת שימוש ב- SVG, אתה יכול לנצל את גודלו הקטן יותר בהשוואה לקבצי תמונה גדולים יותר שעשויים להידרש כדי לספק את אותה רזולוציה גבוהה.

בנוסף, מכיוון שאנו מגדירים את SVG כנתיבים, הם יכולים להתמקד בגודל גדול או קטן ככל שנרצה. זה הופך אותם לגמישים במיוחד לשימוש באינטרנט, במיוחד כאשר גורמים לחוויות להגיב.

מה אנחנו הולכים ליצור?

ראשית נעבור באמצעות חבילה בשם react-icons שתאפשר לנו לייבא בקלות אייקונים ממערכות אייקונים פופולריות כמו Font Awesome היישר לאפליקציה שלנו.

אנו נבדוק גם כיצד אנו יכולים להוסיף קבצי SVG באופן ידני היישר לאפליקציה שלנו על ידי העתקת הקוד של קובץ SVG ישירות לרכיב חדש.

חלק 0: יצירת אפליקציית תגובה

להדרכה זו, אתה יכול להשתמש בכל מסגרת תגובה שתרצה, בין אם זו יצירת אפליקציית תגובה או Next.js. אתה יכול אפילו להשתמש בפרויקט קיים.

מכיוון שאיננו זקוקים לשום דבר מיוחד כדי להוסיף את הסמלים שלנו, אני הולך להשתמש באפליקציית create-react.

כדי להתחיל בעבודה 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 

לאחר השלמתו, עלינו להיות מוכנים להשתמש בו בפרויקט שלנו.

בחירת סמלים לפרויקט

אחד הדברים המגניבים באייקוני תגובה הוא הספרייה הנרחבת שהם מעמידים לרשות החבילה היחידה.

לא רק שיש לנו פונט Awesome זמין באופן מיידי, יש לנו את האוקטיקונים של GitHub, הרואיקונים, אייקונים לעיצוב חומרים ועוד המון.

בעת בחירת סמלים, יש לך די יכולת להשתמש בכל סמל שתרצה בכל עת. עם זאת, אני ממליץ לנסות לשמור על מראה ותחושה עקביים עם הסמלים שלך.

אם אתה משתמש בעיקר ב- Font Awesome עבור האתר שלך, זה עשוי להיראות קצת מוזר ולא עקבי אם היית מתחיל להוסיף סמלי צבע שטוחים לתערובת. בסופו של דבר אתה רוצה לספק חוויה שאנשים יוכלו לזהות בקלות את הדפוסים שאתה יוצר.

באמצעות סמלי תגובה בפרויקט שלך

לאחר שמצאת את הסמלים שבהם ברצונך להשתמש, כעת נוכל להוסיף אותם לפרויקט שלנו.

האתר של react-icons מקל עלינו לחפש את שם הסמל בו אנו רוצים לייבא לפרויקט שלנו.

אם היינו רוצים להשתמש בסמל הטילים Font Awesome, אנו יכולים לנווט ל- Font Awesome בסרגל הצד, לחפש בדף "רקטה" (CMD + F או CTRL + F), ואז ללחוץ על הסמל אשר יעתיק את שמו אל הלוח.

נוכל גם לחפש "רקטה" בטופס החיפוש בפינה הימנית העליונה של הדף, מה שמראה לנו את התוצאה "רקטה" בכל קבוצות הסמלים.

בתוך הפרויקט שלנו, אנו יכולים כעת לייבא את הסמל הזה. בדומה להוראות בחלק העליון של דף סמלי התגובה, אנו רוצים לייבא את הסמל הספציפי הזה מתוך react-icons/fa, המתייחס למודול Font Awesome של סמלי תגובה.

הוסף את הדברים הבאים לראש הקובץ שאליו ברצונך לייבא את הסמל. אם אתה משתמש בפרויקט חדש ליצור-תגובה-יישום, תוכל להוסיף אותו לראש הדף 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 On Twitter
• ? Subscribe To My Youtube
• ✉️ Sign Up For My Newsletter
• ? Sponsor Me