Search code examples
reactjsdraftjsreact-draft-wysiwyg

React Draft Wysiwyg - Using custom toolbar icons instead of standard inline toolbar images

Is there a way to replace the inline toolbar images with custom icons like ones from React Icons?

Code (Toolbar Options):

import { AiOutlineUnorderedList } from 'react-icons/ai'

export const toolbarOptions = {
  options: ['list', 'link'],
  list: {
    options: ['unordered', 'ordered'],
    unordered: {
      icon: <AiOutlineUnorderedList />, //does not work
      className: undefined,
    },
  },
  link: {
    options: ['link'],
  },
}

I have also tried to use <img src="./path-to-svg"/> however that does not work as well...

Any ideas?

TIA

Solution

  • You just need to provide the src or file path

    unordered: { 
 icon: "../path-to.svg",
 className: undefined
}