Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fallback title is not working #943

Open
AnweshGangula opened this issue Feb 7, 2024 · 1 comment
Open

fallback title is not working #943

AnweshGangula opened this issue Feb 7, 2024 · 1 comment

Comments

@AnweshGangula
Copy link

AnweshGangula commented Feb 7, 2024

🐛 Bug Report

The documentation says that

...If titleProp is set to true and no title is provided (title={undefined}) at render time, this will fallback to an existing title element in the svg if exists.

But, setting titleProp: true in Next.js webpack doesn't add title even if the SVG itself has a title element in it.

Note that I'm using typescript in my project

To Reproduce

  1. Create a Nextjs project and configure SVGR in it
    config.module.rules.push({
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/, // { not: /\.(css|scss|sass)$/ },
        resourceQuery: /svgr/, // only use svgr to load svg if path ends with *.svg?svgr
        use: [{
            loader: "@svgr/webpack",
            options:{
                titleProp: true, // default is false
                descProp: true, // default is false

            }
        }],
    });
  1. Create an SVG with <title> element in it
  2. import the ReactSvgImport into any component in React import SVG from './../abc.svg?svgr
  3. Use the imported SVG in React JSX <ReactSvgImport />

Expected behavior

The resultant SVG in DOM should fallback to the existing title element from the root SVG

@AnweshGangula
Copy link
Author

I tried this out in the Playground and noticed that the resultant TSX doesn't consider titleId as an optional property. Could this be an issue?

<title id={titleId}>{"Rectangle 5"}</title>

import * as React from "react"
import { SVGProps } from "react"
interface SVGRProps {
  title?: string;
  titleId?: string;
}
const SvgComponent = ({
  title,
  titleId,
  ...props
}: SVGProps<SVGSVGElement> & SVGRProps) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={48}
    height={1}
    title="abc"
    aria-labelledby={titleId}
    {...props}
  >
    {title === undefined ? (
      <title id={titleId}>{"Rectangle 5"}</title>
    ) : title ? (
      <title id={titleId}>{title}</title>
    ) : null}
    <path fill="currentColor" fillRule="evenodd" d="M0 0h48v1H0z" />
  </svg>
)
export default SvgComponent

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant