Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to customize icons with webpack in the suggested way #1831

Closed
ghost opened this issue Jun 24, 2019 · 6 comments
Closed

How to customize icons with webpack in the suggested way #1831

ghost opened this issue Jun 24, 2019 · 6 comments
Labels
type:question This issue asks a question (how to...).

Comments

@ghost
Copy link

ghost commented Jun 24, 2019

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

Screen Shot 2019-06-24 at 19 51 45

❎ Actual result

Screen Shot 2019-06-24 at 20 06 47

📃 Other details that might be useful

Logging of resource.request's:

SOF article

@ghost ghost changed the title Cannot customize icons with webpack inthe suggested way Cannot customize icons with webpack in the suggested way Jun 24, 2019
@Mgsy
Copy link
Member

Mgsy commented Jun 25, 2019

@ma2ciek, can you check it?

@ma2ciek
Copy link
Contributor

ma2ciek commented Jun 25, 2019

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 ma2ciek added pending:feedback This issue is blocked by necessary feedback. type:question This issue asks a question (how to...). labels Jun 25, 2019
@ma2ciek ma2ciek changed the title Cannot customize icons with webpack in the suggested way How to customize icons with webpack in the suggested way Jun 25, 2019
@ma2ciek
Copy link
Contributor

ma2ciek commented Jun 25, 2019

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

@Mgsy Mgsy closed this as completed Jul 8, 2019
@Mgsy Mgsy added resolution:fixed and removed pending:feedback This issue is blocked by necessary feedback. labels Jul 8, 2019
@uptonking
Copy link

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
Copy link
Contributor

dufipl commented Apr 12, 2022

@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
Copy link

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type:question This issue asks a question (how to...).
Projects
None yet
Development

No branches or pull requests

4 participants