How to render SVG icon in react-draft-wysiwyg

543 views Asked by At

I'm using React Draft Wysiwyg. I try to add a fontawesome svg icon to draft content but instead of an icon it renders an empty paragraph.

handleApplyButton = () => {
    if (this.state.iconName !== '') {
        const { editorState, onChange } = this.props;
        EditorState.moveFocusToEnd(editorState);

        const currentHtmlContent = getHtml(editorState)
        const renderedIcon = ReactDOMServer.renderToStaticMarkup(<Icon iconColor={iconColor.lightBlue} blockIcon={false} iconName={this.state.iconName} iconSize={iconSize.defaultRegular}/>)
        const content = currentHtmlContent + renderedIcon
        const blocksFromHtml = htmlToDraft(content);
        
        const { contentBlocks, entityMap } = blocksFromHtml;
        const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);

        onChange(EditorState.push(editorState, contentState, 'insert-fragment'));
    }
}

Any solutions? or maybe somebody could explain what is wrong in my code?

0

There are 0 answers