gilbarbara/react-inlinesvg

Convert class to className in imported SVG data

teknetia opened this issue · 7 comments

teknetia commented

Currently when importing an SVG that includes class="" items they aren't converted to className="" causing DOM errors as below. Ideally, they should be changed as part of the inlining process to prevent issues.

react-dom.development.js:506 Warning: Invalid DOM property `class`. Did you mean `className`?
    in div (created by TabBar)
    in div (created by TabBar)
    in TabBar (created by App)
    in div (created by App)
    in App
gilbarbara commented

Can you please try the next version?

npm i react-inlinesvg@next
teknetia commented

So I tried that though am welcome to be told I have done it wrong!

npm remove react-inlinesvg followed by npm i react-inlinesvg@next then run the project. Now the SVGs don't appear at all though I can still see their code in the resultant HTML so I am a little lost for ideas on why that is the case.

I still get the same error in the inspector.

teknetia commented

Did a quick downgrade test and they do come back once I downgrade back to the current release version. I also tried an SVG with no class="whatever" tags to see if it was related to them. Dropped a sample SVG below in case it helps.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 6">
  <defs>
    <path id="nav-settings-a" d="M5 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm7 0a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm7 0a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
  </defs>
  <g fill="none" fill-rule="evenodd" transform="translate(-2 -9)">
    <mask id="nav-settings-b" fill="#fff">
      <use xlink:href="#nav-settings-a"/>
    </mask>
    <g fill="#fff" class="icon-base" mask="url(#nav-settings-b)">
      <path d="M0 0h24v24H0z"/>
    </g>
  </g>
</svg>
gilbarbara commented

I just tried with your example SVG and it got converted properly with the @next version, so I think it is a problem with your setup.

<svg
    key="0-0"
    viewBox="0 0 20 6"
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
  >
    <defs key="1-2">
      <path
        d="M5 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm7 0a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm7 0a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"
        id="nav-settings-a"
        key="2-1"
      />
    </defs>
    <g
      fill="none"
      fillRule="evenodd"
      key="1-4"
      transform="translate(-2 -9)"
    >
      <mask
        id="nav-settings-b"
        key="2-1"
      >
        <use
          key="3-1"
          xlinkHref="#nav-settings-a"
        />
      </mask>
      <g
        className="icon-base"
        fill="#f04"
        key="2-3"
        mask="url(#nav-settings-b)"
      >
        <path
          d="M0 0h24v24H0z"
          key="3-1"
        />
      </g>
    </g>
  </svg>
teknetia commented

If it is a problem with my setup where could that issue lie? I am using it as below:

import SVG from 'react-inlinesvg';

...other crap and React render()...

<SVG src="./img/icons/nav_settings.svg" uniquifyIDs />

Do I possibly need to be calling the SVG tag a little differently? There is nothing related to this in my webpack config, just a straight-up file copy of the /img directory.

gilbarbara commented

Is it working at all with src="./img/icons/nav_settings.svg"?
I usually load local files with src={require('./local.svg')}. This will also bundle the SVG in your build directory without the need to copy it.

But if you using local SVGs I think it would be better to use SVGR in webpack to convert them to React components instead of using this package.

gilbarbara commented

If you're still having problems after changing your setup, let me know.