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

Question

[Алексей Николаев]

Доброго вечера.
Есть приложение, собранное через 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

Заранее спасибо.

Answer 1

[xenonhammer]

Можно написать функцию, которая будет возвращать пути svg как jsx. Вебпак не понадобится для этого