Eui: How to inline svg/icons into a webpack bundle

[mouradmourafiq]

Is there a recommended way to include the svg icons into the bundle generated by webpack? I tried svg-url-loader and url-loader, but all svg files were generated into different js files with the main bundle having a rel path linking to them.

[snide]

Closing this as a duplicate of https://github.com/elastic/eui/issues/2806#issuecomment-607976776

That issue can give you some context. We'll try to get some docs going.

[chandlerprall]

Not a dupe of that one! I think I answered this somewhere else... I'll try to dig it up and if not, I'll answer this issue. On mobile right now, but am planning on answering this tomorrow.

[chandlerprall]

(the difference being: #2806 is a discussion of how to import svg as a react component, this question [unless I'm misreading] is how to get eui's icons to not split into separate bundle/build files)

[mouradmourafiq]

@snide I read all the issues that have svg word in them in this repo including the one you linked to. I only created this issue as a last resort because I did not manage to inline the svg files in the bundle. If there's a recommendation or if other users managed to have a configuration that works, I would be very appreciative if they could comment on this issue.

[mouradmourafiq]

@chandlerprall your understanding is correct, my intention is to create a single bundle containing all icons, currently it generates several files.

[chandlerprall]

Two options:

1. Import the icon you want to use, and pass it in

import { icon as AccessibilityIcon } from '@elastic/eui/lib/components/icon/assets/accessibility';
<EuiIcon type={AccessibilityIcon} />

Webpack will still output multiple icon files in your build directory, but there will not be a dynamic fetch.

1. Configure webpack to disable all additional chunks/bundles with the LimitChunkCountPlugin plugin

    plugins: [
        new webpack.optimize.LimitChunkCountPlugin({
            maxChunks: 1,
        }),
    ],

If you're looking for more control, the optimization.splitChunks configuration options - specifically cacheGroups - provides much more flexibility but also takes more configuration and potentially other modifications to your application.

[mouradmourafiq]

Thanks a lot for your fast responses and the webpack config snippet, I did not know about that plugin. This setting could have saved me a lot of time and frustration.