Create-react-app: 0.8.0 breaks svg sprite

[bogdansoare]

The change in 0.8.0 to use url-loader with limit 10k as a default loader breaks my svg sprite system.

The svg sprite system works like this: I put all my svgs in one folder, run svg-sprite to generate svg sprite (which is below 10k), then I have a custom Icon component in which I import the svg sprite and load the apropriate icon using fragment identifiers

Icon Component:

import React, { PropTypes } from 'react'
import svgSprite from '../img/symbol/sprite.svg'

function Icon({ name }) {
  return (
    <svg>
      <use xlinkHref={`${svgSprite}#${name}`} />
    </svg>
  )
}

Any idea how to fix this besides just adding more svgs to the sprite until it is bigger than 10k?

[gaearon]

Do fragments break with base64 URLs?

[gaearon]

Or do you rather mean that it's unfortunate sprites get duplicated?

If this is the case I think we should disable inlining for SVG. After all the user could've put it directly into components if they wanted to inline it.

[bogdansoare]

Fragments break with base64.
Also like you said it's unfortunate that we can't leverage caching and that we inline the whole sprite everywhere an icon is used.

Disabling inlining for SVG would solve the issue.
I'm going to research a bit svg sprite systems and see if there are other reasonable possibilities besides fragment identifiers.

[gaearon]

Would you like to make a PR for a special case for SVG?

[bogdansoare]

Sure, I'll be glad to make a PR

[gaearon]

Fixed by #1180.

[mzedeler]

What is required to make inlining of svg images below 10k work (again)?

[tilman]

Is there a Option to re-activate base64 import for SVGs? I'm using SVGs in my CSS and i don't like the workflow of manually transforming it to base64 first.