Inline Svg in React 16

Inline SVG in react 16

React JSX can produce SVG, the same way it does with HTML. Write the SVG as the component's "markup", and use props to control the fill attribute (you can also change the style):

const Icon = ({ fill }) => (  <svg viewBox="0 0 409.6 405.76" fill={ fill }>      <path d="M682.8,396.06c50.72,0,91.84-48.13,91.84-107.49,0-82.33-41.12-107.49-91.84-107.49S591,206.24,591,288.57c0,59.36,41.12,107.49,91.84,107.49Zm0,0" transform="translate(-478 -181.08)"/>      <path d="M885.6,554.28,839.27,449.9a23.3,23.3,0,0,0-10.48-11.15l-71.91-37.43a4.66,4.66,0,0,0-4.93.41,113.41,113.41,0,0,1-138.3,0,4.67,4.67,0,0,0-4.94-.41l-71.9,37.43a23.24,23.24,0,0,0-10.47,11.15L480,554.28a23.16,23.16,0,0,0,21.18,32.56H864.42a23.17,23.17,0,0,0,21.18-32.56Zm0,0" transform="translate(-478 -181.08)"/>  </svg>);
ReactDOM.render(  <Icon fill="red" />,  demo);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="demo"></div>

Embedding SVG into ReactJS

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="color: purple" → 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 <defs>, <use>, and inline styles:

function SvgWithXlink (props) {
    return (
        <svg
            width="100%"
            height="100%"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
        >
            <style>
                { `.classA { fill:${props.fill} }` }
            </style>
            <defs>
                <g id="Port">
                    <circle style={{fill:'inherit'}} r="10"/>
                </g>
            </defs>

            <text y="15">black</text>
            <use x="70" y="10" xlinkHref="#Port" />
            <text y="35">{ props.fill }</text>
            <use x="70" y="30" xlinkHref="#Port" className="classA"/>
            <text y="55">blue</text>
            <use x="0" y="50" xlinkHref="#Port" style={{fill:'blue'}}/>
        </svg>
    );
}

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 (
                <svg viewBox="0 0 120 120">
                    <circle cx="60" cy="60" r="50"/>
                </svg>
            );
        }

At which point you can think about adding props like fill, or whatever else might be useful to configure.

Inline SVGs in React components not showing

You have to invoke logo in Logo return statement. If you return just the logo reference as in your code, then it will be not a valid React component.

function Logo() {
  const logo = () => (
    <svg width="130" height="144" viewBox="0 0 130 144">
      <path
        d="M59.1046 143.548V143.404C57.8398 143.404 56.575 143.404 55.3262 143.26L57.6316 134.486H59.0726C62.5047 134.488 65.926 134.101 69.2711 133.333V142.491C65.8988 143.135 62.4737 143.462 59.0405 143.468V143.612"
        fill="white"
      />
    </svg>
  );

  return logo();
}

The svg is definitely there, but it needs some styling: https://codesandbox.io/s/heuristic-newton-m6js9

How to display svg icons(.svg files) in UI using React Component?

You can directly use .svg extension with img tag if the image is remotely hosted.

ReactDOM.render(
  <img src={"http://s.cdpn.io/3/kiwi.svg"}/>,
  document.getElementById('root')
);

Here is the fiddle: http://codepen.io/srinivasdamam-1471688843/pen/ZLNYdy?editors=0110

Note: If you are using any web app bundlers (like Webpack) you need to have related file loader.

Replace image element with inline svg in React

Ended up using react-svg.

https://www.npmjs.com/package/react-svg

Works like a charm.

Using SVGs as React Components in a Map

I (OP) ended up solving this by using this package NPM package https://www.npmjs.com/package/react-inlinesvg.

So instead of creating a map of ID --> React Component, I did a map of ID --> Image Source(string) and just used that image src url in the Inline SVG.

Here is the finished code of what I ended up doing

// LogoMap.js

import MyLogo from "assets/MyLogo.svg";

const LogoMap = new Map();

LogoMap.set("1", MyLogo);
// ... Setting more items

export { LogoMap }

import { LogoMap } from "data/LogoMap";

function MyComponent() {
    const LogoOne = LogoMap.get("1")

    return (
        <Svg src={LogoOne} fill="blue" />
    );
}

---

Related Topics