vuejs - 如何向Quill添加自定义图标（撤消/重做）

Question

所以我能够用Vue实现按钮功能，但我似乎无法改变他们的图标（目前没什么）。我该如何解决？

https://codesandbox.io/s/8lnz3r2n12

<template>
  <div id="app">
    <div>Quill editor</div>
    <div ref="editor"></div>
  </div>
</template>

<script>
import "quill/dist/quill.bubble.css";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import undo_icon from "quill/assets/icons/undo.svg";
import redo_icon from "quill/assets/icons/redo.svg";
import Quill from "quill";

export default {
  name: "App",
  components: {},
  data() {
    let self = this;
    return {
      toolbar_settings: {
        container: [
          ["bold", "italic"],
          [
            {
              undo: undo_icon
            },
            {
              redo: redo_icon
            }
          ]
        ],
        handlers: {
          redo() {
            self.editor.history.redo();
          },
          undo() {
            self.editor.history.undo();
          }
        }
      }
    };
  },
  mounted() {
    const self = this;
    let options = {
      debug: this.debug,
      modules: {
        history: {
          delay: 1000,
          maxStack: 100,
          userOnly: false
        },
        toolbar: this.toolbar_settings
        // this.toolbar,
      },
      placeholder: "placeholder",
      readOnly: false,
      theme: "snow"
    };

    this.editor = new Quill(this.$refs.editor, options);
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Answer 1

只需在定义选项之前添加此3行即可。

var icons = Quill.import("ui/icons");
icons["undo"] = undo_icon;
icons["redo"] = redo_icon;

codepen - https://codesandbox.io/s/m34vk57j3x