chakra.path replaces d property to display, making the svg not display

Bug report

When using chakra.path svgs will not display.

Describe the bug

When using chakra.path svgs will not display, this is because the path d prop is being confused by chakra-ui as shorthand for the css display property and is being changed to display in the resulting html.

To reproduce

Provided is a react component that displays an svg. If you change chakra.path to path the path items will display appropriately.

import * as React from "react";
import { chakra, HTMLChakraProps } from "@chakra-ui/react";

const ChatAppLogo = (props: {} & HTMLChakraProps<"svg">) => {
  return (
    <chakra.svg
      {...props}
      width="128"
      height="128"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <chakra.path
        d="M82.667 16H56c-22.08 0-40 17.92-40 40 0 17.387 11.147 32.16 26.667 37.653v29.014L69.333 96h13.334c22.08 0 40-17.92 40-40s-17.92-40-40-40z"
        fill="pink"
      />
      <chakra.path
        d="M72 5.333H45.333c-22.08 0-40 17.92-40 40C5.333 62.72 16.48 77.493 32 82.987V112l26.667-26.667H72c22.08 0 40-17.92 40-40s-17.92-40-40-40z"
        fill="red"
      />
      <chakra.path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M31.388 48.827c-.294 1.288-.916 2.34-1.867 3.159-1.219 1.054-2.828 1.582-4.828 1.582-2.188 0-3.91-.735-5.168-2.203-1.25-1.477-1.875-3.5-1.875-6.07V44.25c0-1.64.289-3.086.867-4.336.578-1.25 1.402-2.207 2.473-2.87 1.078-.673 2.328-1.009 3.75-1.009 1.968 0 3.554.528 4.757 1.582.94.825 1.57 1.91 1.89 3.254v-5.539h3.388v6.703c.898-1.078 2.027-1.617 3.386-1.617 2.75 0 4.145 1.598 4.184 4.793v3.468a3.424 3.424 0 011.363-2.003c1-.719 2.441-1.082 4.324-1.09h1.559v-.726c0-.586-.153-1.055-.457-1.407-.297-.351-.77-.527-1.418-.527-.57 0-1.02.137-1.348.41-.32.274-.48.649-.48 1.125H42.5c0-.734.226-1.414.68-2.039.453-.625 1.093-1.113 1.921-1.465.829-.359 1.758-.539 2.79-.539 1.562 0 2.8.395 3.714 1.184.24.203.448.427.625.673v-1.622h1.852v-3.118h3.386v3.118h2.168v2.484H57.47v6.328c0 .469.09.805.27 1.008.18.203.523.305 1.031.305.108 0 .212-.003.313-.007L64.48 36.27h3.258l5.019 13.41v-9.027h3.14l.118 1.242c.82-.985 1.89-1.477 3.21-1.477 1.563 0 2.778.578 3.645 1.735.671.894 1.083 2.05 1.235 3.469v-4.97h3.14l.117 1.243c.82-.985 1.89-1.477 3.211-1.477 1.563 0 2.778.578 3.645 1.735.867 1.156 1.3 2.75 1.3 4.78v.177c0 1.953-.445 3.52-1.335 4.699-.883 1.172-2.078 1.758-3.586 1.758-1.282 0-2.317-.446-3.106-1.336v5.976h-3.386v-9.847c-.155 1.383-.578 2.533-1.27 3.449-.883 1.172-2.078 1.758-3.586 1.758-1.281 0-2.316-.446-3.105-1.336v5.976h-3.387v-4.875h-2.37l-1.184-3.515H63.04l-1.172 3.515H59.52a6.981 6.981 0 01-1.805.235c-2.375 0-3.585-1.2-3.632-3.598v-6.832h-1.39c.197.521.296 1.111.296 1.77v5.496c.008 1.203.176 2.113.504 2.73v.2h-3.422c-.156-.305-.27-.684-.34-1.137-.82.914-1.886 1.37-3.199 1.37-1.242 0-2.273-.359-3.094-1.077-.552-.489-.916-1.064-1.093-1.725v2.568h-3.387v-8.027c0-.727-.156-1.262-.469-1.605-.312-.352-.832-.528-1.558-.528-.992 0-1.711.383-2.156 1.149v9.011h-3.387v-4.506zm0-6.767h-3.32c-.086-1.102-.395-1.899-.926-2.39-.523-.5-1.324-.75-2.402-.75-1.172 0-2.051.421-2.637 1.265-.578.836-.875 2.137-.89 3.902v1.29c0 1.843.277 3.19.831 4.042.563.852 1.446 1.278 2.649 1.278 1.086 0 1.894-.247 2.425-.739.54-.5.848-1.27.926-2.308h3.344v-5.59zm17.265 8.59a2.958 2.958 0 01-1.383.328c-.515 0-.922-.137-1.218-.41a1.356 1.356 0 01-.446-1.043l.012-.2c.11-1.171 1.012-1.757 2.707-1.757h1.266v2.18c-.203.374-.516.675-.938.902zm19.601-3.68H63.99l2.12-6.387 2.145 6.387zm11.899-2.836c.421.64.632 1.55.632 2.73 0 2.649-.808 3.973-2.425 3.973-1.063 0-1.801-.418-2.215-1.254v-5.191c.398-.813 1.129-1.219 2.191-1.219.797 0 1.403.32 1.817.961zm11.347 0c.422.64.633 1.55.633 2.73 0 2.649-.809 3.973-2.426 3.973-1.063 0-1.8-.418-2.215-1.254v-5.191c.399-.813 1.13-1.219 2.192-1.219.797 0 1.402.32 1.816.961z"
        fill="darkgray"
      />
      <chakra.path
        d="M96.086 48.095h2.812l.399-11.824h-3.61l.399 11.824zM98.863 50.45c-.344-.335-.8-.503-1.371-.503-.563 0-1.02.171-1.371.515-.344.336-.516.762-.516 1.278 0 .515.172.941.516 1.277.352.336.809.504 1.371.504.57 0 1.027-.168 1.371-.504.352-.336.527-.762.527-1.277 0-.524-.175-.954-.527-1.29z"
        fill="darkgray"
      />
    </chakra.svg>
  );
};

export default ChatAppLogo;

Minimal reproduction

codesandbox

To see what should happen, navigate to src/ChatAppLogo.tsx and change all jsx tags of chakra.path to path. This will prevent chakra from replacing d with display. The issue with doing this is that I also want to get some colors from my theme provider, and would need to make a chakra.path in order to get this.

Expected behavior

I would expect that chakra.path would not replace d with display.

System information

• Version of @chakra-ui/react: 1.0.1
• Version of Node.js: v14.15.1

Additional context

I think the solution would be to not include d as a prop to chakra.path.

[joernroeder]

I’d like to bring this back to the table as not all filling certain paths in the svg with colors from the theme is something we’d like to do as well

[segunadebayo]

I wouldn’t recommend using chakra.path. Looking at the example, you really don’t need chakra.path, you can simply use path and it should work.

If you need to pass customs styles to the paths, I’d recommend adding an id to it and styling it from chakra.svg via the sx prop.