React-markdown: Cannot use renderer for FontAwesomeIcon

Created on 22 Mar 2019 · 4Comments · Source: remarkjs/react-markdown

I am trying to inject some icons inside the markdown. So far I managed to insert one with the html renderer but it seems like I am limited to one and it breaks all my other html tags (eg anchor tag).

🙋 typquestion

Source

AlexCppns

Most helpful comment

something like:

<ReactMarkdown 
       renderers={{ html: BookIcon, link: LinkComponent }}
        linkTarget="_blank"
        source="<html id=\"book-icon\" /> <a href="/test">test</a>" />

Everything is a book icon.

AlexCppns on 10 Jun 2019

🎉1 👍1

All 4 comments

How can I reproduce this? Could you make a repository showcasing the issue? I'm not sure I fully understand what is happening.

rexxars on 15 Apr 2019

(Might be related to #244, specifically https://github.com/rexxars/react-markdown/issues/244#issuecomment-487749937)

mDibyo on 29 Apr 2019

something like:

<ReactMarkdown 
       renderers={{ html: BookIcon, link: LinkComponent }}
        linkTarget="_blank"
        source="<html id=\"book-icon\" /> <a href="/test">test</a>" />

Everything is a book icon.

AlexCppns on 10 Jun 2019

🎉1 👍1

usually this would be done through a remark plugin, for example https://github.com/remarkjs/remark-external-links can add icons to external links.
For more information on remark plugins and working with ASTs see https://unifiedjs.com/learn/