How to exclude webpack loader based on resource import form?

Question

React

Good evening.
There is an application built via create-react-app. As you know, CRA offers a way to import SVGs as components.

import { ReactComponent as LogoIcon } from '@/assets/logo.svg';

This is provided by the following section of code in the config:

plugins: [
    [
      require.resolve('babel-plugin-named-asset-import'),
      {
        loaderMap: {
          svg: {
            ReactComponent:
              '@svgr/webpack?-svgo,+titleProp,+ref![path]',
          },
        },
      },
    ],
  ],

However, I want to add the ability to handle svgs as character sprites, while still being able to import svgs as components. To do this, I added svg-sprite-loader.

{
  test: /\.svg$/,
  use: [
    {
      loader: 'svg-sprite-loader',
      options: {
        symbolId: 'icon-[name]'
      }
    }
  ]
},

Actually sprites work with a bang, as they should, but here the import as a component falls off - the loaders conflict with each other.

Question: is it possible to somehow exclude the loader from the chain if the import is in any format? I.e

import icon from 'icon.svg'; // svg-sprite-loader
import { ReactComponent as icon } from './icon.svg'; // cra-loader

Thanks in advance.

Answer 1

It is possible to write a function that will return svg paths as jsx. You don't need webpack for this.