Consider importing SVGs as React components #1388

ericdfields · 2017-01-12T20:45:56Z

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.

The text was updated successfully, but these errors were encountered:

wtgtybhertgeghgtwtg · 2017-01-12T23:35:32Z

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 · 2017-01-13T15:53:23Z

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 · 2017-01-23T19:31:39Z

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 · 2017-01-27T17:52:47Z

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 · 2017-01-27T18:57:24Z

@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 · 2017-01-29T00:06:37Z

@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 · 2017-01-29T00:29:46Z

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 · 2017-01-30T15:08:01Z

@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 · 2017-02-11T21:18:53Z

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 · 2017-05-06T22:50:12Z

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 · 2017-05-30T16:59:44Z

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 · 2017-06-06T15:10:06Z

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 · 2017-06-07T12:43:29Z

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:

Keep their SVGs as individual SVG files, compatible with any SVG editor
Use those SVGs as React components for the sake of passing props
Avoid sending unnecessary icons/vectors to the client as a result of using an unprocessed sprite sheet
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 · 2017-06-13T09:07:19Z

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

gwagener · 2017-06-19T04:47:16Z

I achieved this using https://github.com/jhamlet/svg-react-loader explicitly on the one SVG I wanted to inline.

import Logo from '-!svg-react-loader!./logo.svg';

The -! allows it to bypass the existing loaders so I can get away without ejecting.

kaumac · 2017-06-20T18:32:02Z

@gwagener I'm getting module resolve issues when using -!svg-react-loader!../path/to/file.svg;
Are there any additional steps required?

gwagener · 2017-06-20T21:14:43Z

@kaumac Hm, I'm actually using create-react-app-ts so I had to add a custom.d.ts with

declare module '*.svg' {
  const content: string;
  export default content;
}

For the type definitions of SVG. Without that I also got module resolve issues. Also, I'm still getting module resolve issues testing with Jest.

gwagener · 2017-06-22T03:21:27Z

Hm, have tested in vanilla CRA instead of TypeScript and see that my suggestion won't work because Webpack loader syntax isn't allowed. ⏏

kme211 · 2017-07-09T22:54:14Z

This worked for me after installing raw-loader.

// Icon.js
const Icon = ({ icon,  ...props }) => {
  const svg = require(`!raw-loader!./icons/${icon}.svg`);
  return <span {...props} dangerouslySetInnerHTML={{__html: svg}}/>;
};

Then I just use something like <Icon icon="checkmark" className="icon"/>. I originally saw this pattern in a boilerplate but I can't remember which one...

gaearon · 2017-07-10T00:44:46Z

@kme211

Please note that using Webpack loaders like this in a Create React App project is not supported and can break in any patch release. If you want to use Webpack loaders directly please eject (unless you’re okay with potential breakage in the future).

gaearon · 2017-07-10T00:47:28Z

Regarding proposal in #1388 (comment), it’s a bit counter intuitive to me. People are already confused by naming vs default exports, and I think repurposing it for an escape hatch doesn’t help.

gaearon · 2017-07-10T00:51:34Z

Let’s reopen as this seems popular. It’s not clear to me yet how to approach it in a way that wouldn’t break existing use cases.

stereobooster · 2017-07-10T08:39:21Z

@gaearon does not break existing case

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

gaearon · 2017-07-10T12:13:08Z

Yes, but as I mentioned in #1388 (comment), it’s pretty confusing. Maybe that’s okay for an escape hatch. If you send a PR for this, I can take a good look and make a more informed decision.

brianchirls · 2017-07-12T04:00:18Z

I should point out that any of the above proposed workarounds that use custom loader syntax no longer work due to #803.

sneridagh · 2017-08-05T09:36:11Z

@gaearon It's not a scape hatch, it's a discriminator on when to use the svg React component or when not to. I can't see a more elegant way for it. True that can be misleading, but documentation could minimize it.

at0g · 2017-08-16T13:45:32Z

As an alternative to the default vs named import, how about updating the CRA webpack config to exclude a given extension (.inline.svg?) from url-loader/file-loader; and handling that extension with svg-react-loader.

eg.

// webpack.config
loaders: [
    {
         test: /\.(svg|png|jpg|etc)$/,
         exclude: [/\.inline\.svg$/],
         use: ['url-loader']
    },
    {
         test: /\.inline\.svg$/,
         use: ['svg-react-loader']
    }
]

gaearon · 2018-01-09T12:27:35Z

Please participate in a wider discussion about this approach: #3722.

onopko81 · 2018-01-16T13:28:43Z

use:

xlink:href => xlinkHref
working...

problem is == > Syntax error: Namespace tags are not supported. ReactJSX is not XML.

* Import SVGs as React components (#1388) * Updated webpack production config and fixed tests * Improved Jest SVG file transform * Improved SVG tests * Add a comment * Update webpack.config.prod.js

gaearon · 2018-01-17T19:41:24Z

This is now implemented in #3718.

Timer · 2018-01-18T04:16:39Z

Support for this has been released in the first v2 alpha version. See #3815 for more details!

gaearon · 2018-01-18T12:43:53Z

This might not make it after all 😞 #3856

* Import SVGs as React components (facebook#1388) * Updated webpack production config and fixed tests * Improved Jest SVG file transform * Improved SVG tests * Add a comment * Update webpack.config.prod.js

* Import SVGs as React components (#1388) * Updated webpack production config and fixed tests * Improved Jest SVG file transform * Improved SVG tests * Add a comment * Update webpack.config.prod.js # Conflicts: # packages/react-scripts/package.json

rivertam · 2018-07-11T15:43:30Z

I'm sorry to add noise, but what is considered the current stable best practice for inline SVGs? I got my SVGs from a designer (over 100 of them) and would not like to convert them to JSX. My react-scripts is at version 1.0.17 and I have no problem updating to a more recent stable version if it will make the difference.

gregberge · 2018-07-11T15:48:24Z

@rivertam you can convert them statically using svgr, I think this is the simplest thing to do. This is what I do in all of my projects.

svgr -d src/components --icon src/svgs

rivertam · 2018-07-11T15:49:55Z

@neoziro I don't love it, but it'll work for me. Thanks!

* Import SVGs as React components (facebook#1388) * Updated webpack production config and fixed tests * Improved Jest SVG file transform * Improved SVG tests * Add a comment * Update webpack.config.prod.js

and-why · 2018-10-06T21:15:27Z

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

I've gone with this approach, keeping my svgs in one file and importing them where needed, for example:

import React from 'react';

const Logo = () => (
  <svg viewBox="0 0 636 76">
    <g
      id="Page-1"
      stroke="none"
      stroke-width="1"
      fill="none"
      fill-rule="evenodd"
      font-size="111"
      font-family="Limelight"
      letter-spacing="3.80571437"
      font-weight="normal"
    >
      <text id="logo" fill="#313131">
        <tspan x="-1.59871466" y="76">
          LOGO
        </tspan>
      </text>
    </g>
  </svg>
);

export { Logo };

It's then imported as a complete standalone svg with full control.

Timer · 2018-10-06T22:21:57Z

This was released in 2.0 stable. Workarounds are no longer needed.

ingelaro · 2018-10-10T10:34:15Z

There is some bug or limitation you have to keep in mind when you have multiple svg's on one page. You need to check for unique id's in svg file path's and mask's as second, third svg will grab first match id from page. So you can find all svg's to be the same as first in the document.

ravecat · 2018-10-17T21:32:28Z

Probably my answer will be helpful anybody

Add .svg extension to extenstions list for url-loader

          {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
            loader: require.resolve("url-loader"),
            options: {
              limit: 10000,
              name: "static/media/[name].[hash:8].[ext]"
            }
          }

Import .svg like that

import * as React from "react";
import { Icon } from "components";
import * as downArrow from "common/assets/down-arrow.svg";

const CollapseIcon = ({ condition }) => (
  <Icon asset={downArrow}  />
);

export default CollapseIcon;

Current props can use in src attribute, example, for my code

const Icon = styled.img.attrs<IconProps>({
  src: ({ asset }: IconProps) =>  asset,
  alt: ({ alt }: IconProps) => alt
})`
  vertical-align: middle;
`

philraj · 2018-11-20T20:37:35Z

@ravecat you can just use:

import { ReactComponent as WhateverNameYouWant } from 'common/assets/down-arrow.svg';

and you get a nice inlined SVG.

khaledosman · 2018-12-03T09:25:01Z

How about having svg components pure/memoized by default?

At the moment to achieve the same I would have to do something like this

import React, { PureComponent, memo } from 'react'
import { ReactComponent as _GraphIcon } from '../../assets/icons/icon-graph.svg'
const GraphIcon = memo(_GraphIcon)

wouldn't it be better if this was done by default?

iansu · 2018-12-03T16:21:00Z

@khaledosman Please create a new issue.

AlpacaGoesCrazy · 2018-12-11T11:16:21Z

It seems that

export { ReactComponent as MyIcon } from './icon.svg'

produces undefined when exported as

import { MyIcon } from 'icons/index.js'

philraj · 2018-12-11T11:20:20Z

@AlpacaGoesCrazy don't think you can do that, it's not a real import. It's using a Webpack plugin to transform the statement. You'll have to import { ReactComponent as BlahBlah } from './blah.blah' and then export the result.

AlpacaGoesCrazy · 2018-12-11T11:24:29Z

@philraj thank you, just did that and it works

import { ReactComponent as MyIcon } from './icon.svg'
export {
	MyIcon
}

however it would be nice to use direct exports for svg

iansu · 2018-12-11T16:37:06Z

This has been fixed but hasn't been released yet: #5573

gaearon closed this as completed Feb 11, 2017

gaearon added the issue: proposal label Jul 10, 2017

gaearon reopened this Jul 10, 2017

iansu mentioned this issue Jan 8, 2018

Import SVGs as React components (#1388) #3718

Merged

gaearon closed this as completed in #3718 Jan 17, 2018

flipactual mentioned this issue Mar 13, 2018

PRIAPI-73: SVG spriting, icons PublicRadioInternational/pri-component-library#5

Merged

2 tasks

ivnnv mentioned this issue Apr 8, 2018

Importing UploadIcon.svg as Component JakeHartnell/react-images-upload#23

Merged

yoiang mentioned this issue May 3, 2018

SVG as an svg and not as an image wmonk/create-react-app-typescript#37

Closed

lock bot locked and limited conversation to collaborators Jan 8, 2019

Consider importing SVGs as React components #1388

Consider importing SVGs as React components #1388

Comments

ericdfields commented Jan 12, 2017 • edited

wtgtybhertgeghgtwtg commented Jan 12, 2017

ericdfields commented Jan 13, 2017

edhenderson commented Jan 23, 2017

kauffecup commented Jan 27, 2017

edhenderson commented Jan 27, 2017

kristojorg commented Jan 29, 2017

kristojorg commented Jan 29, 2017

ericdfields commented Jan 30, 2017

gaearon commented Feb 11, 2017

stereobooster commented May 6, 2017 • edited

1

2

Anahkiasen commented May 30, 2017 • edited

jjmartucci commented Jun 6, 2017

ericdfields commented Jun 7, 2017

stereobooster commented Jun 13, 2017

gwagener commented Jun 19, 2017 • edited

kaumac commented Jun 20, 2017

gwagener commented Jun 20, 2017 • edited

gwagener commented Jun 22, 2017

kme211 commented Jul 9, 2017

gaearon commented Jul 10, 2017

gaearon commented Jul 10, 2017

gaearon commented Jul 10, 2017

stereobooster commented Jul 10, 2017 • edited

gaearon commented Jul 10, 2017

brianchirls commented Jul 12, 2017

sneridagh commented Aug 5, 2017

at0g commented Aug 16, 2017 • edited

gaearon commented Jan 9, 2018

onopko81 commented Jan 16, 2018

gaearon commented Jan 17, 2018

Timer commented Jan 18, 2018

gaearon commented Jan 18, 2018

rivertam commented Jul 11, 2018

gregberge commented Jul 11, 2018

rivertam commented Jul 11, 2018

and-why commented Oct 6, 2018 • edited

Timer commented Oct 6, 2018

ingelaro commented Oct 10, 2018 • edited

ravecat commented Oct 17, 2018 • edited

philraj commented Nov 20, 2018

khaledosman commented Dec 3, 2018 • edited

iansu commented Dec 3, 2018

AlpacaGoesCrazy commented Dec 11, 2018

philraj commented Dec 11, 2018

AlpacaGoesCrazy commented Dec 11, 2018

iansu commented Dec 11, 2018

ericdfields commented Jan 12, 2017 •

edited

stereobooster commented May 6, 2017 •

edited

Anahkiasen commented May 30, 2017 •

edited

gwagener commented Jun 19, 2017 •

edited

gwagener commented Jun 20, 2017 •

edited

stereobooster commented Jul 10, 2017 •

edited

at0g commented Aug 16, 2017 •

edited

and-why commented Oct 6, 2018 •

edited

ingelaro commented Oct 10, 2018 •

edited

ravecat commented Oct 17, 2018 •

edited

khaledosman commented Dec 3, 2018 •

edited