デフォルトのicon（アイコン）をカスタマイズ

[h-yabi2]

変更例

デフォルトの表示（ql-color）

変更後

サンプルコード

• ReactQuill.Quill.import("ui/icons") でアイコン一覧をインポート
• ql-color を変更したい場合は、icons["color"] の値を変えることでアイコンを変更できる

  import qlColor from "@/public/img/ql-color.svg";
  icons["color"] = '<img src="' + qlColor.src + '" alt="" />';

  または、

  const icons = ReactQuill.Quill.import("ui/icons");
  icons["color"] =
  '<svg viewBox="0 0 18 18"><polygon class="ql-stroke" points="7 7 7 3 11 3 11 7 15 7 15 11 11 11 11 15 7 15 7 11 3 11 3 7 7 7"></polygon></svg>';

参考

• アイコン一覧： https://github.com/slab/quill/blob/main/packages/quill/src/ui/icons.ts
• https://qiita.com/hayato07/items/1061de30e7a9fc8896c8