Sending the `<path>` wrapped in quotes to `<SvgIcon>` is resulting in the SVG not rendering

Question

Sending the `<path>` wrapped in quotes to `<SvgIcon>` is resulting in the SVG not rendering

When I try to use the Material-UI's SvgIcon component, the <path> element is surrounded by quotes, which is preventing the SVG from rendering properly.

https://i.stack.imgur.com/InDRt.png

I'm currently working in Storybook within an MDX file. I've attempted various methods to render the SVG, but all of them lead to the same outcome. The most basic approach I've tried is:

import { accessibility1Icon } from '@cds/core/icon';

export const Template = (args) => {
  return (
    <SvgIcon {...args}>{accessibility1Icon[1].outline}</SvgIcon>
  )
}

The content passed into <SvgIcon> does consist of a path. It does appear on the DOM (as shown in the image above), but it is encased in quotes.

What could be causing these quotes and how can I adjust the reference to avoid this issue?

javascript svg material-ui storybook

Answer 1

Answer №1

When it comes to rendering a string as JSX, it poses a challenge,
but there are ways to convert the string into JSX.

1- One approach is utilizing dangerouslySetInnerHTML:

import { accessibility1Icon } from '@cds/core/icon';

export const Template = (args) => {
  return (
    <SvgIcon {...args}>
      <g dangerouslySetInnerHTML={{ __html: accessibility1Icon[1].outline }} />
    </SvgIcon>
  )
}

2- Another option involves using html-react-parser

import { accessibility1Icon } from '@cds/core/icon';
import parse  from 'html-react-parser';

export const Template = (args) => {
  return (
    <SvgIcon {...args}>
     {parse(accessibility1Icon[1].outline)}
    </SvgIcon>
  )
}

Answer 2

When it comes to rendering a string as JSX, it poses a challenge,
but there are ways to convert the string into JSX.

1- One approach is utilizing dangerouslySetInnerHTML:

import { accessibility1Icon } from '@cds/core/icon';

export const Template = (args) => {
  return (
    <SvgIcon {...args}>
      <g dangerouslySetInnerHTML={{ __html: accessibility1Icon[1].outline }} />
    </SvgIcon>
  )
}

2- Another option involves using html-react-parser

import { accessibility1Icon } from '@cds/core/icon';
import parse  from 'html-react-parser';

export const Template = (args) => {
  return (
    <SvgIcon {...args}>
     {parse(accessibility1Icon[1].outline)}
    </SvgIcon>
  )
}

Sending the `<path>` wrapped in quotes to `<SvgIcon>` is resulting in the SVG not rendering

Answer №1

Similar questions

Employing state management in React to toggle the sidebar

Attempting to implement Vue js extensions without relying on NPM or webpack

``It seems like there was an error with WebComponents and NextJS - the hydration failed due to a mismatch between the initial UI and what was rendered on

Deliver JSX components that match one or more keys in the array of strings

Unveiling the magic: Dynamically displaying or concealing fields in Angular Reactive forms based on conditions

Chrome extension for AJAX with CORS plugin

Comparing Fetch and Axios: Which is Better?

When navigating using the next and back buttons, the active state in Angular is automatically removed

What is the best way to instantiate objects, arrays, and object-arrays in an Angular service class?

JavaScript not functioning properly for the Sibice challenge on Kattis

What is the best way to incorporate interactive columns in DataTables?

The Node.js Express server does not provide access to certain static files

What is the best way to define file paths in a webpage to ensure that the same file works seamlessly on both server and

Can anyone point out where the mistake lies in my if statement code?

What is the best way to prevent an element from reaching the border of the screen?

A guide on embedding the flag status within the image tag

The CloudWatch logs for a JavaScript Lambda function reveal that its handler is failing to load functions that are defined in external

DataGridPro from Material UI is not displaying any rows

Tomcat encounters difficulty accessing the JavaScript directory

Utilizing Angular 2 for Integration of Google Calendar API