v3 version not compatible with styled-component about react-svg HOT 5 CLOSED

Hmm, yip that's not looking good 😓 Along with that naming change you mentioned, any extra non-documented props are now being applied to the wrapper element, which could be affecting things too.

I'll dig into this later today. There should be a couple ways around this, but I'll need to refresh my brain re styled-components.

from react-svg.

One way around this is to tweak that CSS you have slightly, so that the svg element is still being targeted by your styles:

const FilterIcon = styled(ReactSVG)`
  & svg {
    fill: black;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    margin-left: 3px;
  }
`;

Keen to hear how this works out for you 🙏

from react-svg.

@tanem thanks for the solution, it works like magic !

to upgrade to this new syntax i have to change lots of code, so is this new syntax be the final syntax in future versions ?

from react-svg.

inspired by your solution, i wrapped ReactSVG in common component :

import React from 'react'
import PropTypes from 'prop-types'
import ReactSVG from 'react-svg'

const NormalImg = ({ className, src, alt }) => (
  <img className={className} src={src} alt={alt} />
)

const Img = ({ className, src, alt }) => {
  if (/\.(svg)$/i.test(src)) {
    return <ReactSVG svgClassName={className} path={src} />
  }
  return <NormalImg className={className} src={src} alt={alt} />
}

Img.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string,
  className: PropTypes.string,
}

Img.defaultProps = {
  alt: 'coderplanets image',
  className: '',
}

export default Img

a usage example:

const SearchLogo = styled(Img)`
  width: 22px;
  height: 22px;
  fill: #0098b8;
`
<SearchLogo src={`${ICON_ASSETS}/cmd/search.svg`} />

thanks again @tanem

from react-svg.

You're welcome @mydearxym, glad to hear it's fixed 🎉

To answer your question about API stability, I can't give you a guarantee that this'll be the final version 🙈 However I can say that I consider breaking changes very carefully before actually applying them, and I ensure that if something is a breaking change it'll be tagged as a major version. At least that way you can continue using the older version without your system breaking until you're ready to upgrade.

I like your idea about common components. I would have approached things in a similar way so that you only have to change things in one or very few places in case of a future major version upgrade to ReactSVG. Nice one 👍

from react-svg.