Responsive svg colors using styled components and css variables in react.

Did you know that there's an online tool that converts an svg element to jsx compatible code? If we use this tool with standard settings to convert our svg to jsx, we get the following code.

import React from "react";

function Icon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="128.189"
      height="128.189"
      version="1.1"
      viewBox="0 0 33.917 33.917"
    >
      <g fillRule="evenodd" transform="translate(-67.533 -100.816)">
        <circle
          cx="84.491"
          cy="117.774"
          r="15.958"
          fill="none"
          stroke="#000"
          strokeDasharray="none"
          strokeMiterlimit="4"
          strokeOpacity="1"
          strokeWidth="2"
        ></circle>
        <circle
          cx="76.737"
          cy="110.885"
          r="2.107"
          fill="red"
          strokeWidth="0.265"
        ></circle>
        <path
          fill="none"
          stroke="#000"
          strokeDasharray="none"
          strokeLinecap="round"
          strokeMiterlimit="4"
          strokeOpacity="1"
          strokeWidth="2"
          d="M93.574 123.142a9.54 6.119 0 01-9.216 4.535 9.54 6.119 0 01-9.215-4.535"
        ></path>
        <circle
          cx="91.333"
          cy="110.885"
          r="2.107"
          fill="red"
          strokeWidth="0.265"
        ></circle>
      </g>
    </svg>
  );
}

export default Icon;

We can now use the svg as a react component.

import AnySvg from '/public/AnySvg'
<AnySvg />

Result:

Note that Albinie is not his original size any more. The image isn't scaled to the width of the blog, because the <img> tag isn't used here.

In order to automatically scale the svg, we can simply replace the width and height tags in the react component. Instead of defining a width in pixels, we set the width to 100% and remove the height tag altogether.

   <svg
      xmlns="http://www.w3.org/2000/svg"
      width="100%"
      version="1.1"
      viewBox="0 0 33.917 33.917"
    >

Result:

We continue by creating a styled component from the Icon component (this is the emoticon component). Here we will use theme data in order to set the right colors in the svg. In my case the colors are set in css variables, so we copy a color into the stroke property.

import styled from 'styled-components'

const StyledIcon = styled(Icon)`
  stroke: var(--textColor);
`

We also have to unpack the props from the styled component into the svg tag, so that the style property is correctly set.

function Icon(props) {
   return (
      <svg
         xmlns="http://www.w3.org/2000/svg"
         width="100%"
         version="1.1"
         viewBox="0 0 33.917 33.917"
         {...props}
      >
}

Albinie just got some white in his eyes... And is still not responsive to theme changes. This is clearly not what we wanted to achieve. Do not despair however, as there is only one step left, editing the stroke props in the svg.

By removing the right stroke props from the svg, we can control which curves get their stroke set via the styled component, and which ones don't. In our case we want to make the mouth, and the circle around the face, responsive to theme changes. They are both colored black, so we can do a search and replace in the file.

ctrl + f, then search for stroke="#000" and replace all of them with an empty string. This results in the following.

Try changing the theme now with the button in the top right corner! An albino smiley will be clearly visible no matter what theme is chosen. Check out the robotics post if you would like to see theme-responsive svg illustrations that are actually useful.