Replacing font awesome icons with SVGs

[quentin-bettoum]

I've read here and there that it was planned to replace Font Awesome with SVG icons.
I started to investigate to see how it would be possible.

I downloaded one of the new Font Awesome 6 icon in SVG and I managed to replace the "preview" icon with a little bit of CSS.

I made some small modifications on the Font Awesome SVG by adding these properties:
fill="none" stroke="currentColor" aria-hidden="true"
The stroke and fill properties allow us to change the SVG color with CSS, and the aria-hidden is for accessibility reasons since icons are purely decorative.

Now the difficult part is to edit the JavaScript code.
For example, we would probably need to replace the className key in panels/config/config.js with a icon one that would contain the SVG in a string.
I don't do a lot of JavaScript and I don't know how we could retrieve the SVGs code from the files.
Maybe with some Webpack config that would extract all the SVG from a folder and put their content in an object with key = file_name and value = file_content and then write this object in a dedicated file that we could import?

I'd be glad to help by gathering all the replacement SVG files we need by downloading them from Font Awesome and applying the changes I made to the eye-solid one above.

For the JavaScript part I may take a deeper look at some point, but for now I thought I'd just share this idea here.

[artf]

You should be able to update all the used buttons with your SVG with something like this

// Get the button by panel and button ID
const btnPreview = editor.Panels.getButton('options', 'preview');
btnPreview.set({ 
  className: '', // remove default FA classes
  label: '<svg ...' 
})

Here you should be able to find all the panel/button IDs https://github.com/artf/grapesjs/blob/master/src/panels/config/config.js

[quentin-bettoum]

Thanks it works, but is it also possible for the layer manager?
From my understanding, I’d have to replace the UI using the Layers API.

There is also the fa-eye-slash icon used to close the preview, I don't think it's possible to change these without replacing the UI.

[quentin-bettoum]

For the fa-eye-slash used to close the preview, I found a hacky solution with a little bit of CSS.

.fa-eye-slash::before {
  width: 2em;
  height: 2em;
  display: block;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 640 512'%3E%3Cpath d='M150.7 92.77C195 58.27 251.8 32 320 32C400.8 32 465.5 68.84 512.6 112.6C559.4 156 590.7 207.1 605.5 243.7C608.8 251.6 608.8 260.4 605.5 268.3C592.1 300.6 565.2 346.1 525.6 386.7L630.8 469.1C641.2 477.3 643.1 492.4 634.9 502.8C626.7 513.2 611.6 515.1 601.2 506.9L9.196 42.89C-1.236 34.71-3.065 19.63 5.112 9.196C13.29-1.236 28.37-3.065 38.81 5.112L150.7 92.77zM223.1 149.5L313.4 220.3C317.6 211.8 320 202.2 320 191.1C320 180.5 316.1 169.7 311.6 160.4C314.4 160.1 317.2 159.1 320 159.1C373 159.1 416 202.1 416 255.1C416 269.7 413.1 282.7 407.1 294.5L446.6 324.7C457.7 304.3 464 280.9 464 255.1C464 176.5 399.5 111.1 320 111.1C282.7 111.1 248.6 126.2 223.1 149.5zM320 480C239.2 480 174.5 443.2 127.4 399.4C80.62 355.1 49.34 304 34.46 268.3C31.18 260.4 31.18 251.6 34.46 243.7C44 220.8 60.29 191.2 83.09 161.5L177.4 235.8C176.5 242.4 176 249.1 176 255.1C176 335.5 240.5 400 320 400C338.7 400 356.6 396.4 373 389.9L446.2 447.5C409.9 467.1 367.8 480 320 480H320z'/%3E%3C/svg%3E");
}

And I noticed that the layer manager recently got SVGs instead of font-awesome icons (I was still using 0.18.4 so I didn't notice earlier), so even if I can't change the icons I can at least get rid of font-awesome for now.

[glaprida]

Any solution on how to replace the layers icons? I would like to change the icon for dragging layers.