在React应用中使用SVG Sprite VS图标本身

Question

我对如何在React组件中使用<svg>和<use>元素有些困惑，这是我正在尝试做的事情。

 
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

如果我的SVG文件夹中有很多svg图标，该如何使用sprite.svg？