Currently, I have successfully implemented the functionality of buttons with Vue. However, I am facing an issue in changing their icon, which is currently not displaying anything. How can I resolve this problem?
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>