Как добавить иконку для кнопки выбора заголовка H3 в Quill?

Question

[Александр Белан]

Всем привет, такой вопрос, в качестве текстового редактора на сайте я использую Quill и через параметр toolbar я добавляю кнопку заголовка H3, кнопка добовляеться, но без значка, как можно добавить кнопке значок?


JS:

var toolbarOptions = [
	['bold', 'italic', 'underline', 'strike'],     
	['blockquote', 'code-block'],

	[{ 'header': 2 }, { 'header': 3}],     
	[{ 'list': 'ordered'}, { 'list': 'bullet' }],
	[ 'link', 'image' ],
	
	[{ 'indent': '-1'}, { 'indent': '+1' }],       
	[{ 'direction': 'rtl' }],                      

	[{ 'size': ['small', false, 'large', 'huge'] }], 
	[{ 'header': [2, 3, 4, 5, 6, false] }],

	[{ 'color': [] }, { 'background': [] }],          
	[{ 'font': [] }],
	[{ 'align': [] }],
	
	['clean'],                               
];

var quill = new Quill('#form_text', {
	modules: {
	    toolbar: toolbarOptions
	},
	theme: 'snow'
});

Comments

[Вадим]

При беглом чтении документации путного ничего не вычиталось, разве что, можно создать тулбар на основе осбственной HTML разметки, как указано тут.

А так же тут есть демка с кастомной кнопкий "HTML"

Ну и как вариант, как я понял, можно легко прицелиться в эту кнопку с помощью CSS селектора и пропихнуть туда иконку.

Answer 1

[Danny Arty]

Попробуйте добавить код:

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