Tips for adding a class to an SVG when clicked

I want to make an SVG change color to white when clicked and its container (icon_container) to change to blue. How can I achieve this? Below is the code snippet:

state = {
  active: false,
};

click = () => {
  this.setState({active: !this.state.active});
};

render = () => {
  const classes = ['icon_container'];
  if (this.state.active) {
    classes.push('active');
  }

  return (
    <div className={classes.join(' ')}>
      <SvgLayer className="icon" onClick={this.click}/>
    </div>
  );
};

icons {
  margin-top: 16px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  right: 16px;

  .icon_container {
    background-color: white;

    .icon {
      height: 16px;
      width: 16px;

      * {
        fill: blue;
      }
    }
  }
}

I have attempted the following code to change the SVG color to white and the icon_container to blue, but it doesn't work.

.active.icons.icon_container {
  background-color: blue;
}

Can someone assist me with this issue? Thank you.

Answer №1

html:

To incorporate your SVG into the HTML document, place it within the body tag as shown below:

Use this code snippet to insert your SVG where needed:

<svg id="icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <use xlink:href="#icon"></use>
</svg>

css: Define the color:

#icon-svg use
{
    fill: #000;
}

Change the color on hover:

#icon-svg use:hover, 
#icon-svg use:active, 
#icon-svg use:focus
{
    fill: #fff;
}

Refer to this helpful link for more information: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use

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

CSS Code That Is Ineffective

Having some trouble with creating a hidden background that will still show up but not on the main content page. I'm looking to have a different background for the main content itself, but for some reason it's just not working. The main background ...

Switch the style of the anchor tag using JavaScript

I need assistance with modifying a list on my webpage. Here is the current structure: <ul id="breadcrumbs" class="breadcrumbs-two"> <li><a href="#" class="current" id="a1">Step1</a></li> <li><a href ...

Tips for changing the font size of labels in a tree view using Material UI

While working with material ui treeview, I have customized the fontSize for each treeItem as shown below: <TreeItem key={mainCategory.name} nodeId={mainCategory.name} label={mainCategory.name} disabled={ ...

Explore registrations by year and month

I am currently working on coding where a record needs to be displayed based on the date (Month, Year), for instance: 12-2022. However, with the current code I have, I am unable to achieve this. Can anyone offer some guidance on what steps I should take? ...

Align title text to the right within the Material Design Card

I have implemented a Material Design (MDL) card to showcase numeric values in the title. However, I am facing an issue where the values are left aligned by default and I want them to be right aligned. Despite trying various styles, they are being ignored ...

How to reference color variables from code behind in ASP and use them in CSS files

I have a total of 3 files dedicated to my Login-Screen: Login.aspx, Login.aspx.cs, and LoginStyle.css Upon the execution of the Page_Load method, I retrieve various data from the current system, including the theme-color represented as a string (e.g., #00 ...

Does the addClass() method run asynchronously?

When trying to remove the class transition (and therefore, the CSS transition property), moving the div to 200px immediately, reapplying the transition css property, and then animating the div to the right over 1 second, it appears to be frozen instead. I ...

What is the best way to create a page that moves on release using HTML/CSS?

I'm working on a website where I want to make an interactive feature. When users click on an image on the left side of the page, I want the page to move backward. Similarly, when they click on an image on the right side, I want the page to move forwar ...

What is the best way to place a div absolutely in a flex box without affecting the positions of its neighboring elements?

I have an element with the #text inside a flex container and I want to position something absolutely beneath it: How can I ensure that it does not affect the positioning of its siblings in the flex layout? #container{ display: flex; align-items: cen ...

Update the content of the widget

Currently, I am utilizing the following script to display NBA standings: <script type="text/javascript" src="https://widgets.sports-reference.com/wg.fcgi?script=bbr_standings&amp;params=bbr_standings_conf:E,bbr_standings_css:1&amp"></sc ...

css background-size and image position not working

On my website, users/members can upload or link a custom image for the start page. This feature works well with modern browsers that support background-size in CSS. However, if the browser does not support css3 background-size, the image may not fill the e ...

List that scrolls with a stationary button

I am working on an interface that includes a button with a dropdown list. Here is an example: <a href="https://jsfiddle.net/DTcHh/16589/" rel="nofollow">jsfiddle</a> While the list is scrollable, I am looking to add a fixed button at the botto ...

Are there any class options that offer a wider width than modal-lg?

I am currently using vue.js along with Bootstrap. Within my modal dive, I am looking for a class that will help me increase the width of the modal div, As you can see from the image below, my modal div looks like this. I plan on adding 12 more tabs, whic ...

Clickable link remains functional after being hidden

Even though I have hidden the Games-div using the .hide() function in jQuery, my links are still clickable. Is there a way to make them unclickable after being hidden? Here is the link to my code on jsFiddle: http://jsfiddle.net/hypertje/Frv8G/ Note: The ...

What could be causing the div class to move downward in the CSS code?

I have posted a question, but unfortunately, no one has answered it yet. Here is my code snippet: * { margin: 0; padding: 0; } body { width: 100%; font-family: 'Cabin', sans-serif; background-color: #333; } .firstnav { ...

Template for Joomla with a white stripe running along the right side

When I resize my browser to be half the width of my screen at www.thames.ikas.sk, a white stripe appears on the right side. Why is this happening? Why aren't my html and body elements taking up the full width of the browser? This issue doesn't oc ...

"What is the best way to use JavaScript to update several elements based on their class and incorporate distinct sub data for

Essentially, I am receiving a sequence of 5-10 events from an external server in the following format: event: add data: { "hostname":"name", "properties": {"info": "50"}} event: add data: { "hostname":"name2", "properties": {"info": "45"}} event: add da ...

Are there any issues with the onClick function not being detected in React?

I am currently working on a project using NextJs and TypeScript, and I have encountered some strange issues with the onClick function. It appears that the function is not being recognized within my component. "use client"; import styles from &quo ...

Customizing the background color in Bootstrap 4 without impacting the container

Hey there, I'm currently working on a login page for my website. However, I've run into an issue where changing the background also changes the color of my div container. How can I resolve this problem so that only the background changes? Below ...

Achieve a seamless transition for the AppBar to extend beyond the bounds of its container in Material

I am finalizing my app structure by enclosing it within an MUI Container with maxWidth set to false. The issue I'm facing is that the AppBar inside the container doesn't span the full width of the screen due to paddingX property enforced by the c ...