CODEWITHSUNDEEP
reactjssvgstyled-components
user14749773
user14749773

Reputation: 143

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;
`;

Upvotes: 0

Views: 1119

Answers (1)

Madhuri
Madhuri

Reputation: 1100

you need to pass classname prop to the child component,

function CloseIcon({ className }) {
  return (
    <svg
      className={className}  --> like this
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g clipPath="url(#clip0_5301_20199)">
        <path
          fillRule="evenodd"
          clipRule="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>
  );
}

reference : https://styled-components.com/docs/advanced#existing-css

Upvotes: 2

Related Questions