Embedding SVG into ReactJS

Question

Is is possible to embed SVG markup into a ReactJS component    render  function       return        lt span gt         lt svg version  1 1  id  Layer 1  xmlns  http   www w3 org 2000 svg  xmln          lt  span gt           Results in the error       Namespace attributes are not supported  ReactJSX is not XML    What is the lightest way of doing this  Using something like React ART is way overkill for what I m trying to do

User · Accepted Answer

Update 2016-05-27 As of React v15  support for SVG in React is  close to   100  parity with current browser support for SVG  source   You just need to apply some syntax transformations to make it JSX compatible  like you already have to do for HTML  class   className  style  quot color  purple quot    style   color   purple      For any namespaced  colon-separated  attribute  e g  xlink href  remove the   and capitalize the second part of the attribute  e g  xlinkHref  Here   s an example of an svg with  lt defs gt    lt use gt   and inline styles  function SvgWithXlink  props        return            lt svg             width  quot 100  quot              height  quot 100  quot              xmlns  quot http   www w3 org 2000 svg quot              xmlnsXlink  quot http   www w3 org 1999 xlink quot           gt               lt style gt                      classA   fill   props fill                    lt  style gt               lt defs gt                   lt g id  quot Port quot  gt                       lt circle style   fill  inherit    r  quot 10 quot   gt                   lt  g gt               lt  defs gt                lt text y  quot 15 quot  gt black lt  text gt               lt use x  quot 70 quot  y  quot 10 quot  xlinkHref  quot  Port quot    gt               lt text y  quot 35 quot  gt   props fill   lt  text gt               lt use x  quot 70 quot  y  quot 30 quot  xlinkHref  quot  Port quot  className  quot classA quot   gt               lt text y  quot 55 quot  gt blue lt  text gt               lt use x  quot 0 quot  y  quot 50 quot  xlinkHref  quot  Port quot  style   fill  blue     gt           lt  svg gt            Working codepen demo For more details on specific support  check the docs    list of supported SVG attributes  And here   s the  now closed  GitHub issue that tracked support for namespaced SVG attributes   Previous answer You can do a simple SVG embed without having to use dangerouslySetInnerHTML by just stripping the namespace attributes  For example  this works          render  function                 return                    lt svg viewBox  quot 0 0 120 120 quot  gt                       lt circle cx  quot 60 quot  cy  quot 60 quot  r  quot 50 quot   gt                   lt  svg gt                            At which point you can think about adding props like fill  or whatever else might be useful to configure

User · Answer

You can import svg and it use it like a image import chatSVG from     assets images undraw typing jie3 svg   And ise it in img tag  lt img src  chatSVG  className  iconChat  alt  quot Icon chat quot   gt

User · Answer

If you just have a static svg string you want to include  you can use dangerouslySetInnerHTML   render  function         return  lt span dangerouslySetInnerHTML     html    lt svg gt     lt  svg gt       gt       and React will include the markup directly without processing it at all

User · Answer

According to a react developer  you dont need the namespace xmlns  If you need the attribute xlink href you can use xlinkHref from react 0 14  Example  Icon    props    gt      return  lt svg className  icon  gt       lt use xlinkHref         props name   gt  lt  use gt     lt  svg gt

User · Answer

If you want to load it from a file  you may try to use React-inlinesvg - that s pretty simple and straight-forward   import SVG from  react-inlinesvg     lt SVG   src   path to myfile svg    preloader   lt Loader   gt     onLoad   src    gt        myOnLoadHandler src         gt    Here s some optional content for browsers that don t support XHR or inline   SVGs  You can use other React components here too  Here  I ll show you     lt img src   path to myfile png    gt   lt  SVG gt

User · Answer

The best way I found was this site https   react-svgr com playground  You copy an svg and it give you a react functional component with the svg transformed to react code

User · Answer

There is a package that converts it for you and returns the svg as a string to implement into your reactJS file  https   www npmjs com package convert-svg-react

[javascript] Embedding SVG into ReactJS

Examples related to javascript

Examples related to svg

Examples related to reactjs