CKEditor5 SVG Icons Turn Black and White, Distorted When Multiple SVGs Are Used

Question

Hello StackOverflow community,

I'm facing a couple of issues with CKEditor in my Symfony project where I'm using WebpackEncore. Here's what's happening:

1.All SVG icons in the CKEditor toolbar are rendered in black and white. This happens even for SVGs from plugins that are supposed to be in color. Upon inspecting with the browser's dev tools, I noticed a CSS rule that seems to be causing this issue. When the following rule is unchecked, the icons appear in color:

.ck .ck-icon.ck-icon_inherit-color:not(:{fill}) {
    fill: currentColor;
}

2.When I include two SVG icons, they become distorted and lose their original colors. It seems like there might be a conflict or an override happening that affects the rendering of these icons when more than one is present.Both alone are OK.

Screenshots of problems:

• CSS issue image
• SVG issue image

Webpack Config:

const ckeditor5IconsRegex = "ckeditor5-[^/\\\\]+[/\\\\]theme[/\\\\]icons[/\\\\][^/\\\\]+\\.svg$";
const customIconsRegex = "javascripts[/\\\\]ckeditor[/\\\\]plugins[/\\\\][^/\\\\]+[/\\\\](theme|icons)[/\\\\][^/\\\\]+\\.svg$";
const combinedRegex = new RegExp(`${ckeditor5IconsRegex}|${customIconsRegex}`);

    Encore.addEntry('ckeditor', './assets/js/ckeditor/ckeditor.js')
    .addPlugin( new CKEditorTranslationsPlugin( {
        // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
        language: 'fr',
        addMainLanguageTranslationsToAllAssets: true
    } ) )

    // Use raw-loader for CKEditor 5 SVG files.
    .addRule( {
        test: combinedRegex,
        loader: 'raw-loader'
    } )

    // Configure other image loaders to exclude CKEditor 5 SVG files.
    .configureLoaderRule( 'images', loader => {
        loader.exclude = combinedRegex;
    } )

    // Configure PostCSS loader.
    .addLoader({
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
        loader: 'postcss-loader',
        options: {
            postcssOptions: styles.getPostCssConfig( {
                themeImporter: {
                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                },
                minify: true
            } )
        }
    } )

Twig :

function initializeCKEditor() {
            let options = {
                toolbar: {
                    items: [
                        'bold', 'italic', 'underline', 'strikethrough', '|',
                        '|', 'Subscript', 'Superscript',
                        '|', 'Removeformat',
                        '|', 'Undo', 'Redo',
                        '|', 'sourceEditing',
                        'fontColor',
                        '|', 'ReplaceCR',
                        '|', 'DiagPlWs'
                    ],
                    shouldNotGroupWhenFull: true
                },
                DiagPlWs: {
                    urlWs: '{{ asset('/javascripts/ckeditor/plugins/DiagPlWs/proxies/PHP/proxyDiagPlWs.php') }}',
                    // DIAGPLWS_PATH
                    corePath: '{{ asset('/javascripts/ckeditor/plugins/DiagPlWs') }}'
                },
                fontColor: {
                    colors: [
                        {
                            color: 'null',
                            label: 'Réinitialiser'
                        },
                        {
                            color: '#ff0001',
                            label: 'Texte à revalider'
                        },
                        {
                            color: '#ee00ee',
                            label: 'Coupage au montage si necessaire'
                        }
                    ]
                },
                colorButton_backStyle: {
                    element: 'printhelper',
                    styles:
                            {'color': '#(color)'}
                },
                language: 'fr',
            };

            window.ClassicEditor
                .create( document.querySelector('#{{ id }}'), options)
                .then( editor => {
                    console.log( 'Editor was initialized in twig', editor );
                })
                .catch( error => {
                    console.error( error );
                    console.log(document.querySelector('#{{ id }}'))
                })
                .disableAutoInline = true
        }

If the CSS rule is unchecked and the icons from the custom plugin are displayed alone, they appear as intended, which is what I want:

• Plugin 1 Image
• Plugin 2 image

NOTE : I can't post images because i need at least 10 reputation