Использование SVG иконок в React

Оптимально для использования SVG иконок в React создать новый компонент.

Например такая структура:

src
  components
    Icons
      Icons.js
      icons.svg
      index.js
    App.js

Здесь файл Icons.js

import React from 'react';
import IconsSVG from './icons.svg';

function Icons({name, color, size, className}) {

  return(
    <svg className={`icon icon-${name} ${className}`} fill={color} stroke={color} width={size} height={size}>>
      <use xlinkHref={`${IconsSVG}#icon-${name}`} />
    </svg>
  )
}

export default Icons;

файл index.js в папке Icons

import Icons from './Icons';

export default Icons;

Файл icons.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
  <symbol id="icon-document" viewBox="0 0 512 512">
    <path d="M428,224H288a48,48,0,0,1-48-48V36a4,4,0,0,0-4-4H144A64,64,0,0,0,80,96V416a64,64,0,0,0,64,64H368a64,64,0,0,0,64-64V228A4,4,0,0,0,428,224Z"/><path d="M419.22,188.59,275.41,44.78A2,2,0,0,0,272,46.19V176a16,16,0,0,0,16,16H417.81A2,2,0,0,0,419.22,188.59Z"/>
  </symbol>
  <symbol id="icon-documents" viewBox="0 0 512 512">
    <path d="M298.39,248a4,4,0,0,0,2.86-6.8l-78.4-79.72a4,4,0,0,0-6.85,2.81V236a12,12,0,0,0,12,12Z"/><path d="M197,267A43.67,43.67,0,0,1,184,236V144H112a64.19,64.19,0,0,0-64,64V432a64,64,0,0,0,64,64H256a64,64,0,0,0,64-64V280H228A43.61,43.61,0,0,1,197,267Z"/><path d="M372,120h70.39a4,4,0,0,0,2.86-6.8l-78.4-79.72A4,4,0,0,0,360,36.29V108A12,12,0,0,0,372,120Z"/><path d="M372,152a44.34,44.34,0,0,1-44-44V16H220a60.07,60.07,0,0,0-60,60v36h42.12A40.81,40.81,0,0,1,231,124.14l109.16,111a41.11,41.11,0,0,1,11.83,29V400h53.05c32.51,0,58.95-26.92,58.95-60V152Z"/>
  </symbol>
  <symbol id="icon-documents-outline" viewBox="0 0 512 512">
    <path d="M336,264.13V436c0,24.3-19.05,44-42.95,44H107C83.05,480,64,460.3,64,436V172a44.26,44.26,0,0,1,44-44h94.12a24.55,24.55,0,0,1,17.49,7.36l109.15,111A25.4,25.4,0,0,1,336,264.13Z" style="fill:none;stroke-linejoin:round;stroke-width:32px"/><path d="M200,128V236a28.34,28.34,0,0,0,28,28H336" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M176,128V76a44.26,44.26,0,0,1,44-44h94a24.83,24.83,0,0,1,17.61,7.36l109.15,111A25.09,25.09,0,0,1,448,168V340c0,24.3-19.05,44-42.95,44H344" style="fill:none;stroke-linejoin:round;stroke-width:32px"/><path d="M312,32V140a28.34,28.34,0,0,0,28,28H448" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/>  
  </symbol>
</svg>

т.е. объединяем все svg иконки в один файл

Использование компонента, например так:

import React from 'react';

import Icons from './Icons';

function App() {

  return (
     <div>
       <Icons 
         name='documents-outline'
         color='#fff'
         size='32'
         className='button-left-panel'
       />
     </div>
  );
}

export default App;

Хорошие иконки https://ionicons.com

Генератор спрайтов из SVG картинок

Попробуйте мой сервис для генерации SVG картинок: https://svg-sprite.polyakovdmitriy.ru