gatsby-theme-wordpress-mdx/src/components/Icon/Icon.js

<p align="center"> <img width='200px' alt="Gatsby Theme" src="https://raw.githubusercontent.com/artezan/gatsby-theme-wordpress-mdx/master/%40artezan/gatsby-theme-wordpress-mdx/dn.png" />

import * as React from 'react'

export const Icon = ({
  style,
  className,
  iconPath,
  iconFill = 'currentcolor',
  iconSize = 24,
  showBackground = true
}) => (
  <svg
    sx={{ variant: 'svgMdxWpx' }}
    style={{ ...style }}
    className={`${className}`}
    width={iconSize}
    height={iconSize}
    viewBox={`0 0 24 24`}
    preserveAspectRatio="xMidYMid meet"
    x="0"
    y="0"
    id={iconPath}
  >
    <path d={iconPath} fill={iconFill} />
    {/* {showBackground && <path d="M0 0h24v24H0z" fill="none" />} */}
  </svg>
)