Internet Explorer 11 (focusable, tabindex)

[ivarne]

Sadly we need to support IE 11 on our site, and for some reason IE make tab navigation stop on every svg icon unless you use the non-standard <svg focusable="false"... property. Is there any way I can add this during svgr processing time, so that I can avoid an extra post processing step, or have to write <MyIcon focusable="false"/>?

See: https://stackoverflow.com/q/18646111/112019

Basically I want an option to create components like

import React from "react";

const Bed = props => (
  <svg focusable="false" viewBox="0 0 20 13" width="1em" height="1em" {...props}>
    <path
      fill="#333F52"
      fillRule="evenodd"
      d="M18.821 8.143c.332 0 .608.275.608.607V13H17v-2.429H2.429V13H0V1.464C0 1.132.275.857.607.857h1.214c.332 0 .608.275.608.607v6.679H18.82zM7.893 5.107a2.433 2.433 0 0 1-2.429 2.429 2.433 2.433 0 0 1-2.428-2.429A2.433 2.433 0 0 1 5.464 2.68a2.433 2.433 0 0 1 2.429 2.428zm11.536 2.429H8.5V3.893c0-.332.275-.607.607-.607h6.679a3.644 3.644 0 0 1 3.643 3.643v.607z"
    />
  </svg>
);

export default Bed;

[gregberge]

The simplest solution is actually to use a specific template. You can inspire from the default one.

[gregberge]

Follow up #87