Как исключить webpack-лоадер на основе формы импорта ресурса?

Доброго вечера.
Есть приложение, собранное через create-react-app. Как известно, CRA предлагает способ импорта SVG в виде компонентов.
import { ReactComponent as LogoIcon } from '@/assets/logo.svg';

Обеспечивается это следующим участком кода в конфиге:
plugins: [
    [
      require.resolve('babel-plugin-named-asset-import'),
      {
        loaderMap: {
          svg: {
            ReactComponent:
              '@svgr/webpack?-svgo,+titleProp,+ref![path]',
          },
        },
      },
    ],
  ],

Однако я хочу добавить возможность хэндлить svg как символьные спрайты, оставив при этом возможность импортировать svg как компоненты. Для этого добавил svg-sprite-loader.
{
  test: /\.svg$/,
  use: [
    {
      loader: 'svg-sprite-loader',
      options: {
        symbolId: 'icon-[name]'
      }
    }
  ]
},

Собственно спрайты работают на ура, как надо, но вот импорт в виде компонента отваливается - лоадеры конфликтуют между собой.

Вопрос: можно ли как-то исключить лоадер из цепочки, если импорт происходит в каком-либо формате? То есть
import icon from 'icon.svg'; // svg-sprite-loader
import { ReactComponent as icon } from './icon.svg'; // cra-loader


Заранее спасибо.
  • Вопрос задан
  • 111 просмотров
Пригласить эксперта
Ответы на вопрос 1
@xenonhammer
Можно написать функцию, которая будет возвращать пути svg как jsx. Вебпак не понадобится для этого
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы