Az ikonok lehetővé teszik a fogalmak és jelentés vizuális kommunikációját szavak használata nélkül. Ez lehet kategorizálás, művelet vagy akár figyelmeztetés.
Hogyan adhatunk hozzá SVG használatával ikonokat a React alkalmazásunkhoz a vizuális kommunikáció javítása érdekében?
- Mi az SVG?
- Mitől nagyszerű az SVG az internet számára?
- 0. rész: React alkalmazás létrehozása
- 1. rész: SVG ikonok hozzáadása reakció ikonokkal
- 2. rész: SVG fájlok kézi hozzáadása a React összetevőhöz
Mi az SVG?
Az SVG jelentése Scalable Vector Graphics. Ez az XML-hez hasonló jelölőnyelven alapuló fájlformátum, amely lehetővé teszi a fejlesztőknek és a tervezőknek, hogy vektoralapú képeket hozzanak létre útvonal-meghatározások segítségével.
Mitől nagyszerű az SVG az internet számára?
Az SVG az internetre született. Ez egy nyílt szabvány, amelyet a W3C hozott létre, hogy jobb módot nyújtson a képek internetes hozzáadására. Ha megnyit egy SVG fájlt a számítógépén, meglepődve tapasztalhatja, hogy mindez kód!
Ez szerepet játszik a kis fájlméretben. Az SVG használatakor általában kihasználhatja a kisebb méret előnyeit a nagyobb képfájlokhoz képest, amelyekre szükség lehet ugyanolyan nagy felbontás biztosításához.
Ezenkívül, mivel az SVG-t útvonalakként definiáljuk, akkor azok méretezhetők olyan nagyok vagy kisebbek, amennyit csak szeretnénk. Ez extra rugalmassá teszi őket az internetes használat során, különösen akkor, ha az élményeket érzékenyebbé teszik.
Mit fogunk létrehozni?
Először egy reakció-ikon nevű csomag segítségével járunk végig, amely lehetővé teszi számunkra, hogy az alkalmazásunkba egyszerűen importálhassunk olyan ikonokat az olyan népszerű ikonkészletekből, mint a Font Awesome.
Megvizsgáljuk azt is, hogyan tudjuk manuálisan hozzáadni az SVG fájlokat közvetlenül az alkalmazásunkhoz azáltal, hogy egy SVG fájl kódját közvetlenül egy új komponensbe másoljuk.
0. rész: React alkalmazás létrehozása
Ehhez az áttekintéshez tetszőleges React keretrendszert használhat, legyen az Create React App vagy Next.js. Akár egy meglévő projektet is használhat.
Mivel nincs szükségünk semmi különösre az ikonjaink hozzáadásához, a create-reagál-alkalmazást fogom használni.
A create-react-app használatának megkezdéséhez létrehozhat egy új projektet a terminál következő parancsával:
yarn create react-app [project-name] # or npx create-react-app [project-name] Megjegyzés: cserélje [project-name]ki a projektjéhez használni kívánt névre. Használni fogom my-svg-icons.
Miután megvan az új vagy a meglévő alkalmazásod, készen állunk az indulásra!
1. rész: SVG ikonok hozzáadása reakció ikonokkal
Reagálási ikonok hozzáadása a projekthez
A reakció-ikonok használatának megkezdéséhez szeretnénk telepíteni a projektünkbe.
A projekt belsejében futtassa a következő parancsot:
yarn add react-icons # or npm install react-icons --save Miután elkészült, készen kell állnunk a projektünkben történő felhasználásra.
Ikonok kiválasztása a projekthez
A reakció-ikonok egyik menő eleme az a kiterjedt könyvtár, amelyet az egyetlen csomagban elérhetővé tesznek.
Nemcsak a Font Awesome azonnal elérhető, hanem a GitHub Octicons, Heroicons, Material Design Icons és még egy csomó más is.
Az ikonok kiválasztásakor nagyjából bármikor használhatja a kívánt ikont. Ennek ellenére azt javaslom, hogy próbáljon meg tartani az ikonjaival egységes megjelenést.
Ha elsősorban a Font Awesome-ot használja webhelyén, kissé furcsának és következetlennek tűnhet, ha elkezdene hozzáadni a lapos színű ikonokat a keverékhez. Végül olyan élményt szeretne nyújtani, amelyet az emberek könnyedén azonosíthatnak az Ön által létrehozott mintákból.
Reagálási ikonok használata a projektben
Miután megtalálta a használni kívánt ikonokat, most hozzáadhatjuk őket a projektünkhöz.
A reakció-ikonok weboldala megkönnyíti számunkra az ikon nevének megkeresését, amelyet a projektünkbe importálni szeretnénk.
Ha a Font Awesome rakéta ikont akartuk használni, navigálhatunk az oldalsávon a Font Awesome lehetőségre, megkereshetjük az oldalon a „rakéta” kifejezést (CMD + F vagy CTRL + F), majd kattintson az ikonra, amely másolja a nevét az Ön vágólap.
A „rakéta” kifejezésre is rákereshetünk az oldal bal felső sarkában található keresési űrlapon, amely az összes ikonkészletben megmutatja a „rakéta” eredményt.
A projektünk belsejében most importálhatjuk ezt az ikont. A reakció-ikonok oldalának tetején található utasításokhoz hasonlóan azt az adott ikont is importálni akarjuk a-ból react-icons/fa, amely a reakció-ikonok Font Awesome moduljára utal.
Adja hozzá a következőket annak a fájlnak a tetejére, amelybe az ikont importálni szeretné. Ha új create-reagál-alkalmazás projektet használ, hozzáadhatja azt a tetejéhez src/App.js.
import { FaRocket } from 'react-icons/fa'; Ennek kipróbálására cseréljük ki a React logót az ikonunkra.
Távolítsa el a
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
