Использование SVG sprite и самих значков в приложении React

Question

Я немного застрял в том, как использовать элементы <svg> и <use> в компоненте React, вот что я пытаюсь сделать ..

 
import i_bookmark from '../assets/sprite.svg#icon-bookmark'
import i_chat from '../assets/svg/chat.svg'
 
 
const SVG_TEST = () => {
  return (
    <div className="container">
      <svg>
        <use xlinkHref={i_bookmark}></use>
      </svg>
      
      <svg>
        <use xlinkHref={i_chat}></use>
      </svg>
    </div>
  )
}

export default SVG_TEST

Оба способа на самом деле не работают со мной, вот структура моих папок

...
scr 
 |
 +- Components
 |   |
 |   \ -- myComp.js
 +- assets
    |
    +-- SVG
    |   |
    |   \-- chat.svg
    |   \-- bookmark.svg
    |
    \ -- sprite.svg

Итак, как мне использовать sprite.svg, если у меня в папке SVG много значков SVG?