More flexibility for templating output component

I’d love to use this module but would like to do some different things with the output component. I’m not sure what the best way to approach this would be — whether providing a slew of new options, or a templating system that would allow custom, or something else.

Here are things that I would like to do:

• Check propTypes to ensure that the user has provided style.width and style.height, which are often necessary for IE.
• Add focusable="false" to the every svg element.
• Add an aria-labelled attribute to the svg element whose value is a generated id that is used by a <title> element that is the first child of the svg, which receives this.props.title.

[sleexyz]

For anybody who might be looking at this and wonder how to add focusable="false" on every SVG element:

The following is a way to do this in your webpack config, provided you are on react-svg-loader@^2.0.0:

      {
        test: /\.svg$/,
        use: [
          {
            loader: "babel-loader"
          },
          {
            loader: "react-svg-loader",
            options: {
              svgo: {
                plugins: [
                  { addAttributesToSVGElement: { attributes: [ 'focusable="false"' ] } }
                ]
              }
            }
          }
        ]
      }

You could do this for any attribute. For example, we needed aria-hidden="true" on every SVG element

[petermikitsh]

@sleexyz Thank you for sharing how to add focusable='false' to all SVG elements. Your configuration worked for my webpack setup.