React icons full SVG vs.

JavaScript performance comparison

Revision 2 of this test case created by Agop

Preparation code

<svg className="container" xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 0; height: 0" width="0" height="0">
	<defs>
    	<symbol id="umbrella" viewBox="0 0 32 32">
        	<path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291 0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0 0.547 0.444 0.991 1 0.991 0.552 0 1-0.451 1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825 15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224 0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z"></path>
		</symbol>

		<symbol id="office" viewBox="0 0 188.5 188.5">
		    <g isolation="isolate">
		      <circle id="background" fill="#2179c1" cx="94.2" cy="94.2" r="94.2"/>
		      <path fill="#fff" d="M50.3 69.8h10.4v72.51H50.3z"/>
		      <path fill="#474f59" d="M50.3 77.5h10.4v57.18H50.3z"/>
		      <path fill="#353f49" d="M60.7 77.5h38.9v57.19H60.7z"/>
		      <path fill="#d9d8d7" d="M60.7 69.8h38.9v7.66H60.7z"/>
		      <path fill="#474f59" d="M60.7 134.7h38.9v7.66H60.7z"/>
		      <g>
		        <path fill="#fff" d="M19.7 105h75.9v12.95H19.7z"/>
		        <path fill="#f77b55" d="M28.4 105h58.5v12.95H28.4z"/>
		        <path fill="#fff" d="M37.7 112.2h39.9v1.73H37.7zM37.7 109h19.9v1.73H37.7z"/>
		        <g>
		          <path fill="#76d0de" d="M15.7 132.3h83.9v10.07H15.7z"/>
		          <path fill="#fff" d="M30.1 132.3h7.2v10.07h-7.2zM25.3 132.3h2.4v10.07h-2.4zM78 132.3h7.2v10.07H78zM87.6 132.3H90v10.07h-2.4z"/>
		        </g>
		        <g>
		          <path fill="#353f49" d="M92.6 118.8a3.1 3.1 0 0 0-2.2-.9H21.8v1.8h68.6a1.3 1.3 0 0 1 1.3 1.3v8.1a1.3 1.3 0 0 1-1.3 1.3H21.8v1.8h68.6a3.1 3.1 0 0 0 3.1-3.1V121a3.1 3.1 0 0 0-.9-2.2z"/>
		          <path fill="#fff" d="M23.6 130.4v-10.7h66.8a1.3 1.3 0 0 1 1.3 1.3v8.1a1.3 1.3 0 0 1-1.3 1.3H23.6z"/>
		          <path fill="#cccbca" d="M90.4 119.7H57.6v10.7h32.8a1.3 1.3 0 0 0 1.3-1.3V121a1.3 1.3 0 0 0-1.3-1.3z"/>
		          <g className="cls-10">
		            <path fill="#fff" d="M57 119.2h36.5v.52H57z"/>
		            <path fill="#f2f2f2" d="M57 120.3h36.5v.52H57zM57 121.5h36.5v.52H57zM57 122.6h36.5v.52H57zM57 123.7h36.5v.52H57zM57 124.8h36.5v.52H57zM57 126h36.5v.52H57zM57 127.1h36.5v.52H57zM57 128.2h36.5v.52H57zM57 129.3h36.5v.52H57z"/>
		            <path fill="#fff" d="M57 130.4h36.5v.52H57z"/>
		          </g>
		          <path fill="#f77b55" d="M83.4 127.6h-4.5v9.9l2.2-2.2 2.3 2.2v-9.9z"/>
		        </g>
		      </g>
		      <g id="lamp">
		        <path fill="#474f59" d="M144.156 132.726l38.352-49.98 3 2.3-38.353 49.98z"/>
		        <path fill="#474f59" d="M142.672 38.69l2.94-2.406 39.884 48.728-2.94 2.407z"/>
		        <circle fill="#232e38" cx="183.2" cy="85.2" r="5.2" transform="rotate(-87.5 183.15 85.242)"/>
		        <path fill="#232e38" d="M104.4 142.3h55.1v-3.1a6.3 6.3 0 0 0-6.3-6.3h-42.5a6.3 6.3 0 0 0-6.3 6.3v3.1z"/>
		        <g>
		          <path fill="#232e38" d="M143.2 31.1a5.2 5.2 0 0 1-3.4 9.8L127 36.5l3.4-9.8z"/>
		          <path id="bulb" fill="#fff" opacity="0.23" d="M125.8 64.2a10.3 10.3 0 1 1-6.4-13.1 10.3 10.3 0 0 1 6.4 13.1z"/>
		          <path fill="#232e38" d="M90 52l52 17.8-5.9-29.1-23.6-8.1L90 52z"/>
		          <path fill="#474f59" d="M112.416 32.603l4.016-11.732 23.624 8.09-4.016 11.73z"/>
		          <path fill="#232e38" d="M122.26 22.927l1.132-3.312 12.167 4.166-1.135 3.312z"/>
		        </g>
		        <!-- <path id="light" fill="#474f59" mix-blend-mode="screen" d="M142 142.3V69.8L90 52l-64.7 90.3H142z"/> -->
		      </g>
		      <g>
		        <path fill="#f2f2f2" d="M15.7 151.9L0 147.1l15.7-4.8v9.6z"/>
		        <path fill="#cccbca" d="M0 147.1l15.7 4.8v-3L0 147.1z"/>
		        <path fill="#f77b55" d="M15.7 142.3h157.1v9.56H15.7z"/>
		        <path fill="#ee643c" d="M15.7 148.9h157.1v3H15.7z"/>
		        <path fill="#353f49" d="M6.1 149L0 147.1l6.1-1.9v3.8z"/>
		        <path fill="#232e38" d="M6.1 149L0 147.1l6.1.7v1.2z"/>
		        <path fill="#f2f2f2" d="M172.8 142.3h5.5v9.56h-5.5z"/>
		        <path fill="#cccbca" d="M172.8 148.9h5.5v3h-5.5z"/>
		        <path fill="#474f59" d="M183.7 151.9a4.8 4.8 0 0 0 4.8-4.8 4.8 4.8 0 0 0-4.8-4.8h-5.4v9.6h5.4z"/>
		        <path fill="#232e38" d="M187.1 143.7a4.8 4.8 0 0 0-1.9-1.1 4.9 4.9 0 0 1 .3 1.5 4.8 4.8 0 0 1-4.8 4.8h-2.4v3h5.4a4.8 4.8 0 0 0 3.4-8.2z"/>
		      </g>
		    </g>
		</symbol>
	</defs>
</svg>

<script src="https://fb.me/react-0.14.4.min.js"></script>
<script src="https://fb.me/react-dom-0.14.4.min.js"></script>

<div id="main"></div>

<style>
.office {  margin: 10px 20px;}
.cls-1 {  fill: #cccbca;}
.cls-2 {  isolation: isolate;}
.cls-3 {  fill: #2179c1;}
.cls-13,.cls-4 {  fill: #fff;}
.cls-14,.cls-5 {  fill: #474f59;}
.cls-6 {  fill: #353f49;}
.cls-7 {  fill: #d9d8d7;}
.cls-8 {  fill: #f77b55;}
.cls-9 {  fill: #76d0de;}
.cls-11 {  fill: #f2f2f2;}
.cls-12 {  fill: #232e38;}
.cls-13 {  opacity: 0.23;}
.cls-14 {  mix-blend-mode: screen;}
.cls-15 {  fill: #ee643c;}
</style>
      
<script>
Benchmark.prototype.setup = function() {
  var OfficeFull = React.createClass({
    displayName: "OfficeFull",
    render: function render() {
  	  return React.createElement(
          "svg",
          { className: "office", xmlns: "http://www.w3.org/2000/svg", width: 190, height: 190, viewBox: "0 0 188.5 188.5" },
          React.createElement(
            "g",
            { className: "cls-2" },
            React.createElement("circle", { id: "background", className: "cls-3", cx: "94.2", cy: "94.2", r: "94.2" }),
            React.createElement("path", { className: "cls-4", d: "M50.3 69.8h10.4v72.51H50.3z" }),
            React.createElement("path", { className: "cls-5", d: "M50.3 77.5h10.4v57.18H50.3z" }),
            React.createElement("path", { className: "cls-6", d: "M60.7 77.5h38.9v57.19H60.7z" }),
            React.createElement("path", { className: "cls-7", d: "M60.7 69.8h38.9v7.66H60.7z" }),
            React.createElement("path", { className: "cls-5", d: "M60.7 134.7h38.9v7.66H60.7z" }),
            React.createElement(
              "g",
              null,
              React.createElement("path", { className: "cls-4", d: "M19.7 105h75.9v12.95H19.7z" }),
              React.createElement("path", { className: "cls-8", d: "M28.4 105h58.5v12.95H28.4z" }),
              React.createElement("path", { className: "cls-4", d: "M37.7 112.2h39.9v1.73H37.7zM37.7 109h19.9v1.73H37.7z" }),
              React.createElement(
                "g",
                null,
                React.createElement("path", { className: "cls-9", d: "M15.7 132.3h83.9v10.07H15.7z" }),
                React.createElement("path", { className: "cls-4", d: "M30.1 132.3h7.2v10.07h-7.2zM25.3 132.3h2.4v10.07h-2.4zM78 132.3h7.2v10.07H78zM87.6 132.3H90v10.07h-2.4z" })
              ),
              React.createElement(
                "g",
                null,
                React.createElement("path", { className: "cls-6", d: "M92.6 118.8a3.1 3.1 0 0 0-2.2-.9H21.8v1.8h68.6a1.3 1.3 0 0 1 1.3 1.3v8.1a1.3 1.3 0 0 1-1.3 1.3H21.8v1.8h68.6a3.1 3.1 0 0 0 3.1-3.1V121a3.1 3.1 0 0 0-.9-2.2z" }),
                React.createElement("path", { className: "cls-4", d: "M23.6 130.4v-10.7h66.8a1.3 1.3 0 0 1 1.3 1.3v8.1a1.3 1.3 0 0 1-1.3 1.3H23.6z" }),
                React.createElement("path", { className: "cls-1", d: "M90.4 119.7H57.6v10.7h32.8a1.3 1.3 0 0 0 1.3-1.3V121a1.3 1.3 0 0 0-1.3-1.3z" }),
                React.createElement(
                  "g",
                  { className: "cls-10" },
                  React.createElement("path", { className: "cls-4", d: "M57 119.2h36.5v.52H57z" }),
                  React.createElement("path", { className: "cls-11", d: "M57 120.3h36.5v.52H57zM57 121.5h36.5v.52H57zM57 122.6h36.5v.52H57zM57 123.7h36.5v.52H57zM57 124.8h36.5v.52H57zM57 126h36.5v.52H57zM57 127.1h36.5v.52H57zM57 128.2h36.5v.52H57zM57 129.3h36.5v.52H57z" }),
                  React.createElement("path", { className: "cls-4", d: "M57 130.4h36.5v.52H57z" })
                ),
                React.createElement("path", { className: "cls-8", d: "M83.4 127.6h-4.5v9.9l2.2-2.2 2.3 2.2v-9.9z" })
              )
            ),
            React.createElement(
              "g",
              { id: "lamp" },
              React.createElement("path", { className: "cls-5", d: "M144.156 132.726l38.352-49.98 3 2.3-38.353 49.98z" }),
              React.createElement("path", { className: "cls-5", d: "M142.672 38.69l2.94-2.406 39.884 48.728-2.94 2.407z" }),
              React.createElement("circle", { className: "cls-12", cx: "183.2", cy: "85.2", r: "5.2", transform: "rotate(-87.5 183.15 85.242)" }),
              React.createElement("path", { className: "cls-12", d: "M104.4 142.3h55.1v-3.1a6.3 6.3 0 0 0-6.3-6.3h-42.5a6.3 6.3 0 0 0-6.3 6.3v3.1z" }),
              React.createElement(
                "g",
                null,
                React.createElement("path", { className: "cls-12", d: "M143.2 31.1a5.2 5.2 0 0 1-3.4 9.8L127 36.5l3.4-9.8z" }),
                React.createElement("path", { id: "bulb", className: "cls-13", d: "M125.8 64.2a10.3 10.3 0 1 1-6.4-13.1 10.3 10.3 0 0 1 6.4 13.1z" }),
                React.createElement("path", { className: "cls-12", d: "M90 52l52 17.8-5.9-29.1-23.6-8.1L90 52z" }),
                React.createElement("path", { className: "cls-5", d: "M112.416 32.603l4.016-11.732 23.624 8.09-4.016 11.73z" }),
                React.createElement("path", { className: "cls-12", d: "M122.26 22.927l1.132-3.312 12.167 4.166-1.135 3.312z" })
              )
              //React.createElement("path", { id: "light", className: "cls-14", d: "M142 142.3V69.8L90 52l-64.7 90.3H142z" })
            ),
            React.createElement(
              "g",
              null,
              React.createElement("path", { className: "cls-11", d: "M15.7 151.9L0 147.1l15.7-4.8v9.6z" }),
              React.createElement("path", { className: "cls-1", d: "M0 147.1l15.7 4.8v-3L0 147.1z" }),
              React.createElement("path", { className: "cls-8", d: "M15.7 142.3h157.1v9.56H15.7z" }),
              React.createElement("path", { className: "cls-15", d: "M15.7 148.9h157.1v3H15.7z" }),
              React.createElement("path", { className: "cls-6", d: "M6.1 149L0 147.1l6.1-1.9v3.8z" }),
              React.createElement("path", { className: "cls-12", d: "M6.1 149L0 147.1l6.1.7v1.2z" }),
              React.createElement("path", { className: "cls-11", d: "M172.8 142.3h5.5v9.56h-5.5z" }),
              React.createElement("path", { className: "cls-1", d: "M172.8 148.9h5.5v3h-5.5z" }),
              React.createElement("path", { className: "cls-5", d: "M183.7 151.9a4.8 4.8 0 0 0 4.8-4.8 4.8 4.8 0 0 0-4.8-4.8h-5.4v9.6h5.4z" }),
              React.createElement("path", { className: "cls-12", d: "M187.1 143.7a4.8 4.8 0 0 0-1.9-1.1 4.9 4.9 0 0 1 .3 1.5 4.8 4.8 0 0 1-4.8 4.8h-2.4v3h5.4a4.8 4.8 0 0 0 3.4-8.2z" })
            )
          )
        );
    }
  });
  
  var OfficeUse = React.createClass({
    displayName: "OfficeUse",
    render: function render() {
      return React.createElement(
        "svg",
        { className: "office", xmlns: "http://www.w3.org/2000/svg", width: 190, height: 190, viewBox: "0 0 188.5 188.5" },
        React.createElement("use", { xlinkHref: '#office' })
      );
    }
  });
  

};
</script>

Preparation code output

<svg className="container" xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 0; height: 0" width="0" height="0"> <defs> <symbol id="umbrella" viewBox="0 0 32 32"> <path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291 0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0 0.547 0.444 0.991 1 0.991 0.552 0 1-0.451 1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825 15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224 0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z"></path> </symbol> <symbol id="office" viewBox="0 0 188.5 188.5"> <g isolation="isolate"> <circle id="background" fill="#2179c1" cx="94.2" cy="94.2" r="94.2"/> <path fill="#fff" d="M50.3 69.8h10.4v72.51H50.3z"/> <path fill="#474f59" d="M50.3 77.5h10.4v57.18H50.3z"/> <path fill="#353f49" d="M60.7 77.5h38.9v57.19H60.7z"/> <path fill="#d9d8d7" d="M60.7 69.8h38.9v7.66H60.7z"/> <path fill="#474f59" d="M60.7 134.7h38.9v7.66H60.7z"/> <g> <path fill="#fff" d="M19.7 105h75.9v12.95H19.7z"/> <path fill="#f77b55" d="M28.4 105h58.5v12.95H28.4z"/> <path fill="#fff" d="M37.7 112.2h39.9v1.73H37.7zM37.7 109h19.9v1.73H37.7z"/> <g> <path fill="#76d0de" d="M15.7 132.3h83.9v10.07H15.7z"/> <path fill="#fff" d="M30.1 132.3h7.2v10.07h-7.2zM25.3 132.3h2.4v10.07h-2.4zM78 132.3h7.2v10.07H78zM87.6 132.3H90v10.07h-2.4z"/> </g> <g> <path fill="#353f49" d="M92.6 118.8a3.1 3.1 0 0 0-2.2-.9H21.8v1.8h68.6a1.3 1.3 0 0 1 1.3 1.3v8.1a1.3 1.3 0 0 1-1.3 1.3H21.8v1.8h68.6a3.1 3.1 0 0 0 3.1-3.1V121a3.1 3.1 0 0 0-.9-2.2z"/> <path fill="#fff" d="M23.6 130.4v-10.7h66.8a1.3 1.3 0 0 1 1.3 1.3v8.1a1.3 1.3 0 0 1-1.3 1.3H23.6z"/> <path fill="#cccbca" d="M90.4 119.7H57.6v10.7h32.8a1.3 1.3 0 0 0 1.3-1.3V121a1.3 1.3 0 0 0-1.3-1.3z"/> <g className="cls-10"> <path fill="#fff" d="M57 119.2h36.5v.52H57z"/> <path fill="#f2f2f2" d="M57 120.3h36.5v.52H57zM57 121.5h36.5v.52H57zM57 122.6h36.5v.52H57zM57 123.7h36.5v.52H57zM57 124.8h36.5v.52H57zM57 126h36.5v.52H57zM57 127.1h36.5v.52H57zM57 128.2h36.5v.52H57zM57 129.3h36.5v.52H57z"/> <path fill="#fff" d="M57 130.4h36.5v.52H57z"/> </g> <path fill="#f77b55" d="M83.4 127.6h-4.5v9.9l2.2-2.2 2.3 2.2v-9.9z"/> </g> </g> <g id="lamp"> <path fill="#474f59" d="M144.156 132.726l38.352-49.98 3 2.3-38.353 49.98z"/> <path fill="#474f59" d="M142.672 38.69l2.94-2.406 39.884 48.728-2.94 2.407z"/> <circle fill="#232e38" cx="183.2" cy="85.2" r="5.2" transform="rotate(-87.5 183.15 85.242)"/> <path fill="#232e38" d="M104.4 142.3h55.1v-3.1a6.3 6.3 0 0 0-6.3-6.3h-42.5a6.3 6.3 0 0 0-6.3 6.3v3.1z"/> <g> <path fill="#232e38" d="M143.2 31.1a5.2 5.2 0 0 1-3.4 9.8L127 36.5l3.4-9.8z"/> <path id="bulb" fill="#fff" opacity="0.23" d="M125.8 64.2a10.3 10.3 0 1 1-6.4-13.1 10.3 10.3 0 0 1 6.4 13.1z"/> <path fill="#232e38" d="M90 52l52 17.8-5.9-29.1-23.6-8.1L90 52z"/> <path fill="#474f59" d="M112.416 32.603l4.016-11.732 23.624 8.09-4.016 11.73z"/> <path fill="#232e38" d="M122.26 22.927l1.132-3.312 12.167 4.166-1.135 3.312z"/> </g> <!-- <path id="light" fill="#474f59" mix-blend-mode="screen" d="M142 142.3V69.8L90 52l-64.7 90.3H142z"/> --> </g> <g> <path fill="#f2f2f2" d="M15.7 151.9L0 147.1l15.7-4.8v9.6z"/> <path fill="#cccbca" d="M0 147.1l15.7 4.8v-3L0 147.1z"/> <path fill="#f77b55" d="M15.7 142.3h157.1v9.56H15.7z"/> <path fill="#ee643c" d="M15.7 148.9h157.1v3H15.7z"/> <path fill="#353f49" d="M6.1 149L0 147.1l6.1-1.9v3.8z"/> <path fill="#232e38" d="M6.1 149L0 147.1l6.1.7v1.2z"/> <path fill="#f2f2f2" d="M172.8 142.3h5.5v9.56h-5.5z"/> <path fill="#cccbca" d="M172.8 148.9h5.5v3h-5.5z"/> <path fill="#474f59" d="M183.7 151.9a4.8 4.8 0 0 0 4.8-4.8 4.8 4.8 0 0 0-4.8-4.8h-5.4v9.6h5.4z"/> <path fill="#232e38" d="M187.1 143.7a4.8 4.8 0 0 0-1.9-1.1 4.9 4.9 0 0 1 .3 1.5 4.8 4.8 0 0 1-4.8 4.8h-2.4v3h5.4a4.8 4.8 0 0 0 3.4-8.2z"/> </g> </g> </symbol> </defs> </svg> <div id="main"></div> <style> .office { margin: 10px 20px;} .cls-1 { fill: #cccbca;} .cls-2 { isolation: isolate;} .cls-3 { fill: #2179c1;} .cls-13,.cls-4 { fill: #fff;} .cls-14,.cls-5 { fill: #474f59;} .cls-6 { fill: #353f49;} .cls-7 { fill: #d9d8d7;} .cls-8 { fill: #f77b55;} .cls-9 { fill: #76d0de;} .cls-11 { fill: #f2f2f2;} .cls-12 { fill: #232e38;} .cls-13 { opacity: 0.23;} .cls-14 { mix-blend-mode: screen;} .cls-15 { fill: #ee643c;} </style>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Full SVG
ReactDOM.render(React.createElement(OfficeFull, null), document.querySelector("#main"));
pending…
Use
ReactDOM.render(React.createElement(OfficeUse, null), document.querySelector("#main"));
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments