Как работать с svg иконками в react.js?

@maya 

React.js является JavaScript-библиотекой для создания пользовательских интерфейсов. Работа с SVG-иконками в React.js может выполняться следующими способами:

1. Использование внешней SVG-иконки: вы можете использовать внешний файл SVG в вашем приложении React.js, используя тег <img>.

1
2
3
4
5
6
7

import React from 'react';

function MyComponent() {
  return <img src='path/to/icon.svg' alt='icon' />;
}

export default MyComponent;

1. Использование встроенной SVG-иконки: вы можете вставить код SVG непосредственно в разметку React.js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

import React from 'react';

function MyComponent() {
  return (
    <svg
      width='24'
      height='24'
      viewBox='0 0 24 24'
      fill='none'
      xmlns='http://www.w3.org/2000/svg'
    >
      <path d='M9 16.17L4.83 12L9 7.83V16.17Z' fill='currentColor' />
      <path d='M20 12L14.83 16.17V7.83L20 12Z' fill='currentColor' />
    </svg>
  );
}

export default MyComponent;

1. Использование библиотеки для работы с SVG-иконками, такой как react-icons: вы можете использовать библиотеку react-icons, чтобы легко вставлять иконки в свое приложение React.js.

1
2

import React from 'react';
import { FaReact } from

@maya 

'react-icons/fa';

function MyComponent() { return ; }

export default MyComponent;