A simple description on how to use svg in react

react-bootstrap-icons.md

If the app uses custom webpack configuration, then loader is needed to handle svgs in your app. Lets use SVGR webpack loader.

yarn add @svgr/webpack --dev

and then in your webpack config file add the following rule :

{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
}

and then directly import the svg as react components

import IconGearFill from 'bootstrap-icons/icons/gear-fill.svg'

for styling you can pass on style or classname prop, and they will be applied on to your svg component.

<IconGearFill className="text-success" style={{ fontSize: '1.8em' }} />