How to change the initial path from the root of the project?

Question

React

Hello guys, I've run into this problem.

import HeaderLogout, {ReactComponent as Logout} from '../../../../../img/icons/sign-out.svg';

I understand that this is not correct, I build the path to svg based on the component in which I am, how to search from the root of the project? What to google? Can there be problems with such paths when the site is assembled as a whole and stretched onto a huge x....... server? I have not collected real projects yet, please help :)
If you need to show package.json or webpack.conf.... Then I will instantly!
Thanks guys for your help!

Answer 1

specify alias in webpack

resolve: {
        alias: {
            '~': path.resolve(__dirname, 'src'),
            '~i': path.resolve(__dirname, 'src/images/img/icons'),
        }
    },

In the project, connect as:
import Img from '~i/sign-out.svg';