How to style an SVG using React styled components by passing the SVG as prop?


I have this SVG, imported from figma:

import React from 'react';
function CloseIcon() {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g clip-path="url(#clip0_5301_20199)">
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M19.8539 4.85394C20.0491 4.65868 20.0491 4.3421 19.8539 4.14683C19.6586 3.95157 19.342 3.95157 19.1468 4.14683L12.0007 11.2929L4.85372 4.14634C4.65845 3.95108 4.34187 3.95109 4.14661 4.14636C3.95136 4.34162 3.95136 4.65821 4.14663 4.85346L11.2936 12L4.14688 19.1467C3.95162 19.342 3.95162 19.6586 4.14688 19.8538C4.34214 20.0491 4.65873 20.0491 4.85399 19.8538L12.0007 12.7071L19.1467 19.8529C19.342 20.0481 19.6586 20.0481 19.8539 19.8528C20.0491 19.6576 20.0491 19.341 19.8538 19.1457L12.7078 12L19.8539 4.85394Z"
          fill="#00A989"
        />
      </g>
      <defs>
        <clipPath id="clip0_5301_20199">
          <rect width="24" height="24" fill="white" />
        </clipPath>
      </defs>
    </svg>
  );
}

export default CloseIcon;

The SVG is then imported in my component, rendered correctly on the screen as the original style coming from Figma. But when I do style it with styled components, any style is not applied. What is the problem?

import CloseIcon from '../../../Icons/CloseIcon';
import styled from 'styled-components';

<ClosingIcon
  aria-label="Close Modal"
  onClick={() => setShowModal((prev) => !prev)}
/>

const ClosingIcon = styled(CloseIcon)`
  cursor: pointer;
  position: absolute;
  top: 14px;
  right: 32px;
  /* width: 32px;
  height: 32px; */
  padding: 0;
  z-index: 10;
`;

Source: React – Stack Overflow

November 23, 2021
Category : News
Tags: reactjs | styled-components | SVG

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.