Как да използвам SVG икони в React с React икони и страхотни шрифтове

Иконите са начин за визуална комуникация на понятия и значение без използване на думи. Това може да е за категоризация, действие или дори предупреждение.

Как можем да добавим икони с помощта на SVG към нашите React приложения, за да подобрим визуалната си комуникация?

  • Какво е SVG?
  • Какво прави SVG чудесен за мрежата?
  • Част 0: Създаване на приложение React
  • Част 1: Добавяне на SVG икони с реакционни икони
  • Част 2: Ръчно добавяне на SVG файлове към React компонент

Какво е SVG?

SVG означава Scalable Vector Graphics. Това е файлов формат, базиран на език за маркиране, подобен на XML, който позволява на разработчиците и дизайнерите да създават векторни изображения, използвайки дефиниции на пътеки.

Какво прави SVG чудесен за мрежата?

SVG е роден за мрежата. Това е отворен стандарт, създаден от W3C, за да осигури по-добър начин за добавяне на изображения в мрежата. Ако отворите SVG файл на компютъра си, може да се изненадате да откриете, че всичко е код!

Това играе роля в малкия размер на файла. Обикновено, когато използвате SVG, можете да се възползвате от по-малкия му размер в сравнение с по-големите файлове с изображения, които може да са необходими, за да доставят същата висока разделителна способност.

Освен това, тъй като дефинираме SVG като пътеки, те могат да се мащабират толкова големи или малки, колкото искаме. Това ги прави изключително гъвкави за използване в мрежата, особено когато реагират на преживяванията.

Какво ще създадем?

Първо ще преминем през използването на пакет, наречен реакция-икони, който ще ни позволи лесно да импортираме икони от популярни набори от икони като Font Awesome направо в нашето приложение.

Също така ще разгледаме как можем ръчно да добавяме SVG файлове направо в нашето приложение, като копираме кода на SVG файл направо в нов компонент.

Част 0: Създаване на приложение React

За това ръководство можете да използвате която и да е рамка на React, която искате, независимо дали това е Create React App или Next.js. Можете дори да използвате съществуващ проект.

Тъй като не се нуждаем от нищо специално, за да добавим нашите икони, ще използвам create-response-app.

За да започнете с create-response-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 

След като приключи, трябва да сме готови да го използваме в нашия проект.

Избор на икони за проект

Едно от страхотните неща за реакционните икони е обширната библиотека, която те предлагат в рамките на единния пакет.

Не само, че имаме Font Awesome веднага на разположение, имаме и Octicons, Heroicons, GitHub's Icons и цял куп други.

Когато избирате икони, имате почти възможността да използвате всяка икона, която искате по всяко време. Въпреки това, бих препоръчал да се опитате да запазите последователен вид и усещане с вашите икони.

Ако използвате предимно Font Awesome за уебсайта си, може да изглежда малко странно и непоследователно, ако започнете да добавяте плоски икони към микса. В крайна сметка искате да предоставите опит, който хората ще могат лесно да идентифицират моделите, които създавате.

Използване на икони за реакция във вашия проект

След като намерите иконите, които искате да използвате, вече можем да ги добавим към нашия проект.

Уебсайтът на response-icons ни улеснява да търсим името на иконата, която искаме да използваме за импортиране в нашия проект.

Ако искахме да използваме иконата за ракета Font Awesome, можем да отидем до Font Awesome в страничната лента, да потърсим страницата за „ракета“ (CMD + F или CTRL + F) и след това да щракнем върху иконата, която ще копира името й във вашия клипборд.

Можем също да търсим „ракета“ във формата за търсене в горния ляв ъгъл на страницата, която ни показва резултата „ракета“ във всички набори от икони.

Вътре в нашия проект вече можем да импортираме тази икона. Подобно на инструкциите в горната част на страницата за реакция на икони, ние искаме да импортираме тази конкретна икона от react-icons/fa, която се отнася до модула Font Awesome на реакции-икони.

Добавете следното в горната част на файла, в който искате да импортирате иконата. Ако използвате нов проект create-response-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!

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