how can I apply a class name to an SVG element within styled components

Question

how can I apply a class name to an SVG element within styled components

I've been attempting to style an SVG icon component using styled-components, but I'm encountering some issues as the styles I apply to the close icon are not taking effect.

import styled from 'styled-components'
import Close from './close.svg'

const CloseIcon = ({ className , ...props }) => <Close {...props} className={className} />

const styledCloseIcon = styled(CloseIcon)`
  &.ui.modal {
    .modal-icon-close {
      width: 14px;
      height: 24px;
      fill: black;
      top: 12px;
      right: 14px;
    }
  }
`
export default styledCloseIcon

close.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M13.627 12.213l9.9 9.9-1.414 1.414-9.9-9.9-9.9 9.9L.9 22.113l9.9-9.9-9.9-9.9L2.314.9l9.9 9.9 9.899-9.9 1.414 1.415-9.9 9.9z"/>
</svg>

This close icon is utilized in a Semantic UI React modal


<Modal
      size='small'
      open={true}
      closeIcon={<Close className='modal-icon-close'/>}
      closeOnDimmerClick={false}
      className={classNames(className)}
      >

css reactjs svg styled-components

Answer 1

Answer №1

By using styled(CloseIcon), you are automatically applying styles to the SVG as the custom component accepts the className prop. This allows styled-components to add the necessary styles and only display the SVG icon.

Instead of using nested class names, try applying styles directly.

For example:

import React from "react";
import ReactDOM from "react-dom";

import styled from "styled-components";
import { ReactComponent as Close } from "./close.svg";

const CloseIcon = ({ className, ...props }) => (
  <Close {...props} className={className} />
);

const StyledCloseIcon = styled(CloseIcon)`
  width: 30px;
  height: 30px;
  fill: #ee4845;
`;

const App = () => {
  return (
    <div>
      <StyledCloseIcon />
    </div>
  );
};

Check out the working demo on codesandbox

Answer 2

By using styled(CloseIcon), you are automatically applying styles to the SVG as the custom component accepts the className prop. This allows styled-components to add the necessary styles and only display the SVG icon.

Instead of using nested class names, try applying styles directly.

For example:

import React from "react";
import ReactDOM from "react-dom";

import styled from "styled-components";
import { ReactComponent as Close } from "./close.svg";

const CloseIcon = ({ className, ...props }) => (
  <Close {...props} className={className} />
);

const StyledCloseIcon = styled(CloseIcon)`
  width: 30px;
  height: 30px;
  fill: #ee4845;
`;

const App = () => {
  return (
    <div>
      <StyledCloseIcon />
    </div>
  );
};

Check out the working demo on codesandbox

Answer 3

Answer №2

Challenges

I have identified a few challenges

import Close from './close.svg'; is not recognized as a valid react component
Need to refactor the class structure in the styled component

Resolution

First step is to create a proper SVG react component

const CloseIcon = ({ className, ...props }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    {...props}
    className={className}
  >
    <path d="M13.627 12.213l9.9 9.9-1.414 1.414-9.9-9.9-9.9 9.9L.9 22.113l9.9-9.9-9.9-9.9L2.314.9l9.9 9.9 9.899-9.9 1.414 1.415-9.9 9.9z" />
  </svg>
);

Next, ensure modal-icon-close is a top-level class in the styled component

const StyledCloseIcon = styled(CloseIcon)`
  &.modal-icon-close {
    width: 14px;
    height: 24px;
    fill: black;
    top: 12px;
    right: 14px;
  }
`;

https://codesandbox.io/s/upbeat-pine-j6b1f?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.js&theme=dark

It seems redundant to internalize the classname and CSS, only to require the correct classname prop to be passed. Simplify the component by specifying the className prop using .attrs

const StyledCloseIcon = styled(CloseIcon).attrs(() => ({
  className: 'modal-icon-close',
}))`
  &.modal-icon-close {
    width: 14px;
    height: 24px;
    fill: black;
    top: 12px;
    right: 14px;
  }
`;

Alternatively, consider eliminating the classname altogether

const StyledCloseIcon = styled(CloseIcon)`
    width: 14px;
    height: 24px;
    fill: black;
    top: 12px;
    right: 14px;
`;

Answer 4

Challenges

I have identified a few challenges

import Close from './close.svg'; is not recognized as a valid react component
Need to refactor the class structure in the styled component

Resolution

First step is to create a proper SVG react component

const CloseIcon = ({ className, ...props }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    {...props}
    className={className}
  >
    <path d="M13.627 12.213l9.9 9.9-1.414 1.414-9.9-9.9-9.9 9.9L.9 22.113l9.9-9.9-9.9-9.9L2.314.9l9.9 9.9 9.899-9.9 1.414 1.415-9.9 9.9z" />
  </svg>
);

Next, ensure modal-icon-close is a top-level class in the styled component

const StyledCloseIcon = styled(CloseIcon)`
  &.modal-icon-close {
    width: 14px;
    height: 24px;
    fill: black;
    top: 12px;
    right: 14px;
  }
`;

https://codesandbox.io/s/upbeat-pine-j6b1f?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.js&theme=dark

It seems redundant to internalize the classname and CSS, only to require the correct classname prop to be passed. Simplify the component by specifying the className prop using .attrs

const StyledCloseIcon = styled(CloseIcon).attrs(() => ({
  className: 'modal-icon-close',
}))`
  &.modal-icon-close {
    width: 14px;
    height: 24px;
    fill: black;
    top: 12px;
    right: 14px;
  }
`;

Alternatively, consider eliminating the classname altogether

const StyledCloseIcon = styled(CloseIcon)`
    width: 14px;
    height: 24px;
    fill: black;
    top: 12px;
    right: 14px;
`;

Answer 5

Answer №3

This is the way I set a class name for an SVG file:

import { ReactComponent as MyImage } from '../assets/img/myimage.svg' 

<MyImage
    className='myClassName'
    fill='white'                            
/>

styles.css:

.hoverColor:hover {
    fill: yellow !important;
    opacity: 1 !important;
}

Answer 6

This is the way I set a class name for an SVG file:

import { ReactComponent as MyImage } from '../assets/img/myimage.svg' 

<MyImage
    className='myClassName'
    fill='white'                            
/>

styles.css:

.hoverColor:hover {
    fill: yellow !important;
    opacity: 1 !important;
}

how can I apply a class name to an SVG element within styled components

Answer №1

Answer №2

Challenges

Resolution

Answer №3

Similar questions

Just dipping my toes into the world of backend development and diving into the intric

Retrieve the most recently added item in the Material-ui Autocomplete component

What could be causing my dropdown links to malfunction on the desktop version?

Dividing the code into a function and invoking it does not produce the desired outcome

Excluding Gitlab's node_modules from the .gitignore: How to modify and upload a module?

Error in Typescript: The type 'string' cannot be assigned to the type '"allName" | `allName.${number}.nestedArray`' within the react hook form

Select the radio button by hovering the mouse over it

Applying CSS Filters can sometimes interfere with the functionality of 3D

React Router will not remount the component when using this.context.router.push

What is the most efficient method for saving Redux state into local state using React JS?

Encountering type errors in React+Typescript while dynamically setting values in the change handler

React component state change in reverse

emulate the removal of a material-ui Chip

Guidelines for automating button click using selenium in Python

TypeScript: Unable to fetch the property type from a different type

Issue with state not being updated upon clicking "Save" button

When React first fetches data and users move to chat with each other, the state value does not update

Error: Cannot use Object.fromEntries as a function

Converting a List of Maps from Immutable.js into a List of Lists and utilizing it as the dataset for Google Charts

Is it possible for a div to extend beyond the previous div's boundaries using CSS?