How to customize icons with webpack in the suggested way

[ghost]

Is this a bug report or feature request? (choose one)

🐞 Bug report

💻 Dependencies

package.json

{
  ...
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "autoprefixer": "^9.4.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "clean-webpack-plugin": "^1.0.0",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.9.3",
    "postcss-loader": "^3.0.0",
    "raw-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.7.2",
    "webpack-md5-hash": "^0.0.6"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-adapter-ckfinder": "^11.0.2",
    "@ckeditor/ckeditor5-alignment": "^11.1.1",
    "@ckeditor/ckeditor5-autoformat": "^11.0.2",
    "@ckeditor/ckeditor5-basic-styles": "^11.1.1",
    "@ckeditor/ckeditor5-block-quote": "^11.1.0",
    "@ckeditor/ckeditor5-dev-utils": "^12.0.1",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.1",
    "@ckeditor/ckeditor5-easy-image": "^11.0.2",
    "@ckeditor/ckeditor5-editor-classic": "^12.1.1",
    "@ckeditor/ckeditor5-essentials": "^11.0.2",
    "@ckeditor/ckeditor5-heading": "^11.0.2",
    "@ckeditor/ckeditor5-image": "^13.1.0",
    "@ckeditor/ckeditor5-link": "^11.0.2",
    "@ckeditor/ckeditor5-list": "^12.0.2",
    "@ckeditor/ckeditor5-paragraph": "^11.0.2",
    "@ckeditor/ckeditor5-react": "^1.1.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.18",
    "@fortawesome/free-solid-svg-icons": "^5.8.2",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "interweave": "^11.1.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "styled-components": "^4.2.1"
  }
}

📋 Steps to reproduce

SOF article

✅ Expected result

❎ Actual result

📃 Other details that might be useful

Logging of resource.request's:

SOF article

[Mgsy]

@ma2ciek, can you check it?

[ma2ciek]

As you can see at the source code of the NormalModuleReplacementPlugin the regexp is tested two times, once before the resolution on the request and once after the resolution on the resource.

As you might see most of the times your function is called after the resolution (as the requests don't match the regexp). The request after the resolution is enhanced by the loaders (that's why the paths are so long and contain weird characters) and actually, this option isn't used anymore. That's why you should change the result.resource instead of the result.request.

E.g. try the following plugin:

new webpack.NormalModuleReplacementPlugin(
	/ckeditor5-[^/]+\/theme\/icons\/bold\.svg/,
	result => {
		if ( result.resource ) {
			result.resource = result.resource.replace( 'bold', 'code' );
		}
	}
)

[ma2ciek]

To be clear, it's not a CKEditor 5 issue, that's how the Webpack plugin works.

[uptonking]

for ckeditor5 and webpack5, my implementation for custom ckeditor icons:

const customCKEditorIcons = ['bold', 'italic'];  

new webpack.NormalModuleReplacementPlugin(/ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/, result => {
        const resource = result.createData.resource;
        if (resource) {
            const iconNamePaths = resource.split('/');
            const iconName = iconNamePaths[iconNamePaths.length - 1].split('.')[0];

            if (customCKEditorIcons.includes(iconName)) {
                result.createData.resource = path.resolve(
                    __dirname,
                    `path/to/${iconName}.svg`,
                );
            }
        }
    })

[dufipl]

@uptonking here you can find an easy solution for icons customization in webpack5:
https://ckeditor.com/docs/ckeditor5/latest/support/faq.html#how-to-customize-the-ckeditor-5-icons.

[uptonking]

@uptonking here you can find an easy solution for icons customization in webpack5: ckeditor.com/docs/ckeditor5/latest/support/faq.html#how-to-customize-the-ckeditor-5-icons.

• i have read the doc. but the doc doesn't provide a way for me to replace multiple icons.
• my solution is better to replace given ckeditor icons customCKEditorIcons with local svg icons in path/to/${iconName}.svg