Как заменить Quill. js dropdown.svg по умолчанию на значок Font Awesome?

Question

Фон

В настоящее время мы используем vue -quill-редактор vue -quill-редактор для интеграции текстового редактора в Vue . js app.

Поскольку мы используем Font Awesome в приложении, я заменил каждый значок на панели инструментов по умолчанию на эквивалент Font Awesome.

main. js

import VueQuillEditor from 'vue-quill-editor';
import Quill from 'quill';

import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import '@/assets/scss/main.scss';

const icons = Quill.import('ui/icons');
icons['bold'] = '<i class="fa fa-bold" aria-hidden="true"></i>';
icons['italic'] = '<i class="fa fa-italic" aria-hidden="true"></i>';

Единственный значок, который я не смог изменить таким образом, - это значок выбора / выпадающего меню, поскольку его нет в значках. js.

Вопрос

Каков наилучший способ заменить значок выбора / выпадающего меню по умолчанию эквивалентом Font Awesome (например, <i class="fa fa-chevron-down" aria-hidden="true"></i>)?

Спасибо!

Answer 1

Спасибо за вышеупомянутое решение, Патель.

Как это случилось, я придумал более простое решение, не требующее создания пользовательской опции выбора.

Я просто удалил svg по умолчанию и добавил новый значок, используя :after:

.ql-picker-label {
  svg {
    width: 0px !important;
  }
}

.ql-header,
.ql-size {
  .ql-picker-label:after {
    color: $black !important;
    content: '\f078';
    font-family: 'FontAwesome';
    position: absolute;
    top: 1px !important;
    right: 0;
  }
}

Кажется, он работает довольно хорошо и, конечно, будет применяться ко всем таким элементам.

Answer 2

Вы не можете изменить drop-down напрямую, но да, вы можете добавить пользовательский вариант выбора и применить style к нему.

Codepen - https://codepen.io/Pratik__007/pen/QWbyWoE