Как коректно подключить шрифты к react приложению?

Переношу верстку на react. Возникли проблемы со шрифтами. Есть файл style.css, который был сформирован gulp еще при верстке. В нем есть шрифты:

@font-face {
  font-family: "icon-font";
  font-display: swap;
  src: url("../fonts/icon-font.woff") format("woff"), url("../fonts/icon-font.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "BadScript";
  font-display: swap;
  src: url("../fonts/BadScript-Regular.woff") format("woff"), url("../fonts/BadScript-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Exo2";
  font-display: swap;
  src: url("../fonts/Exo2-BoldItalic.woff") format("woff"), url("../fonts/Exo2-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
}
...

.icon-play:before {
  content: "\e904";
}
 
[class^="icon-"]::before,
[class*=" icon-"]::before {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icon-font' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Это часть кода для App.scss:

.item {
    &__link{
  
        &::before{
            font-size: 36px;
            opacity: 0;
            content: "";
            color: #ff0606;
            z-index: 2;
            position: absolute;
            left: 50%;
            top: 50%;
        }
           &:hover{
            color: inherit;
            transform: scale(1.1);
                &::before{
                opacity: 1;
                }
           }
    }
}

jsx пока такой:

import "./action.scss";
import "../../../../scss/icon-font.scss";
function Action({ title, img, id }) {
    return (
        <a className="item__link icon-play" href="#" key={id}>
            <img className="list__img" src={img} alt={title + " img"} />{title}
        </a>
    )
}

export default Action

Если перенести шрифты в App.scss, то они не подключаются. К App.js файлы стилей подключаю так:

import "./scss/App.scss";
//import "./scss/style.css";

При этом если импортировать style.css в app.js иконочный шрифт видно. Почему так происходит? Вот скриншот с подключенным App.scss

А вот если к App.js добавить style.css