Як використовувати піктограми SVG у React із React Icons та Font Awesome

Ікони - це спосіб візуального спілкування понять і значення без використання слів. Це може бути для категоризації, дії чи навіть попередження.

Як ми можемо додавати піктограми за допомогою SVG до наших програм React для покращення нашого візуального спілкування?

  • Що таке SVG?
  • Що робить SVG чудовим для Інтернету?
  • Частина 0: Створення програми React
  • Частина 1: Додавання піктограм SVG за допомогою піктограм реакції
  • Частина 2: Додавання файлів SVG вручну до компоненту React

Що таке SVG?

SVG розшифровується як масштабована векторна графіка. Це формат файлу, заснований на мові розмітки, подібній до 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 для свого веб-сайту, це може виглядати трохи дивним і непослідовним, якщо ви почнете додавати піктограми з плоским кольором до суміші. Зрештою, ви хочете надати досвід, що люди зможуть легко визначити шаблони, які ви створюєте.

Використання реакційних значків у вашому проекті

Після того, як ви знайдете піктограми, які хочете використовувати, тепер ми можемо додати їх до нашого проекту.

Веб-сайт react-icons полегшує нам пошук назви піктограми, яку ми хочемо використовувати для імпорту до нашого проекту.

Якщо ми хотіли скористатися піктограмою ракети Font Awesome, ми можемо перейти до Font Awesome на бічній панелі, шукати на сторінці “ракета” (CMD + F або CTRL + F), а потім клацнути піктограму, яка скопіює її назву у ваш буфер обміну.

Ми також могли шукати "ракета" у формі пошуку у верхньому лівому куті сторінки, яка показує результат "ракета" у всіх наборах піктограм.

Усередині нашого проекту ми тепер можемо імпортувати цю піктограму. Подібно до інструкцій у верхній частині сторінки response-icons, ми хочемо імпортувати цю конкретну піктограму з 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