svg icon hover effect not displaying color properly

Seeking expertise in incorporating social media icons with a hover effect to turn purple. Encountering an issue where the entire circle of the icon is mistakenly being painted on hover. Refer to the screenshot of the current outcome and desired result.

Working within a project utilizing Tailwind CSS, I have been using the following class for added images: 

className='fill-current hover:fill-primary-500'
. The stroke is also not functioning as intended.

const socials = [
  {
    icon: (
      <IcFB
        className='hover:fill-primary-500'
        width={40}
        height={40}
      />
    ),
    title: 'Facebook',
    url: '#',
  },
  {
    icon: (
      <IcInstagram
        className='hover:fill-primary-500'
        width={40}
        height={40}
      />
    ),
    title: 'Instagram',
    url: '#',
  },
]

const Socials: FC = observer(() => {
  return (
    <div className='flex space-x-4'>
      {socials.map((s) => (
        <LinkWrapper key={s.url} href={s.url} title={s.title} target='_blank'>
          {s.icon}
        </LinkWrapper>
      ))}
    </div>
  )
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

javascriptcssreactjssvgtailwind-css

Answer №1

Check out this solution:

const socialMediaLinks = [
  {
    icon: (
      <IcFB
        className='fill-primary-500 hover:fill-white'
        width={40}
        height={40}
      />
    ),
    title: 'Facebook',
    url: '#',
  },
  {
    icon: (
      <IcInstagram
        className='fill-primary-500 hover:fill-white'
        width={40}
        height={40}
      />
    ),
    title: 'Instagram',
    url: '#',
  },
]

const SocialMediaIcons: FC = observer(() => {
  return (
    <div className='flex space-x-4'>
      {socialMediaLinks.map((link) => (
        <LinkWrapper key={link.url} href={link.url} title={link.title} target='_blank'>
          {link.icon}
        </LinkWrapper>
      ))}
    </div>
  )
})

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

The elusive cookie in NodeJS remained just out of reach

After setting a cookie using the code below: router.get("/addCartToCookie", function(req, res) { let options = { maxAge: 1000 * 60 * 15, httpOnly: true, }; let cartData = { name: "test cookie", slug: slugify(&quo ...

javascriptnode.jsexpresscookies

Switching back and forth between JQuery and CSS display changes

My challenge involves utilizing a JQuery file to present one question at a time in a quiz format. Upon clicking the submit button, the intention is to progress to the subsequent question. However, I have encountered an issue where the transition occurs mom ...

jqueryhtmlcss

Sending user credentials to a new page in JavaScript

My goal is to direct the user from one web page to another that requires a password for access. The user arrives on the initial page by scanning a barcode with a specific terminal, similar to a smartphone equipped with a customized barcode reader applicati ...

javascript

Using Svelte to effectively connect to a specified object within an array

Check out this code snippet: <script> let data = [ {id: 1, first: "x"}, {id: 2, second: "y"} ]; </script> <input type="text" bind:value={data.first}/> If you modify the value in the input field and ...

javascripthtmlsveltesveltekitsvelte-component

When using the navbar in Tailwind CSS, the image is appearing distorted instead of aligning properly with the adjacent

I am trying to add a flag, login button, and sign up button Using class="flex", I placed an image inside it However, when I add the buttons, the image gets distorted. How can I prevent this? Expected Outcome I want to create the flag, login but ...

htmlimageflexboxtailwind-cssnavbar

"Learn how to position a div element below the header div and above the footer div while maintaining full height in

Recently delving into the world of reactjs, I find myself facing a challenge with a page that contains 3 distinct blocks formed by divs. Have a look at the layout on my page: My Page This is the code snippet I have worked on: return ( <div> ...

javascripthtmlcssreactjs

The issue arises when the logout component fails to render even after the user has been authenticated. This problem resembles the one discussed in the React Router

While attempting to run the react-router docs example on the browser, I encountered an issue with the AuthButton component. The problem arises when the isAuthenticated value changes to true but the signOut button fails to display. import React from ' ...

javascriptreactjsreact-routerreact-router-domreact-router-v4

What is the best way to update the state of a component when a button is clicked in another component?

When the "updates" button in my component is clicked, the application scrolls down to a specific Parent section. This Parent section is displayed on the page by another component and contains a toggle button that shows/hides other child sections within the ...

reactjs

The location of the footer is not aligned correctly

Recently, I encountered an issue that has left me puzzled. The problem is that the footer on my webpage is appearing between the calendar button and the calendar itself. Here is a snippet from my calendar.html file: {% extends 'base.html' %} {% ...

htmlcssdjango

Oops! Looks like we have encountered an issue with reading the property 'checked' of nothing

Whenever I click the checkbox, an image should be displayed. Unfortunately, I encountered an error: Uncaught TypeError: Cannot read property 'checked' of null at (index):185 at dispatch (VM576 jquery.min.js:3) at i (VM5 ...

javascriptjqueryhtmlcssangular

What is the best way to structure a JSON object to support conditional statements?

My goal is to develop a JSON object capable of handling conditionals/branching. My workflow involves multiple steps where the user's choices determine the subsequent set of options. This branching logic continues throughout different stages. I envisi ...

javascriptjson

Could you show me how the easyrtcid is generated in the demonstration of audio-only chat? I would appreciate a step-by

Currently, I am utilizing the easyrtc webpage to test out the audio only chat demo and everything seems to be running smoothly. However, when connecting, the easyrtcid variable is automatically assigned a random string. I was wondering if there is a way t ...

javascripthtmlsocket.iowebrtc

Ways to share information between two separate components in a React.js application without relying on the Context API or Redux

Despite my experience as a react developer, I found myself stumped by this question during an interview. Is there a way to pass data between two independent components without relying on the context api or redux? If anyone knows the answer, please share ...

reactjscomponents

Accessing a Kendo Grid instance within an Angular directive

Continuing from the previous question, which can be found here, I have an additional query that I felt warranted a separate post. The link provided above demonstrates how to obtain a grid instance in Angular, credit to Lars for that. Building upon the ex ...

javascriptangularjskendo-uikendo-grid

Jest is logging an excessive number of setTimeout calls

I'm currently testing a react component that utilizes setTimeout. An issue has arisen where Jest is indicating that setTimeout is being called even though it's not actually happening. The usage of setTimeout in this component involves removing an ...

reactjsunit-testingtimerjestjsreact-hooks

What could be causing my div element to not inherit its parent div's width?

My query revolves around a header div that I'm struggling to align with the same width as its parent div, while keeping the content centered. Currently, the div is only as wide as its content, causing it to be off-center. https://i.stack.imgur.com/E1 ...

csscss-position

Utilizing an observer to encapsulate a custom React hook- a comprehensive guide

As part of my project, I have developed a unique custom react hook that relies on observable state from the store for its dependencies within useEffect: Here is an example of my custom hook: const useFoo = (() => { const { count } = store; useEff ...

reactjstypescriptreact-hooksmobxmobx-react-lite

What's the trick to ensuring that state is set with useEffect() every time the page is refreshed?

Hey there! I've got some code that's pretty straightforward and not too complicated, so please take a moment to read through it. (I'm using React with Next.js) First off, in the root file app.js, there's a useEffect function that fetch ...

reactjsnext.jsuse-effectuse-stateasynchronous-javascript

Ensuring Input Integrity: Utilizing HTML and Javascript to Block Unfilled Form Submissions

Currently, I am working on developing a registration page using HTML and JavaScript. Although I have added the 'required' tag in HTML to prevent users from submitting empty input fields, I noticed that users can bypass this restriction by simply ...

javascripthtml

Ways to continuously monitor a div for a specific class

Is there a way to continuously check if an area has the class "top-nav" in order for the alerts to work every time it lacks or contains the class? How can I achieve this functionality? Check out the code on jsfiddle: https://jsfiddle.net/jzhang172/117mg0y ...

javascriptjqueryhtmlcss