JSFiddle - React, Tailwind, and code Playground

HTML

<svg hidden style="display: none;">
  <defs>
    <circle id="Circle" style="fill: red" r="10"/>
  </defs>
</svg>

<button class="js-button">
  <svg width="100" height="100">
    <use x="10" y="10" xlink:href="#Circle" /> 
  </svg>
</button>

<script>
  (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
    var delegate = require('component-delegate');

    delegate.bind(document, 'svg', 'click', function (e) {
      console.log(e.delegateTarget);
    });
  },{"component-delegate":3}],2:[function(require,module,exports){
    /**
     * Module Dependencies
     */

    try {
      var matches = require('matches-selector')
      } catch (err) {
        var matches = require('component-matches-selector')
        }

    /**
     * Export `closest`
     */

    module.exports = closest

    /**
     * Closest
     *
     * @param {Element} el
     * @param {String} selector
     * @param {Element} scope (optional)
     */

    function closest (el, selector, scope) {
      scope = scope || document.documentElement;

      // walk up the dom
      while (el && el !== scope) {
        if (matches(el, selector)) return el;
        el = el.parentNode;
      }

      // check scope for match
      return matches(el, selector) ? el : null;
    }

  },{"component-matches-selector":5,"matches-selector":5}],3:[function(require,module,exports){
    /**
     * Module dependencies.
     */

    try {
      var closest = require('closest');
    } catch(err) {
      var closest = require('component-closest');
    }

    try {
      var event =...