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

The PHP script retrieves the entire content of the file

angularjs determining the appropriate time to utilize a directive

Is Riot.js the best choice for server-side rendering and routing?

Creating various functions for Joomla's AJAX component development

A guide on verifying the username, password, and chosen role from a database through the use of javascript/ajax or alternative validation methods

Incorporate a vibrant red circle within a tab of the navigation bar

What could be causing the delay in Express when transitioning between console logs while using AngularJS $http.get?

JavaScript refuses to execute

Is it possible to use JavaScript to clear a field that was generated by Yii CRUD?

Sending a variable from JavaScript to an external PHP file

Position divs to be perfectly aligned and centered

How can I enable two-finger scrolling on mobile web browsers?

Create a custom element in React to detect and encapsulate links

Unable to navigate to the frame within the Salesforce Lightning interface

Ways to incorporate a conditional statement within a dropdown menu

Java Script Custom Print Preview: A unique way to showcase your content

Manipulating data rows in a table using jquery

Having trouble configuring individual route files in Express JS

Parse the text file to extract its data and display that data in a table using Yii2 framework

The relative link feature in React Router fails to properly navigate