Hi, I am trying to use <https://github.com/turansky/kfc-plugins> to `require` an svg that is in my `...

# react

[Steven]

Hi, I am trying to use https://github.com/turansky/kfc-plugins to require an svg that is in my resources folder.
I have added id("io.github.turansky.kfc.webpack") _version_ "7.5.0" to my build.gradle.kts and now the svg can be found, but it cannot be loaded.
I get the following error message during the build:

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See <https://webpack.js.org/concepts#loaders>

Do I need to manually configure loaders for my svg? If so, any help with this would be appreciated.

[Steven]

I've got it (mostly) working by using id("io.github.turansky.kfc.application") instead of the kfc.webpack and specifying kfc.webpack.run=true in gradle.properties

[OrfeasZ]

You can create a webpack.config.d folder inside your project folder (next to your src folder) and create a file-rules.js file in there (call it whatever you want) and put something like this inside:

config.module.rules.push(
    {
        test: /\.svg$/,
        use: {
            loader: 'url-loader',
            options: {
                name: '[name].[ext]'
            }
        }
    }
);

[OrfeasZ]

And also add url-loader as an npm dependency.

[OrfeasZ]

(name is also optional)

[Steven]

Thanks. It seems kfc does this automatically with a nice configuration, and you can modify the generation easily. I've got it working like I want now