Quill: SVG assets for header sizes 3–6?

[danfuzz]

Steps for Reproduction

1. Set up Quill to have a toolbar with individual buttons for header sizes 3 through 6.
2. Run the app.
3. Double-click on some text.
4. Observe the toolbar.

You can build and run the Bayou project at https://github.com/danfuzz/bayou to see this happen in the context of a fleshed-out project.

Expected behavior:

Icon shows up for header sizes 3 through 6.

Actual behavior:

Blank spaces where the icons should be.

Platforms:

All

Version:

1.3.2

[jhchen]

There are only icons for H1 and H2. I'm not a designer and had someone else make them so I'll have to see if more can be made in this same style/aesthetic.

[jhchen]

They've been added in the assets/ folder now as well.

[lucsky]

@jhchen Um, unless I am missing something, just adding the icons is not enough, ui/icons.js still knows about H1 and H2 only.

[jhchen]

There are many more icons in the folder than are by default exposed in icons.js and thus included in the build size. Where the line is is a subjective call I made; those with differing preferences can customize their own build.

[raphaelsaunier]

Awesome, thanks for the hint, @jhchen!

If it helps anyone, here's how I ended up including the missing icons by overriding the default Webpack loader for SVGs:

  const icons = Quill.import('ui/icons');
  icons.header[3] = require('!html-loader!quill/assets/icons/header-3.svg');
  icons.header[4] = require('!html-loader!quill/assets/icons/header-4.svg');

[adylevy]

Solution that worked for me -
import Quill from 'quill';

const icons = Quill.import('ui/icons');

for (let i = 2; i <= 6; i += 1) {
icons.header[i] = <b>H${i}</b>;
}