1

I am using HeroIcons for Next.Js app but get conscious about how they organised their package architecture. They are returning icons like this:

const React = require("react");

function ArchiveIcon(props, svgRef) {
  return /*#__PURE__*/React.createElement("svg", Object.assign({
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    viewBox: "0 0 24 24",
    strokeWidth: 2,
    stroke: "currentColor",
    "aria-hidden": "true",
    ref: svgRef
  }, props), /*#__PURE__*/React.createElement("path", {
    strokeLinecap: "round",
    strokeLinejoin: "round",
    d: "M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
  }));
}

const ForwardRef = React.forwardRef(ArchiveIcon);
module.exports = ForwardRef;

but my question is why can't they just return like this:

function ArchiveIcon({className}) {

return <svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <path
    fill="#000"
    fillRule="evenodd"
    d="M11.353 2H2v9.334L12.66 22 22 12.653 11.353 2zm-7.242 8.459V4.112h6.368l8.536 8.542-6.356 6.359-8.548-8.554zm4.096-2.252v-2.07h-2.07v2.07h2.07z"
    clipRule="evenodd"
  ></path>
</svg>

};


Instead of using **React.CreateElement('svg')** and creating a new Dom Element?
Suleman Ahmad
  • 452
  • 1
  • 5
  • 14

1 Answers1

0

Why React HeroIcons architecture contains React.CreateElement and not returning plain svg

The answer is pretty simple - using JSX such as <svg> requires Babel compiler because it's not a pure javascript (it's not readable by browser). Using React.createElement requires just vanilla javascript, so you don't have to worry about compiling it.

The file you are reading is probably already a post-compiled code by Babel, so every JSX code such as <svg> was compiled to React.createElement('svg', ...).

kind user
  • 40,029
  • 7
  • 67
  • 77
  • So if we create our own icons library then it's better to use React.createElement rather than returning just plain svg? – Suleman Ahmad Nov 11 '22 at 14:27
  • 1
    @SulemanAhmad If you don't want to worry about `Babel` and transforming `JSX` into pure javascript - yes. But `JSX` was created to make things simple - it's much easier to write `JSX` code than using all this native methods such as `createElement(...)`. – kind user Nov 11 '22 at 14:28