Consider importing SVGs as React components

[ericdfields]

My own path of using SVGs with webpack has settled me comfortably with loading .svg files as react components via https://github.com/jhamlet/svg-react-loader (svg-react-loader@next as of time of writing). This allows you to treat an SVG just like any other React component, and renders out inline SVGs. For example:

const MySvg = require('./mySvg.svg')

const MyApp = () =>
  <div>
      // some components!
     <MySvg /> // could also pass fill='#ccc' or style={styleObj}
  </div>

// renders
/*
<div>
  <svg ...> ...etc </svg>
</div>
*/

Inline SVGs offer the most amount of flexibility in terms of styling, animation, and manipulating props. SVGs in the browser are now more supported than ever. They are quickly replacing icon fonts as the preferred way to do icons in your app.

I'd enjoy hearing the community's thoughts on this.

[wtgtybhertgeghgtwtg]

So, for example, on the starting page, instead of

import logo from './logo.svg';
...
<img src={logo} className="App-logo" alt="logo" />
...

it would be

import Logo from './logo.svg';
...
<Logo />
...

Isn't that a little opinionated?

[ericdfields]

This video convinced me that the way we should be using SVG is inline. This table, showing the features and benefits of implementing SVG using the three available techniques, cinched it for me:

An SVG is different from all other assets (image, sound, video, etc) in that isn't a binary blob, and so can be more easily manipulated in our app. An SVG has more in common with a stateless react component than a JPEG.

You can still do this:

import Logo from './logo.svg';
...
<Logo className='App-logo' ariaLabel='logo' />
...

Then again, I suppose I haven't thought through the scenario of using an SVG asset in CSS…
😬

[edhenderson]

I've ran into a similar problem/issue, I'd like to be able to reference SVGs and then adjust their fill colour based on some API call response. You can't do this with an external reference to the SVG, you'd need to inline them. Is there a way right now to basically get the SVG text and even just dump it in?

[kauffecup]

as a workaround you can do something like:

import React from 'react';
export default () =>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M2.001 9.352c0 1.873.849 2.943 1.683 3.943.031"/>
  </svg>

then you can take in props and use those to adjust the fill

[edhenderson]

@kauffecup I'm new to ES6, React and this library so apologies if silly questions... Are you saying make a file called something.js that is essentially a wrapper around an SVG? How would you call this in another file.

Also, thank you.

[kristojorg]

@kauffecup I tried your method of inlining an SVG into a component, but am seeing a webpack hot dev client error that it cannot build the module...

Any ideas what might be causing this?

[kristojorg]

Update for anybody else seeing this: the issue was resolved when I removed namespaces from the svg, since jsx is not xml, they cause errors.

[ericdfields]

@kauffecup that's adding extra js cruft to what should be a standalone svg resource. Not ideal.

@edhenderson I think using svg-react-loader that I mention in the OP will get you what you want. It's working perfectly for me, of course you have to eject from create-react-app first.

[gaearon]

I appreciate the suggestion but I know some people are already using SVGs as sprites so I wouldn't like to break them. Especially given that it is easy to declare SVG inside a React component anyway.

[stereobooster]

We have some options:

1

Assume we have components/Pin.svg it can be transformed (by webpack, in memory) to:

export default "components/Pin.hash.svg"

export function Pin(props) {
  return (
    <svg ...>...</svg>
  )
}

This way it will backward compatible with current CRA convention about SVGs.

Advantage of using SVGs directly (instead of copy-pasting it to React component) is that you can edit it in visual editor, like Inkscape.

2

Create CLI tool which will generate (and save to the disk) React Components from SVG files. It additionally can use svgmin. Developer can edit generated files afterwords or regenerate components whenever SVG changes.

PS Github uses inline SVGs for icons

[Anahkiasen]

I feel like this issue has been closed prematurely. The main motivation seems to be BC (which is understandable) but the following statement is not necessarily true:

Especially given that it is easy to declare SVG inside a React component anyway.

While it is easy to declare SVG in React code, that means it's all the more complicated to work with actual SVG files if you want them inline (as is the current recommendation).

You basically need to manually create one component per icon and paste the SVG contents in them (and god knows some app can have a lot of icons), accounting for attributes changes (class => className) and such.
That or run some kind of third party script to do the conversion for you; in both cases you run the risk of your React SVG components getting out of sync with the actual SVG files, which is what your designer is gonna work with and give to you.

My point is, considering the current recommendation seems to be to use inline SVGs it seems counterproductive for the default behavior of CRA to be using <img> tags – all the more since CRA is all about convention over configuration and sane defaults. In that spirit I think it'd better long term to not prioritize BC over good defaults.

[jjmartucci]

Agree with @Anahkiasen , I found this looking for a solution to using inline SVGs without ejecting and modifying the Webpack loader, and was disappointed to find that loading them as images was the expected behavior. I understand the reasoning, but the future-proof path and what I've done on every other project is Graphics Program => SVGO => Webpack loader => inline in document.

[ericdfields]

Thanks for chiming in and keeping this discussion going. The fact that new people keep finding their way to this thread means more and more people expect CRA to allow them to:

1. Keep their SVGs as individual SVG files, compatible with any SVG editor
2. Use those SVGs as React components for the sake of passing props
3. Avoid sending unnecessary icons/vectors to the client as a result of using an unprocessed sprite sheet
4. Having to manually maintain a sprite sheet in addition to a React dev environment like CRA

Handling svgs as their own media type with their own loader allows for all of this. I hope we can re-open this issue one day.

[stereobooster]

I realized that my first comment is not clear on what I'm proposing. My solution (1) is backward compatible with existing convention.

import Pin from 'Pin.svg'; // you get svg url or base64 encoded data url
// which is the same as
import { default as Pin } from 'Pin.svg'; 

// but if you do this

import { Pin } from 'Pin.svg'; // you get React component with inline svg