Inheriting the viewBox attribute with SvgIcon

I have a collection of unique custom SVGs, each with its own distinct viewBox.

First Custom SVG

<svg viewBox="-4 -4 24 24"><path something/></svg>

Second Custom SVG

<svg viewBox="-5 -7 24 24"><path something/></svg>

Third Custom SVG

<svg viewBox="-2 -1 24 24"><path something/></svg>

And so forth...

I am utilizing the Material UI component: SvgIcon.

<SvgIcon
  component={component} // Here lies my personalized SVG
/>

The default view for SvgIcon is '0 0 24 24', which is applied to all SVGs. I aim to have it inherit from the component instead.

I understand I can specify a property like:

<SvgIcon
  component={component}
  viewBox="my values" // For example, "0 0 20 20"
/>

However, since the viewBox differs among different SVGs,

cssreactjsmaterial-ui

Answer №1

One workaround I've discovered is to ensure that MUI's SvgIcon component uses the same viewBox as your original SVG file. Otherwise, MUI's SvgIcon will default to 0 0 24 24 (as stated here), which may not align with your specific SVG.

For instance:

Your original SVG might have a defined viewBox like this:

<svg width="12" height="12" viewBox="0 0 12 12">
    <path d="..."/>
</svg>

To integrate your custom SVG file with MUI's SvgIcon:

import MyCustomIcon from '../assets/MyCustomIcon.svg';

// ...

<SvgIcon
  component={MyCustomIcon}
  viewBox="0 0 12 12"
/>

You'll notice that the viewBox specified in the SvgIcon matches that of the original SVG file.

I trust this tip proves useful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble accessing state when React child calls parent method

Within my project, I am working with 3 components that are nested as follows: App->GameList->GameItem The App (parent) component has a method that is triggered by the onClick event within the GameItem (child) component Upon clicking the GameItem co ...

javascriptreactjs

What is the process for adding a class to a number within an array?

Create an array with the values [1,0,1,0]. When displaying this array on a webpage, each element should be placed inside a div. If the element is 1, give the div a class of white; if it's 0, make it black. let state = { array2: [1, 0, 1, 0] }; } ...

reactjs

Include a CSS file from an external JavaScript file

Is there a way to include an external CSS file in an external JS file? I am trying to reference and load Default.css inside Common.js like the image below shows. Any suggestions are greatly appreciated! BB ...

javascriptcssexternal

React onClick event not functioning when using dangerouslySetInnerHTML

Hey there, I'm brand new to learning React and I'm currently trying to figure out how to add an onClick event inside the HTML render using dangerouslySetInnerHTML. Can someone help me with this? Let me show you the code snippet: import "./s ...

reactjs

The art of layering images: How to stack one image on top of another

I am in the process of trying to place a logo on top of an image, but I have been unsuccessful so far. Rather than overlapping, the second image is appearing next to the first one. Can you help me figure out how to solve this issue? This is for a website ...

htmlcss

CSS :hover problem, text appearing unexpectedly

I'm currently working on designing a logo that displays hidden text when hovered over, providing instructions to users. However, I've encountered an issue where the hidden text reveals itself even before the logo is hovered over. This is frustrat ...

htmlcsshover

The ability to scroll horizontally for individual items within a larger container div

JSFIDDLE: http://jsfiddle.net/7zk1bbs2/ If you take a look at the JSFiddle project, you'll notice that the icons are placed inside an orange box. However, there is a vertical scroll needed to browse through them and I am attempting to enable horizont ...

htmlcssscroll

Can you explain the purpose of the _app.js and _document.js files in Next.js? What is the significance of using an underscore (_) in Next.js?

After using npx create-next-app to create a next.js app, I noticed that there are 2 JavaScript files named app and document in the pages directory with an initial underscore. What is the purpose of this naming convention? The files appear like this: ▼ p ...

javascriptreactjsnext.js

Is it possible to break a single word when word wrapping?

Is it possible to apply word-wrap: break-word to just one word within an element without affecting the entire element? I find that when I apply it to the entire element, it looks messy. I tried searching for a solution but couldn't find anything. Has ...

htmlcss

Opera browser fails to render CSS3 box shadow effect

My menu features CSS3 effects on hover and active states, giving it a unique appearance. Below is the CSS3 styling I have implemented: #Menu a:active, #Menu a.active:before,#Menu a:hover:before { Content: ' '; position:absolute; z-i ...

cssopera

Automatically generate a new model instance in Django

Currently, I am working on a project that involves using django along with react.js. One of the features I have implemented is social authentication for Google using Django social auth. Everything seems to be functioning correctly as I can obtain the Djang ...

reactjsdjangodjango-modelsdjango-rest-framework

Utilizing Material-UI ThemeProvider and createGenerateClassName for Preventing Class Name Overlap

Is there a way to prevent conflicts in a React application using material-ui classNames from makeStyles when including a package that also uses the same naming conventions, resulting in multiple conflicting .jss1, .jss2 styles on the rendered page? Both th ...

reactjsmaterial-ui

Creating the Apk file for your sencha touch application

Hello there! I'm diving into the world of Sencha Touch as a new user. After installing all the required tools and SDK, I successfully set up the demo example that came with project creation via command line. Now, I'm eager to generate the APK fil ...

javascriptjquerycsshtmlsencha-touch

The transformation from CSS and HTML to RoR resulted in sprites being converted into mysterious black boxes

Previously, this site was functioning fine without Ruby on Rails. However, after moving the code to Rails, a strange issue has arisen where the hover images turn black when the mouse is placed over them. // Place all the styles related to the home control ...

htmlruby-on-railscssruby

Inquiry about the security level of passport.js

I have some questions regarding the security levels when using passport for authentication in an App; Currently, I am in the process of creating my first App using a MongoDB, Express, React and Node.js stack. Although I lack previous experience in cyber s ...

node.jsreactjsexpresspassport.js

Footer displaying page numbering

I recently installed dompdf 0.83 and have been able to generate documents successfully. However, I am struggling to create a footer that displays the page number out of the total number of pages. Both css and script methods have not been effective for me s ...

cssdompdf

Keep track of e.target as the input in React is modified

I am struggling with formatting an input field and highlighting its text when focused. After updating the state, the event does not trigger as expected. I see why this is happening, but I am unsure how to highlight the text of the input after the change. ...

reactjs

Warning issued by npm during compilation: The template string expression is unexpected as there should be no curly braces in the

Getting an npm warning during compiling (Unexpected template string expression no-template-curly-in-string) import React from 'react'; const Card = ({name, email, id }) => { return ( <div className='tc bg-light-green dib b ...

javascriptreactjsnpm

How can I correctly focus on 'highlight' events using the tab key on an HTML element?

I'm struggling to figure out the event that is triggered when an element gains focus through tab navigation. I want all buttons in the codepen provided to expand to full size when tabbed over. https://codepen.io/anon/pen/YopBaz Currently, I have achi ...

htmlcss

I encountered an issue while iterating through Object HTMLDivElement and applying ChileNode style z-index, resulting in an undefined output in both Firefox and Chrome browsers

function adjustPosition(currentDiv) { try { for (var i = 0; i < document.getElementById("parentContainer").childNodes.length; i++) { document.getElementById("parentContainer").childNodes[i].style.zIndex = 0; ...

javascripthtmlcss