Unable to adjust SVG size in React

Can someone explain why resizing an imported svg is not working in this instance? I've tried removing the width and height values on the svg itself, but it didn't solve the issue.

const Wrap = styled.div`
  svg {
    width: 40px;
    path {
      fill: red;
    }
  }
`;

export default function App() {
  return (
    <div className="App">
      <Wrap>
        <Logo />
      </Wrap>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

https://codesandbox.io/s/pensive-river-ertf8?file=/src/App.js:145-423

javascriptcssreactjsstyled-components

Answer №1

The issue lies with your SVG file. It currently has fixed height and width values set, but no viewBox specified. To resolve this, update the opening tag as follows:

<svg xmlns="http://www.w3.org/2000/svg" height="1000" width="1000" viewBox="0 0 1000 1000" xmlns:xlink="http://www.w3.org/1999/xlink">

Next, within your component, adjust the height and width settings in the styled component to allow for scaling, like so:

const Wrap = styled.div`
  svg {
    width: 40px;
    height: 40px;
    path {
      fill: red;
    }
  }
`;

By making these changes, the SVG will now properly scale according to the width and height properties.

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

Intelligent method for replacing hover and focus styles

I have customized the bootstrap pagination to remove background and border, but I find myself duplicating a lot of code to make it work. .pagination > li > a, .pagination > li > a:hover, .pagination > li > a:focus, .pagination > li ...

csstwitter-bootstrap

Nodejs image validation not working as expected

I'm currently working on a project using Nodejs and the expressjs framework. My goal is to allow image uploads through an API, but I have two specific requirements: 1) I need to implement validation for the dimensions (height and width) of the image. ...

javascriptnode.jsexpress

Renew The Dining Surface

I am looking for a way to update the table content without refreshing the entire page. I am using HTML, CSS, and JavaScript to display the current data from my sqlite3 database. Any tips on how to achieve this would be appreciated. ...

javascriptpythonhtmlcss

The damping effect in three.js OrbitControls only activates when the mouse is pressed, however there is no damping effect once the

I find it difficult to articulate: Currently, I am utilizing OrbitControls in three.js and have activated damping for a smoother rotation with the mouse. It is somewhat effective but not entirely seamless. When I click and drag, the damping feature works ...

javascriptthree.jsmousemousewheelorbitcontrols

Creating a JSON body using a JavaScript function

I am looking to generate a JSON Body similar to the one shown below, but using a JavaScript function. { "events": [{ "eventNameCode": { "codeValue": "xyz api call" }, "originator": { "associateID": "XYZ", "formattedName": " ...

javascriptjsonresthttp-postpostman

Transform the array into an object containing corresponding key-value pairs

In my dataset, I have an array containing various values: [ { "factor": { "data": "f1", "val": [ "val1" ] } }, { "factor": { "data": "f2", "val": [ "val2" ] ...

javascriptarraysjsonobject

Navigate the array and divide the elements into separate values

For a project I need to upload files, wherein the data is organized within an object like [5.76516834507, 50.8474898368], [5.76115833641, 50.8453698247]. The task here is to extract and store the first value as latitude: 5.76516834507 and the second value ...

javascriptarraysreactjs

Hover effect on navigation in CSS

Having trouble achieving a hover effect and could use some help. I'm working on creating a tab-style navigation menu where I want the tab to expand from the top when hovered over. However, my current CSS code is causing the tab to expand both at the ...

jqueryhtmlcss

Two CSS borders of varying heights

Just wondering, can we achieve something similar to the style shown in the attachment using only CSS? <h3 style="border-bottom:1px solid #515151"><span style="border-bottom:3px solid #0066b3">HEADER</span></h3> ...

htmlcss

The _.findWhere function fails to work properly if the object contains a value represented as an array

When I try to use _.findWhere to search for an object with a value as an array, it always returns undefined. var nameArray = [{name:'firstName',value : ['Amruta','Swapnil']},{name:'LastName',value : ['Pawar&apo ...

javascriptunderscore.js

Updating Parent Component Modal Properties Using Another Child Component - ReactJS

Greetings, I must mention that my knowledge of React is still in its early stages. Despite searching extensively on the internet for a solution to this particular issue, I have not been able to find one that fits perfectly, hence why I am reaching out here ...

reactjsbootstrap-4

Using jQuery AJAX, the value of a server-side control (textbox) can be easily set

After working with the code below, I noticed that I can only set the value received from an ajax call if I am using HTML controls like buttons and text boxes. If I try to use asp server controls such as a button, the ajax call does not return any output, e ...

javascriptjqueryhtmlasp.netajax

Conceal the input field that contains the placeholder "Maximum contacts reached"

I have a PeoplePicker element that displays a disabled input field with the placeholder text "Maximum contacts added". How can I hide it using CSS? When inspecting the code, the following HTML structure is revealed: <input class="control" ...

csspeoplepicker

Transform an array of objects containing Promises into a regular array

Having implemented async-await, I've encountered the following console log. I'm uncertain about where I may be going wrong. [ Promise { { categoryName: 'Salary', categoryAmount: '35000', categoryValue: ...

javascriptnode.jsmongodbexpressmongoose

endless cycle of scrolling for div tags

My goal is to incorporate a tweet scroller on I believe it uses the tweet-scroller from Unfortunately, this link seems broken as the demo is not functioning. I searched for an alternative solution and came across http://jsfiddle.net/doktormolle/4c5tt/ ...

javascriptjquerycssjquery-plugins

Webpack's node process.cwd() and path.resolve() functions both yield the root directory as '/' in their output

Basically the main issue here is with the title, I'm not entirely sure what I have misconfigured... I've seen other solutions that recommend adding target: node, but since I am using webpack to bundle react, my target shouldn't be nodejs, ri ...

javascriptnode.jsreactjswebpack

Define default array values in Mongoose schemas using Node.js

My model definition includes: appFeatures: [{ name: String, param : [{ name : String, value : String }] }] I am looking to assign a default value to appFeatures, such as: name: 'feature', para ...

javascriptnode.jsmongodbmongoosemongodb-query

Different Ways Split Button Format Can Vary Based on Web Browser

I am encountering a formatting issue with a jQuery splitbutton on my webpage. In order to adhere to my company's design standards, I am essentially converting a link into a button. The functionality works perfectly fine; however, depending on the brow ...

javascriptjqueryhtmlcssinternet-explorer

Issue with Cordova ListPicker plugin while using the Ripple emulator

Currently, I am utilizing Cordova within Visual Studio and have successfully integrated the ListView plugin from this source. The addition of the plugin was done through the config.xml editor screen. While trying to execute window.plugins.listpicker.showP ...

javascriptcordovacordova-pluginsvisual-studio-cordova

What are the reasons behind my inability to utilize the resources in the Django admin app?

I am trying to incorporate Django's contrib "admin" resources into my project. The "admin" package has a static directory with a file located at "static/admin/image/selector-icons.svg" that I want to reuse. Here is an excerpt from my settings.py: ST ...

pythoncssdjangosvg